Gatsby + SEO = ❤️

Improve your search engine performance and site ranking with SEO in headless WordPress CMS + Gatsby and a Gatsby/Markdown CMS app

Photo by KOBU Agency on Unsplash

This blog post is going to walk you through how to implement SEO in your Gatsby app in two different Gatsby applications.

👉 The first Gatsby app is a headless WordPress CMS connected to Gatsby via WPGraphQL. SEO can be implemented via the WPGraphQL YOAST SEO Plugin.

👉 The second SEO implementation is going to show you how to implement SEO data via the Gatsby SEO plugin in a Gatsby app.

Let’s get started 🏇 🙌

Headless WordPress CMS + Gatsby + YOAST SEO

This post assumes you already have your Gatsby Frontend connected to your WordPress via WPGraphql.

In order to get the data from YOAST, you can install Ash Hitchcock’s plugin ashhitch/wp-graphql-yoast-seo on WordPress:

This allows you to query an additional field in the GraphQL for SEO data from YOAST under pages.

GraphQL query for SEO data from YOAST

The site meta data is set in the gatsby-config.js file.

siteMetadata for SEO in gatsby-config.js

Therefore in seo.jsx we can set either SEO data in the Helmet from YOAST or from siteMetaData. Here is an example:

That is all you need to do to setup SEO in your headless Wordpress CMS + Gatsby app! 🍰

SEO in Gatsby via Gatsby SEO plugin

The second Gatsby app has a Markdown CMS implementation. You can find an example in Postman’s open-source Learning Center repository.

In src/components folder create a file called seo.jsx