Introduction

When developer codes and deploys a website, they often want visitors to find and read the website they have created. Search engine optimization (SEO) is the practice of making a website discoverable by an online audience. Optimizing search involves making changes to your Gatsby app so that it will show up in the results for popular search engines nowadays. In the previous Gatsby version, the combination of third-party libraries like react-helmet and gatsby-plugin-react-helmet became the developer's friend to tune the metadata of an HTML website such as title, description, keywords, or even social media metadata. Sometimes, using an open source library that's not been well-maintained can lead you to headaches (at least that's what I feel 😅).

Since gatsby@4.19.0 version was released, the core team introduced a new Gatsby Head API which is easier to use, more performant and has a smaller bundle size. In the next section, you will find a short comparison between using react-helmet and a new Gatsby Head API.

How to use Gatsby Head API on your page?

Below is my code to define page metadata before Gatsby version 4.19.0 shipped.

import React from 'react';
import { Helmet } from 'react-helmet';

const BlogPage = () => {
  return (
    <>
      <Helmet>
        <title>Blog title goes here</title>
      </Helmet>
      <h1>Blog Page</h1>
    </>
  )
}

export default BlogPage;

To use this Gatsby's new feature, please make sure you must export a Head function that returns JSX in your page and or page template.

import React from 'react';

const BlogPage = () => {
  return <h1>Blog Page</h1>;
}

export const Head = () => {
  return <title>Blog Page</title>;
}

export default BlogPage;

How to make the component reusable?

Imagine your Gatsby app has multiple pages, then you have to standardize the page title like this “[YOUR WEBSITE NAME] - [BLOG TITLE]”. So, instead of defining page titles one by one throughout the whole page, you can summarize the time spent by creating a new component, and let’s call it as <Seo> component.

import React from 'react'

type SeoProps = {
  title?: string;
  children: React.ReactNode;
}

const Seo = ({ children, title = "My website title" }: SeoProps) => (
  <>
    <title>{`Website name - ${title}`}</title>
    {children}
  </>
);

Simply import <Seo> component into your page and or page template.

import React from 'react';
import Seo from '../component/Seo';

const BlogPage = () => {
  return <h1>Blog Page</h1>;
}

export const Head = () => (
  <Seo title="Hey, I'm unique!">
    <meta name="description" content="Sample of description" />
  </Seo>
);

The code above will produce the result below.

Blog Head API

That’s it

Through all this, I wanted to show you how easy it is to use the new Gatsby Head API. I hope you found this article helpful, and let me know if you have any questions or need additional information related to this topic.

You can download the source code on GitHub here: https://github.com/yasintze/blog-head-api, also check branch react-helmet and see how the new Gatsby Head API simplifies our life.