Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby
Perhaps you’ve been approached by an SEO expert who can maximize your revenue and page views by following these Three Simple Tricks! Relatively few people make the concerted effort to implement SEO in their web app. This tutorial will share some of the ins and outs of SEO and how you can implement common 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 (
A core ingredient for SEO is a meaningful
title tag. Make sure to include related keywords without falling into buzzword bingo. Some crawlers also respect
meta tags, while Google seems to ignore these tags for ranking and indexing at all.
You probably have seen something like the following:
The bare minimum requirement is to include a
title tag for basic SEO. However, the following describes a powerful combo of content rendered at build time powered by Gatsby and 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. The following sections are a brief look at the implementation of 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
StaticQuery. A StaticQuery will be parsed, evaluated, and injected at build time into the component that is requesting the data, allowing to fall back to sane defaults, while also providing an extensible, reusable component.
Using the power and flexibility of React, you 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 starters, follow this guide for installation instructions
This component doesn’t do anything yet, but it’s the foundation for a useful, extensible component. It leverages the
useStaticQuery functionality enabled via Gatsby to query siteMetadata (e.g. details in
gatsby-config.js) with description and keywords. At this point, the
SEO component returns
null to render nothing. Next, you will actually render something and build out the prototype for this SEO component.
Whew, getting closer! This will now render the
description tag, and will do so using content injected at build-time with the
useStaticQuery hook. Additionally, it will add the
lang="en" attribute to the root-level
html tag to silence that pesky Lighthouse warning 😉.
This is still the bare bones, rudimentary approach to SEO. An additional step is to enhance this functionality and get some useful functionality for sharing a page via social networks like Facebook, Twitter, and Slack.
In addition to SEO for actual search engines you also want those pretty cards that social networks like Twitter and Slack enable. Specifically, the implementation should feature:
- Description for embedded results
- Title for embedded results
- (Optionally) display an image and a card if an image is passed in to the component
Woo hoo! You enabled not only SEO for search engines like Google and Bing, but you also laid the groundwork for enhanced sharing capabilities on social networks. Finally, you will learn to add support for one of the more useful functionalities for SEO: a canonical link.
A canonical link is a hint to a search engine that this is the source for this content. It helps resolve duplicate content issues. For instance, if you have several paths to the same content, you can use a canonical link as akin to a soft redirect which will not harm your search ranking if implemented correctly.
To implement this functionality, you need to do the following:
- Enable passing a
pathnameprop to your SEO component
- Prefix your
pathnameprop with your
- A canonical link should be absolute (e.g.
https://your-site.com/canonical-link), so you will need to prefix with this
- A canonical link should be absolute (e.g.
- Tie into the
react-helmetto create a
<link rel="canonical" >tag
Woo hoo! Lots to digest here, but you’ve enabled adding an absolute canonical link by passing in a
pathname prop and prefixing with
To bring it all home, it’s time to begin actually using this extensible SEO component to show all of these moving parts coming together to deliver a great SEO experience.
You created an extensible SEO component. It takes a
title prop and then (optionally)
In many cases, you want to build a Markdown powered blog (see: this tutorial for more info). Of course, you want some nice SEO as well as a nifty image for sharing on Twitter, Facebook, and Slack. The following steps are needed:
- Create a Markdown post
- Add an image, and add it to the Markdown posts frontmatter
- Query this image with GraphQL
Let’s see how an attached image will look like. For this tutorial, you can use the following image:
The image will need to be located at
Make sure to use appropriately sized images for social sharing. Facebook and Twitter have restrictions beyond which they will ignore your image.
There are a few aspects worth nothing here:
pruneLength: 160for the excerpt; this is because SEO meta descriptions should be between 150-170 characters
This is a slick feature of Gatsby’s GraphQL capabilities, and will truncate (e.g. with a trailing
...) appropriately. Perfect!
Using the techniques outlined in this post, you’ve made your Gatsby application SEO-friendly as well as sharable on common social networks. Check out the following examples of a sample blog post.
The SEO resources outlined in this tutorial aren’t only a best practice, they’re also a best practice enabled, by default. Available today in
and you’ll have the
SEO component available to maximize your SEO and social sharing capabilities. Check it out!
This tutorial is merely a shallow dive into the depths of SEO. Consider it a primer for further learning and a gentle introduction to some SEO concepts with a Gatsby twist. To truly master these concepts is outside the scope of this tutorial, but it truly is fascinating stuff that can directly lead to more eyes on your content!
- 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
- Both Google and Apple offer support for JSON-LD, which is not covered in this guide
- If you’d like to learn more, check out this excellent guide for more info on JSON-LD
- Check out the
gatsby-seo-examplefor a ready-to-use starter for powering your Markdown-based blog.