1/4/2019 Last edited: 2/12/2024
Search Engine Optimization with Gatsby
Product & Engineering Leader
Search Engine Optimization (hereafter SEO) is something that you should want. You’ve possibly even been approached by an SEO expert who can maximize your revenue and page views just by following these Three Simple Tricks! However, relatively few make the concerted effort to implement SEO in their web app. In this post, I’ll share some of the ins and outs of SEO and how you can implement common, simple SEO patterns in your Gatsby web app, today. By the end of this post you’ll know how to do the following:
- Implement SEO patterns with react-helmet
- Create an optimized social sharing card for Twitter, Facebook, and Slack
- Tweak the SEO component exposed in the default gatsby starter (
The core technology powering SEO is the humble, ubiquitiuous
meta tag. You’ve probably seen something like:
or further still with more of an SEO spin something as simple as the
These are the bare minimum requirements that should be implemented for simple and basic SEO. However—we can go further, and we can go further with the powerful combo of content rendered at build time powered by Gatsby and GraphQL. Let’s dive in.
Gatsby + GraphQL
GraphQL is a crucial feature enabled via Gatsby (note: you don’t have to use GraphQL with Gatsby). Leveraging GraphQL to query your indexable content—wherever it lives (at build time!)—is one of the most powerful and flexible techniques enabled via Gatsby. Let’s briefly look at how we can implement an extensible and flexible SEO component.
Gatsby distinguishes between page-level queries and component queries. The former can use page GraphQL queries while the latter can use a new in Gatsby v2 feature called
StaticQuery. A StaticQuery will be parsed, evaluated, and injected at build time into the component that is requesting the data. This is a perfect scenario in which we can create an SEO component with sane defaults that can be easily extended.
Creating the component
Using the power and flexibility of React, we can create a React component to power this functionality.
react-helmetis enabled, by default, in gatsby-starter-default and gatsby-starter-blog
If you’re not using those: follow this guide for installation instructions
This component doesn’t do anything yet, but we’re laying the foundation for a useful, extensible component. What we’ve done up to this point is leverage the
StaticQuery functionality enabled via Gatsby to query our siteMetadata (e.g. details in
gatsby-config.js) so that we can grab description and keywords.
StaticQuery component accepts a render prop, and at this point, we’re simply returning
null to render nothing. Let’s actually render something and build out our prototype for this SEO component. Let’s iterate further.
whew, getting closer! This will now render the
description tag, and will do so using content injected at build-time with the
StaticQuery component. Additionally, it will add the
lang="en" attribute to our root-level
html tag to silence that pesky Lighthouse warning 😉
If you remember earlier, I claimed this was the bare bones, rudimentary approach to SEO, and that still holds true. Let’s enhance this functionality this and get some useful functionality for sharing a page via social networks like Facebook, Twitter, and Slack.
Implementing social SEO
In addition to SEO for actual search engines we also want those pretty cards that social networks like Twitter and Slack enable. Specifically, we’d like to implement the following:
- Description for embedded results
- Title for embedded results
- (Optionally) display an image and a card if an image is passed in to the component
Let’s implement it 👌
Woo hoo! What we’ve done up to this point is enabled not only SEO for search engines like Google, Bing (people use Bing, right?) but we’ve also laid the groundwork for enhanced sharing capabilities on social networks. That’s a win-win if I’ve ever seen one 😍
To bring it all home, let’s consider actually using this extensible SEO component.
Using the SEO component
We now have our extensible SEO component. It takes a
title prop, and then (optionally)
image props. Let’s wire it all up!
In a page component
In a template
Let’s pretend we have a Markdown powered blog (see: this tutorial for more info). We—of course—want some nice SEO as well as a nifty image for sharing on Twitter, Facebook, and Slack. We’re going to do this with a few steps, specifically:
- Create a Markdown post
- Add an image, and add it to the Markdown posts frontmatter
- Query this image with GraphQL
Creating the post
Adding the image
Feel free to add whatever, or perhaps use this very pertinent image:
the image will need to be located at
Querying with GraphQL
Utilizing the techniques outlined in this post, we’ve made our Gatsby application SEO-friendly as well as sharable on common social networks. Don’t just take my word for it, though—check out the following examples of a sample blog post.
These SEO resources outlined in this post aren’t only a best practice, they’re also a best practice enabled, by default. Available today in
gatsby-starter-default, simply use:
and you’ll have the
SEO component available to maximize your SEO and social sharing capabilities. Check it out!
This article is merely a shallow dive into the depths of SEO optimization—consider it a primer for further learning. To learn more, check out the following resources:
- Facebook uses the Open Graph tag format
- Twitter uses
twitter:keywords. See Twitter Cards for more info
- Slack reads tags in the following order (source)
- oEmbed server
- Twitter cards tags / Facebook Open Graph tags
- HTML meta tags
Finally, check out the
gatsby-seo-example for a ready-to-use starter for powering your Markdown-based blog.
Thanks for reading—I cannot wait to see what you build next. 💪