search-engine-optimisation.md

Search Engine Optimisation

Category: Gatsby

Adding metadata such as a title, description, and keywords to pages generated by Gatsby is essential for helping search engines understand your content and decide whether it will be indexed.

Gatsby’s react helmet plugin provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds.

Add dependencies to your project:

yarn add gatsby-plugin-react-helmet react-helmet

In gatsby-config.js:

• Add siteMetadata which describes the site
• Add gatsby-plugin-react-helmet to the plugins section

module.exports = {
  siteMetadata: {
    title: 'SoundBytes',
    description: 'SoundBytes is about product development, technology, and team leadership.',
    author: 'Greg Smith',
    siteUrl: 'https://www.soundbytes.dev',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    // More plugins
  ]
  // More site configuration...
};

Create an SEO component in src/components/SEO.js for embedding in your layout. Include Twitter tags and Open Graph og tabs for Facebook to improve the quality of metadata attributes when posts are shared.

import React from 'react'
import { Helmet } from 'react-helmet'
import { useStaticQuery, graphql } from 'gatsby'

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

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`${meta.title} | ${site.siteMetadata.title}`}
      meta={[
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1.0',
        },
        {
          name: 'author',
          content: site.siteMetadata.author,
        },
        {
          name: 'description',
          content: meta.description,
        },
        {
          name: 'keywords',
          content: meta.keywords.join(','),
        },
        {
          property: 'og:title',
          content: meta.title,
        },
        {
          property: 'og:description',
          content: meta.description,
        },
        {
          property: 'og:type',
          content: 'website',
        },
        {
          name: 'twitter:card',
          content: meta.summary,
        },
        {
          name: 'twitter:creator',
          content: site.siteMetadata.author,
        },
        {
          name: 'twitter:title',
          content: meta.title,
        },
        {
          name: 'twitter:description',
          content: meta.description,
        },
      ]}
      />
  )
}

export default SEO;

Create a layout component in src/components/layout.js:

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

import Header from './Header';
import SEO from './SEO';
import Footer from './Footer';

const Layout = ({ meta, children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <>
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <Header siteTitle={data.site.siteMetadata.title} />
        <SEO title={data.site.siteMetadata.title} meta={meta} />
        
        <main>{children}</main>a
        <Footer copyright={'© Greg Smith. All Rights Reserved.'} />
      </div>
    </>
  );
};

export default Layout;

Assuming a template driven layout, for each page of content, include the following:

<Layout 
  meta={{
    title: 'Your page title',
    keywords: ['some', 'random', 'keyword', 'to', 'index', 'for', 'searching'],
    description: 'Description for your page.'
  }}
>

See Gatsby - creating the SEO component for more details.