SEO with Gatsby

Gatsby can help your site rank and perform better in search engines. Using Gatsby makes your site fast and efficient for search engine crawlers, like Googlebot, to crawl your site and index your pages. Some advantages, like speed, come out of the box and others require configuration.

Server rendering

Because Gatsby pages are server-side rendered, all the page content is available to Googlebot and other search engine crawlers. You can see this by viewing the source for this page in your browser, Right-Click => View source. You’ll see the fully rendered HTML document.

When you’ve installed gatsby-plugin-offline, you’ll see a partial HTML document that does not contain the HTML you were hoping for. By using gatsby-plugin-offline, we can optimize bandwidth consumption and not let your users download too much data. Serving a partial HTML document is okay. Google and other search engines will still see the full HTML because gatsby-plugin-offline only starts working on the second-page load. A search engine always runs a page in Sandbox mode, which essentially is the first visit.

As a website owner, how do I test my site is serving its HTML correctly when gatsby-plugin-offline is being used? It would be best if you used your terminal of choice to visit your website. You can crawl your site by running the following command:

on Windows (using PowerShell):

on macOS/Linux:

Speed boost

Gatsby’s many built-in performance optimizations, such as rendering to static files, progressive image loading, and the PRPL pattern—all help your site be lightning-fast by default.

In July 2018, Google announced a new ranking factor for site speed, calling the algorithm update the “Speed Update”. Google will possibly rank pages higher in the search results for faster loading times, however, the intent of the search query is still very relevant and a slower page can rank higher if the content is more relevant.

Page metadata

Adding metadata to pages, such as page title, meta description, alt text and structured data using JSON-LD, helps search engines understand your content and when to show your pages in search results.

A common way to add metadata to pages is to add react-helmet components (together with the Gatsby React Helmet plugin for SSR support) to your page components. Here’s a guide on how to add an SEO component to your Gatsby app.

Some examples using react-helmet:

• Official GatsbyJS.org site
• Official GatsbyJS default starter
• Gatsby Mail
• Jason Lengstorf’s personal blog

Generate rich snippets in search engines using structured data

Google uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general.

For example, here is a structured data snippet (added with react-helmet) in the JSON-LD format (JavaScript Object Notation for Linked Data), that might appear on the contact page of a company called Spooky Technologies, describing their contact information:

When using structured data, you’ll need to test during development and the Rich Results Test from Google is one recommended method.

After deployment, their Rich result status reports may help to monitor the health of your pages and mitigate any templating or serving issues.

Additional resources

You might also be interested in blog posts about SEO in Gatsby and an advanced tutorial about SEO and social sharing cards.