Gatsby plugin providing drop-in support for react-helmet-async with SSR and global configuration via gatsby-config
npm install @bitpas/gatsby-plugin-seoUnstable 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.
Install @bitpas/gatsby-plugin-seo with npm.
``shell`
npm install @bitpas/gatsby-plugin-seo react-helmet-async
Add the plugin to the plugins array in gatsby-config.js:
`js:title=gatsby-config.js`
module.exports = {
plugins: ['@bitpas/gatsby-plugin-seo'],
};
You can now use the component in your app as outlined in the react-helmet docs.
`jsx:title=HomePage.jsx
import React from 'react';
import { Helmet } from 'react-helmet-async';
import { Layout, Home } from '../components';
const HomePage = () => (
);
export default HomePage;
`
@bitpas/gatsby-gatsby-plugin-seo exposes the react-helmet props api in gatsby-config.js to set global defaults in gatsby-config.js.
`js:title=gatsby-config.js
const site = require('./config');
module.exports = {
plugins: [
{
resolve: '@bitpas/gatsby-plugin-seo',
options: {
helmet: {
title: site.shortDescription,
titleTemplate: %s – ${site.title},${site.image}
meta: [
{ name: 'description', content: site.description },
{ name: 'author', content: site.author },
{ name: 'og:image', content: },`
],
},
},
},
],
};
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:
`js:title=gatsby-config.js`
...
options: {
helmet: {
title: 'Global Title',
titleTemplate: '%s – SEO',
},
},
...
In FooPage.jsx:
`jsx:title=FooPage.jsx``
...
...