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.

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

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

The SEO component queries for data with Gatsby’s useStaticQuery React hook. Just import the useStaticQuery and graphql from gatsby like so:

Once you created your SEO component you can import the SEO component in your page template and pass in the information you want from your page content source. In this case we pull in the data from Markdown via Gatsby’s transformer remark.

💡 For example, SEO data can be pulled in a page template under src/templates/doc.jsx via markdownRemark and passed into the SEO component.

And that’s it 🔥 🚀

You now have SEO in your Gatsby apps, which will help you with site ranking and better performance in search engines 👏