Gatsby.js — 404 Page and SEO

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Add a 404 Page

We can create a 404 page by adding a 404.js file in the src/pages folder.

For example, we can write:

src/pages/404.js

import React from "react"

const NotFoundPage = () => {
  return <div>not found</div>
}

export default NotFoundPage;

to add this file.

Now we should see this page when we go to any unrecognized URL in production.

SEO

SEO is an important part of many sites.

Gatsby provides support for this with React Helmet.

We have to install React Helmet by running:

npm i react-helmet

Then we can write:

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "My Site",
    titleTemplate: "%s · The Real Hero",
    description: "Some website",
    url: "https://www.example.com",
    image: "/assets/dog.jpg",
    twitterUsername: "@occlumency",
  },
}

src/pages/index.js

import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from "gatsby"

const SEO = ({ title, description, image, article }) => {
  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)
  const {
    defaultTitle,
    titleTemplate,
    defaultDescription,
    siteUrl,
    defaultImage,
    twitterUsername,
  } = site.siteMetadata
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  }
  return (
    <Helmet title={seo.title} titleTemplate={titleTemplate}>
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />
      {seo.url && <meta property="og:url" content={seo.url} />}
      {(article ? true : null) && <meta property="og:type" content="article" />}
      {seo.title && <meta property="og:title" content={seo.title} />}
      {seo.description && (
        <meta property="og:description" content={seo.description} />
      )}
      {seo.image && <meta property="og:image" content={seo.image} />}
      <meta name="twitter:card" content="summary_large_image" />
      {twitterUsername && (
        <meta name="twitter:creator" content={twitterUsername} />
      )}
      {seo.title && <meta name="twitter:title" content={seo.title} />}
      {seo.description && (
        <meta name="twitter:description" content={seo.description} />
      )}
      {seo.image && <meta name="twitter:image" content={seo.image} />}
    </Helmet>
  )
}

SEO.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  article: PropTypes.bool,
}
SEO.defaultProps = {
  title: null,
  description: null,
  image: null,
  article: false,
}

const query = graphql`
  query SEO {
    site {
      siteMetadata {
        defaultTitle: title
        titleTemplate
        defaultDescription: description
        siteUrl: url
        defaultImage: image
        twitterUsername
      }
    }
  }
`

const IndexPage = () => {
  return <>
    <SEO />
    <div>hello world</div>
  </>
}

export default IndexPage

In gatsby-config.js , we have the website’s metadata.

The metadata is in the siteMetadata property.

title has the site’s title.

titleTemplate has the title template. %s is the placeholder for the title.

description has the site’s description.

url has the site’s URL. image has the site’s preview image.

twitterUsername has the Twitter username for the site.

Then in index.js , we create the SEO component.

It uses the Helmet component to add the title , titleTemplate , description , url , and twitterUsername from the site.siteMetadata property.

The data comes from the query object that we have at the bottom of the file.

We call the useStaticQuery hook with the query object to make the query.

We pass all the metadata into the Helmet component and they’ll be rendered in the head tag.

Conclusion

We can use the React Helmet package to render our site’s metadata in the head tag for SEO purposes.

Also, we can create a 404 page easily with Gatsby.