One place for hosting & domains

      Component

      How To Boost SEO Using Gatsby’s SEO Component and Gatsby React Helmet


      The author selected /dev/color to receive a donation as part of the Write for DOnations program.

      Introduction

      When a user codes and deploys a website, they often want an online audience to find and read the website they’ve created. Search engine optimization (SEO) is the practice of making a website discoverable by this online audience. Optimizing search involves making changes to your Gatsby app so that it will show up in the results for search engines like Google, Bing, and DuckDuckGo. This is often done by fine-tuning the metadata that ends up in the HTML for your site.

      In this tutorial, you will configure Gatsby’s SEO component that comes with SEO tooling right out of the box. You will add meta tags to your site using Gatsby React Helmet. Meta tags are important because they give search engines information about your site. Usually the better understanding Google has about your site, the more accurately it can index your webpage. You will also create social media cards for Twitter, and Open Graph meta tags in Facebook. There are over one billion people using some form of social media, so optimizing for social media is an efficient way to get your website in front of many internet users.

      Prerequisites

      Step 1 — Creating an Empty Project

      In this section, you are going to create a new project based on the Gatsby starter default template. You are going to create a whale-watching website, and in the following steps you will improve its SEO. This will give you a solid project that you can optimize with meta tags and social media assets.

      First, use the CLI tool to start a new project named gatsby-seo-project:

      • gatsby new gatsby-seo-project https://github.com/gatsbyjs/gatsby-starter-default

      This creates a new website from the starter template in the gatsby-starter-default GitHub repository from Gatsby.

      Once the project is created, move into the src/images folder of the project:

      • cd gatsby-seo-project/src/images

      Once you are in the images folder, download a picture of a whale from the stock photography website Unsplash:

      • wget 'https://unsplash.com/photos/JRsl_wfC-9A/download?force=true&w=640'

      Wget is a Gnu command that downloads files from the internet.

      Next, list all of the images in the same images directory with the ls command:

      You will receive the following output:

      Output

      'download?force=true&w=640' gatsby-astronaut.png gatsby-icon.png

      'download?force=true&w=640' is a hard name to remember, so rename it to whale-watching.png:

      • mv 'download?force=true&w=640' whale-watching.png

      Now that you have your whale image, go to the root of your project and open src/pages/index.js. Make the highlighted change in the following code to customize your website:

      gatsby-seo-project/src/pages/index.js

      import * as React from "react"
      import { Link } from "gatsby"
      import { StaticImage } from "gatsby-plugin-image"
      
      import Layout from "../components/layout"
      import SEO from "../components/seo"
      
      const IndexPage = () => (
        <Layout>
          <SEO title="Home" />
          <h1>Whale watching for all</h1>
          <p>Come see extraordinary whales!</p>
          <StaticImage
            src="https://www.digitalocean.com/community/tutorials/images/whale-watching.png"
            width={300}
            quality={95}
            formats={["AUTO", "WEBP", "AVIF"]}
            alt="A surfacing whale"
            style={{ marginBottom: `1.45rem` }}
          />
          <p>
            <Link to="/page-2/">Go to page 2</Link> <br />
            <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
          </p>
        </Layout>
      )
      
      export default IndexPage
      

      Save the file. To try out the code, start a local development server with the following command:

      Once the server is running, check localhost:8000 in your browser. You will find your new site rendered in the browser:

      Gatsby site with whale image and text.

      You are now finished setting up your project. Next, you will add meta tags to your site header with React Helmet.

      Step 2 — Creating an SEO Component with React Helmet

      In this section, you are going to learn how to control the technical SEO aspects of your site with the help of Gatsby’s React Helmet plugin and an SEO component. The Helmet plugin provides server side rendering to all of the metadata found in the head of the Gatsby site. This is important because, without server side rendering, there is a chance that server engine bots might not be able to scrape and record metadata before the site is rendered, making it more difficult to index the site for search.

      When you use gatsby-starter-default as a base for your website, it already comes with everything you need to start tweaking SEO. To do this, you will be working with the following files:

      • gatsby-config.js: Gatsby config includes metadata values that GraphQL will query and place in the SEO file.

      • src/components/seo.js: This file contains the Helmet and the SEO component.

      You are first going to open the gatsby-config.js file, which is located at the root of your project:

      Before you make any changes to the file, examine the plugins key in the exported object. The Gatsby default starter already has the Helmet plugin installed, as shown in the following highlighted line:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Gatsby Default Starter`,
          description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
          author: `@gatsbyjs`,
        },
        plugins: [
          `gatsby-plugin-react-helmet`,
          `gatsby-plugin-image`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          `gatsby-transformer-sharp`,
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `gatsby-starter-default`,
              short_name: `starter`,
              start_url: `/`,
              background_color: `#663399`,
              theme_color: `#663399`,
              display: `minimal-ui`,
              icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
          },
          `gatsby-plugin-gatsby-cloud`,
          // this (optional) plugin enables Progressive Web App + Offline functionality
          // To learn more, visit: https://gatsby.dev/offline
          // `gatsby-plugin-offline`,
        ],
      }
      

      Next, direct your attention to the siteMetadata key. This contains an object that holds the metadata for your site. You are going to change the title, the description, and the author. You will also add keywords to help users search for your site:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Wondrous World of Whale Watching`,
          description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
          author: `@digitalocean`,
          keywords: `whales, marine life, trip, recreation`,
        },
      ...
      

      The keywords metadata is instrumental in optimizing for search. While the topic of choosing keywords is beyond the scope of this tutorial, you can learn more about the basics of SEO at Google’s search documentation website. Here you have added specific search terms that users might use when searching for a site like the sample whale-watching site.

      Save and close this file.

      Next, proceed to open the SEO component:

      • nano src/components/seo.js

      There is a lot going on in the SEO component. Focus your attention on the SEO function. In this function you are using GraphQL to query the siteMetadata object. Remember that you have added keywords to your siteMetadata object, so make the following highlighted change to your query:

      gatsby-seo-project/src/components/seo.js

      ...
      function SEO({ description, lang, meta, title}) {
        const { site } = useStaticQuery(
          graphql`
            query {
              site {
                siteMetadata {
                  title
                  description
                  author
                  keywords
                }
              }
            }
          `
        )
      ...
      

      Below the SEO function, add a reference to this queried data in a keywords constant to make the data easier to work with:

      gatsby-seo-project/src/components/seo.js

      ...
        const keywords = site.siteMetadata.keywords
        const metaDescription = description || site.siteMetadata.description
        const defaultTitle = site.siteMetadata?.title
      ...
      

      The variable keywords has all of the keywords you created in the gatsby-config.js file. The variable metaDescription is a description that you can pass as a prop on a page or query from the siteMetadata object in gatsby-config.js. Finally, defaultTitle is set to the value of title in the siteMetadata object. The ? in the siteMetadata attribute checks for a null value and returns undefined for a null or nullish value.

      Next, inspect what the SEO component is returning, and add an object for keywords:

      gatsby-seo-project/src/components/seo.js

      ...
        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                name: `keywords`,
                content: keywords,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata?.author || ``,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: metaDescription,
              },
            ].concat(meta)}
          />
        )
      ...
      

      You are returning a Helmet component. Helmet populates the head of an HTML document using server side rendered data, which makes it easier for Google to crawl and record the metadata. htmlAttributes={{lang,}} specifies the language of the element’s content, and title is the title found in the metadata, which comes from siteMetadata. titleTemplate creates the title tag, which is important, since Google penalizes sites that are missing a title tag.

      After this section, you’ll find the meta object, which contains the metadata. Most of the values here come from siteMetadata.

      Finally, examine the SEO.defaultProps and SEO.propTypes objects:

      gatsby-seo-project/src/components/seo.js

      ...
      SEO.defaultProps = {
        lang: `en`,
        meta: [],
        description: ``,
      }
      
      SEO.propTypes = {
        description: PropTypes.string,
        lang: PropTypes.string,
        meta: PropTypes.arrayOf(PropTypes.object),
        title: PropTypes.string.isRequired,
      }
      

      SEO.defaultProps are the default values of the SEO props. SEO.propTypes passes the correct value type and acts as a light typing system.

      Save your file with the new keywords entry and start the local server in your terminal:

      After the server has starter, enter localhost:8000 in the browser. Open up the view of the HTML in your browser; for Chrome, right click the window and open DevTools. Choose Elements and open the <head></head> tag. In this tag, you will find the following line:

      ...
      <meta name="keywords" content="whales, marine life, trip, recreation" data-react-helmet="true">
      ...
      

      You have now successfully set the header data with React Helmet.

      In this section, you created metadata to improve the SEO of your whale-watching site. In the next section, you’ll add an image and make this site easier to share on social media.

      Step 3 — Adding Images to Enhance Social Sharing

      Social networks play an important role in attracting attention to your content. In this section, you are going to add an image to two features that optimize sharing your site on social: your Twitter card and the Open Graph protocol for Facebook. You will also learn which tools to use to ensure that your metadata is appearing on these two social network platforms.

      Open up gatsby-config in a text editor:

      You are going to add images/whale-watching.png into the siteMetadata:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Wondrous World of Whale Watching`,
          description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
          author: `@digitalocean`,
          keywords: `whales, marine life, trip, recreation`,
          image: `src/images/whale-watching.png`
        },
        plugins: [
          `gatsby-plugin-react-helmet`,
          `gatsby-plugin-image`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          `gatsby-transformer-sharp`,
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `gatsby-starter-default`,
              short_name: `starter`,
              start_url: `/`,
              background_color: `#663399`,
              theme_color: `#663399`,
              display: `minimal-ui`,
              icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
          },
          `gatsby-plugin-gatsby-cloud`,
          // this (optional) plugin enables Progressive Web App + Offline functionality
          // To learn more, visit: https://gatsby.dev/offline
          // `gatsby-plugin-offline`,
        ],
      }
      

      GraphQL will now be able to query the image. Close and save the file.

      Next, open up seo.js in the text editor:

      • nano src/components/seo.js

      Now that your image is in the site metadata, it’s time to add it to the SEO component. Add the following highlighted lines to seo.js:

      gatsby-seo-project/src/components/seo.js

      ...
      function SEO({ description, lang, meta, title}) {
        const { site } = useStaticQuery(
          graphql`
            query {
              site {
                siteMetadata {
                  title
                  description
                  author
                  keywords
                  image
                }
              }
            }
          `
        )
        const image = site.siteMetadata.image
        const keywords = site.siteMetadata.keywords
        const metaDescription = description || site.siteMetadata.description
        const defaultTitle = site.siteMetadata?.title
      
        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                name: `keywords`,
                content: keywords,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
              {
                property: `og:image`,
                content: image,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:image`,
                content: image,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata?.author || ``,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: metaDescription,
              },
            ].concat(meta)}
          />
        )
      }
      
      SEO.defaultProps = {
        lang: `en`,
        meta: [],
        description: ``,
      }
      
      SEO.propTypes = {
        description: PropTypes.string,
        image: PropTypes.string,
        lang: PropTypes.string,
        meta: PropTypes.arrayOf(PropTypes.object),
        title: PropTypes.string.isRequired,
      }
      
      export default SEO
      

      In this code, you:

      • Added the image to the GraphQL query
      • Created an image variable and set the value to the image found in siteMetadata
      • Added og:image to the meta object
      • Added twitter:image to the meta object
      • Added image to SEO.propTypes

      Save your changes and close seo.js.

      The final step in this process is to test these changes on Twitter and Facebook. This cannot be done from a local development server; in order to test your site, you must first deploy it. There are many ways to do this, including using DigitalOcean’s App Platform, which you can read about in the How To Deploy a Gatsby Application to DigitalOcean App Platform tutorial.

      This tutorial will use a Gatsby app hosted on App Platform as an example. You can find this app at https://digital-ocean-gatsby-seo-xkmfq.ondigitalocean.app/, and it includes the SEO changes you made to your site in this tutorial.

      If you want to test if social media objects show up on Twitter, head over https://cards-dev.twitter.com/validator. This validator is maintained by Twitter, and requires a Twitter account to use. Put the URL for the sample deployed site into the validator:

      Twitter card validator

      Notice that the custom image will now show when users tweet about your website.

      Next, head over to Facebook’s Open Graph validator at https://developers.facebook.com/tools/debug/. This is maintained by Facebook, and requires a Facebook account to use. Add the URL for the sample app into the URL field. The debugger will provide you with more detail about which og objects are present and which ones are missing:

      Facebook open graph validator

      Notice that the image appears with a title and a description in the Link Preview section.

      You’ve now added an image to your metadata, a Twitter card, and a Facebook Open Graph.

      Conclusion

      In this tutorial, you boosted the SEO of your site using Gatsby’s React Helmet and the SEO component. You’ve also learned how to add images to social media cards to make your site more shareable.

      With the basics of SEO covered, you can now read more about optimizing search for Gatsby at the official Gatsby documentation.





      Source link

      What is a Component?


      A software component is a web service, software package, or module that contains a set of interrelated functions. Components are typically used in front-end frameworks like React and Svelte.

      In component-based software engineering, components are used to separate different functions within an application, upholding the separation of concerns and reusability approach of this form of engineering.

      To learn more about components, follow our tutorial to implement a component in a React project, How to Implement a Modal Component in React.



      Source link

      Replacing Component Lifecycles with the useEffect Hook, in React


      Introduction

      React Hooks are revolutionizing the way we develop in React and solving some of our biggest concerns. The useEffect Hook allows us to replace repetitive component lifecycle code.

      Essentially, a Hook is a special function that allows you to “hook into” React features. Hooks are a great solution if you’ve previously written a functional component and realize that you need to add state to it.

      If you’re new to Hooks and would like an overview, check out the introduction to React Hooks.

      This article assumes that you’re familiar with the useState Hook. If you’re not, never fear! If you spend a little time with Convert a React Class-Based Component to a Functional One Using a State Hook you’ll be on the right track!

      About useEffect

      useEffect is short for ‘use side effect’. Effects are when our application reacts with the outside world, like working with an API. It allows us to run a function based on whether something changed. useEffect also allows us to combine componentDidMount and componentDidUpdate.

      About Our App

      We’ll be taking some prewritten class-based code and converting it to a functional component. We’ll be using reactstrap to simplify our formatting and axios to call an external dummy API.

      Specifically, we’re using jsonplaceholder to pull-in dummy user data on our initial component mount.

      Starter Code

      Then we are triggering the component to re-render based on a user click and pulling in additional data about the users.

      Starter Code, clicked

      Getting Started

      Just clone over the repo with the starting code:

      $ git clone https://github.com/alligatorio/use-effect-hook
      $ npm i
      $ npm start
      

      Take a moment to familiarize yourself with the code, in particular, the ClassBasedComponent.js file.

      You’ll notice that we have two lifecycle methods in this file, componentDidMount and componentDidUpdate.

      async componentDidMount() {
        const response = await axios
          .get(`https://jsonplaceholder.typicode.com/users`);
      
        this.setState({ users: response.data });
      };
      
      async componentDidUpdate(prevProps) {
        if (prevProps.resource !== this.props.resource) {
          const response = await axios
            .get(`https://jsonplaceholder.typicode.com/users`);
      
          this.setState({ users: response.data });
        }
      };
      

      These are both async lifecycle methods that call the jsonplaceholder API to bring in a list of users.

      In componentDidMount, we say on first render, get the user data. Next, on componentDidUpdate we look to see if anything has changed in props. This can be triggered from user initiated events, like in our example, a button press. Once the change is detected we say, go out and get the data again.

      We would like to condense the lifecycle methods into the useEffect Hook and create a function-based component.

      Create a Component

      Rather than using the same ClassBasedComponent.js file, create a new file called FunctionBasedComponent.js. We’re creating a new file so that we can contrast and compare the two.

      In your terminal, you can run the following to create the new file from your root directory:

      $ touch FunctionBasedComponent.js
      

      To help get started, copy and paste the code below into your new file:

      import React, { useState, useEffect } from 'react';
      import { Container, Button, Row } from 'reactstrap';
      import axios from 'axios';
      
      const FunctionBasedComponent = () => {
        return (
          <Container className="user-list">
            <h1>My Contacts:</h1>
          </Container>
        )
      };
      
      export default FunctionBasedComponent;
      

      Now hop over to your App.js file, import your FunctionBasedComponent.js file and replace ClassBasedComponent with FunctionBasedComponent.

      Your app should now look something like the screenshot below.

      our starting useEffect app


      Let’s start by initializing state with useState.

      const [ users, setUsers ] = useState([]);
      const [ showDetails, setShowDetails ] = useState(false);
      

      To quickly recap on useState, to initialize state with the useState hook, we declare both our variable and the function that corresponds to the variable in an array and then we pass useState() the argument that we’d like to initialize our variable with.

      • The users state variable is initialized with an empty array and given the function of setUsers.
      • The showDetails state variable is initialized with the value of false and assigned the function of setShowDetails.

      Add an API Call

      Let’s go ahead and add in our API call as the fetchUsers function.

      const fetchUsers = async () => {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);
      
        setUsers(response.data);
      };
      

      We are essentially pulling this async call from the former componentDidMount and componentDidUpdate functions.

      Keep in mind we cannot use an async function directly inside useEffect. If we ever want to call an async function, we need to define the function outside of useEffect and then call it within useEffect.

      The useEffect Argument

      Let’s talk about the useEffect hook for a moment. Much like componentDidMount, useEffect will immediately call our function.

      useEffect( () => {}, [ 'value' ]);
      

      By default, useEffect looks to see if the array values are different and if they are different, the arrow function is automatically called.

      useEffect( () => {}, [ 'different value' ]);
      

      Let’s flip back to our code editor and add the useEffect hook below our latest function where we will call fetchUsers.

      In the code below, we’re looking at the users object to see if there are changes.

      useEffect( () => { fetchUsers(users) }, [ users ] );
      

      Common Issues

      • If you don’t pass an array into the useEffect Hook, your component will continuously reload repeatedly.
      useEffect( () => { fetchUsers(users) } );
      
      • If you pass an empty array, we are not watching any variables, and therefore it will only update state on the first render, exactly like componentDidMount.
      useEffect( () => { fetchUsers(users) }, [] );
      
      • Every time we create an object in JavaScript, it is a different object in memory. Though the code below looks the same, the page will be re-rendered because each object is stored in a different memory address. The same logic applies for arrays.
      useEffect( () => { fetchUsers(users) }, [{ user: 'Alli Alligator' }] );
      

      Is not equal to!

      useEffect( () => { fetchUsers(users) }, [{ user: 'Alli Alligator' }] );
      
      • useEffect function must return a cleanup function or nothing.

      To demonstrate triggering another re-render, copy and paste the code below into your FunctionBasedComponent.js file:

      import React, { useState, useEffect } from 'react';
      import { Container, Button, Row } from 'reactstrap';
      import axios from 'axios';
      
      const FunctionBasedComponent = () => {
        const [ users, setUsers ] = useState([]);
        const [ showDetails, setShowDetails ] = useState(false);
      
        const fetchUsers = async () => {
          const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);
      
          setUsers(response.data);
        };
      
        useEffect( () => { fetchUsers(users) }, [ users ] );
      
        const handleClick = event => { setShowDetails(!showDetails) };
      
        return (
          <Container>
            {
              users.map((user) => (
                <ul key={ user.id }>
                  <li>
                    <strong>{ user.name }</strong>
                    <div>
                      <Button
                        onClick={ handleClick }
                      >
                        { showDetails ? "Close Additional Info" : "More Info"  }
                    </Button>
                     { showDetails &&
                       <Container className="additional-info">
                         <Row>
                           { `Email: ${ user.email }` }
                         </Row>
                         <Row>
                           { `Phone: ${ user.phone }` }
                         </Row>
                         <Row>
                           { `Website: ${ user.website }` }
                         </Row>
                       </Container>
                     }
                    </div>
                  </li>
                </ul>
              ))
            }
          </Container>
        )
      }
      
      export default FunctionBasedComponent;
      

      Now we have an onClick event within a button. On the button click, the state of showDetails is changed, triggering a re-render that will call again to the API and bring in the additional details that we need.

      Voilà!

      async componentDidMount() {
          const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)
          this.setState({ users: response.data })
      };
      
      async componentDidUpdate(prevProps) {
        if (prevProps.resource !== this.props.resource) {
          const response = await axios.get(`https://jsonplaceholder.typicode.com/users`)
          this.setState({ users: response.data })
        }
      };
      

      Becomes:

      const fetchUsers = async () => {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);
      
        setUsers(response.data);
      };
      
      useEffect( () => { fetchUsers(users) }, [ users ] );
      



      Source link