@bitpas/gatsby-plugin-seo

Unstable until v1. Updates may include breaking changes. Use at your own risk.

Provides drop-in support for react-helmet-async with server-side rendering and global configuration via gatsby-config.

Installation

Install @bitpas/gatsby-plugin-seo with npm.

1npm install @bitpas/gatsby-plugin-seo react-helmet-async

Usage

Add the plugin to the plugins array in gatsby-config.js:

1module.exports = {
2  plugins: ['@bitpas/gatsby-plugin-seo'],
3};

You can now use the <Helmet> component in your app as outlined in the react-helmet docs.

1import React from 'react';
2import { Helmet } from 'react-helmet-async';
3import { Layout, Home } from '../components';
4
5const HomePage = () => (
6  <Layout>
7    <Helmet>
8      <title>Home Page</title>
9    </Helmet>
10    <Home />
11  </Layout>
12);
13
14export default HomePage;

Options

@bitpas/gatsby-gatsby-plugin-seo exposes the react-helmet props api in gatsby-config.js to set global defaults in gatsby-config.js.

1const site = require('./config');
2
3module.exports = {
4  plugins: [
5    {
6      resolve: '@bitpas/gatsby-plugin-seo',
7      options: {
8        helmet: {
9          title: site.shortDescription,
10          titleTemplate: `%s – ${site.title}`,
11          meta: [
12            { name: 'description', content: site.description },
13            { name: 'author', content: site.author },
14            { name: 'og:image', content: `${site.image}` },
15          ],
16        },
17      },
18    },
19  ],
20};

Global options can be overridden by redeclaring their values in a component.

For example, the following renders "SEO - Foo Title" for FooPage.jsx and "Global Title - SEO" for all other pages.

In gatsby-config.js:

1...
2options: {
3  helmet: {
4    title: 'Global Title',
5    titleTemplate: '%s – SEO',
6  },
7},
8...

In FooPage.jsx:

1...
2<Helmet title="Foo Title" titleTemplate="SEO - %s" />
3...