Gatsby + SEO = ❤️

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

Christina Hastenrath
3 min readMay 25, 2021
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



Christina Hastenrath

Molecular Biologist turned Software Engineer. I write about my code. Connect with me on Twitter @etTinchen