SEO with Gatsby

Gatsby helps your site place better in search engines. Some advantages come out of the box and some require configuration.

Server rendering

Because Gatsby pages are server-rendered, all the page content is available to Google and other search engines or crawlers.

You can see this by viewing the source for this page with curl (in your terminal):

Right-Click => View source won’t show you the actual HTML (but the pages are still server-rendered!) as this site is using service workers. Read these notes to learn more.

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.

Starting in January 2018, Google rewards faster sites with a bump in search rankings.

Page metadata

Adding metadata to pages, such as page title and description, 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 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 Structured Data Testing Tool 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.