Gatsby.js — 404 Page and SEO

Photo by visuals on Unsplash

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"…