How to Add Breadcrumbs to Google Search in Gatsby

Breadcrumbs are an extremely important part of a good website. These navigational aids help Google work out how your site is structured.

Profile Pic of Snappy Web Design

Jun 8 · 3 min read

How to Add Breadcrumbs to Google Search in Gatsby

Breadcrumbs are a form of Structured data which tell search engines the exact content, structure, and organization of a webpage. Breadcrumbs in search results give users an easy-to-understand overview of where the page lives on your site.

When you use structured data on your site, Google uses it to show rich search results, which are always displayed at the top of results, putting your website in the best position for that click-through.

Using React Helmet

React Helmet is the best way to add structured data with Gatsby. Start by installing it via npm

npm install gatsby-plugin-react-helmet react-helmet

and add it to your plugin array inside of gatsby-config.js

plugins: ['gatsby-plugin-react-helmet']

We'll create a separate component called Breadcrumb.js where we initialize react-helmet. It should look like this:

Breadcrumb.js

import React from "react" import { Helmet } from "react-helmet" const Breadcrumb = () => { return ( <Helmet title="Structured Data Example"> <script type="application/ld+json"> {JSON.stringify({ "@context": "https://schema.org/", "@type": "BreadcrumbList", itemListElement: [ { "@type": "ListItem", position: 1, name: "Blog", item: "https://snappywebdesign.net/blog" }, { "@type": "ListItem", position: 2, name: `How to Add Breadcrumbs to Google Search in Gatsby`, item: `https://snappywebdesign.net/blog/how-to-add-breadcrumbs-to-google-search-in-gatsby` } ] })} </script> </Helmet> ) } export default Breadcrumb

Then we import the component from the page we want to add a breadcrumb to. In our case, we want to add breadcrumbs to our blog posts, so BlogPost.js looks like this:

BlogPost.js

import React from "react" import Breadcrumb from "../Breadcrumb" const BlogPost = () => ( <> <Breadcrumb /> <h1>This is my blog post</h1> <p>Welcome to my blog post with a breadcrumb</p> <p>To the top of the google search results we come!</p> </> ) export default BlogPost

That's it - You're done!

Before deploying your site, check the Rich Results Test provided by Google to ensure everything is working correctly and your data appears as expected.

The final product? A snazzy search result (that Google will give priority) that looks like this: breadcrumbsearchresult

If it builds with no errors, you're done! Adding breadcrumbs to your gatsby site with react-helmet really is that easy! You can check out the final code here

Make sure to press the follow button below to be notified when new posts go live! 🔔

Wondering how to add more structured data to your website? Check out our article How to Add Structured Data to Blog Posts in Gatsby

Hire me

Most popular posts

1.

How to Code a Dark Theme with Material UI

2.

Gatsby Code Splitting

3.

Michigan Website Design

For Developers

1.

How to make a Font Size Slider in React with Material UI

2.

How to Add Structured Data to Blog Posts in Gatsby

3.

How to Code a Social Share Button with Material UI

For Business Owners

1.

What the heck is Gatsby js and why use it

2.

10 Landing Page Designs to Inspire Your Small Business

3.

About Google Page Speed Scores and Why They Matter

More from Snappy Web Design

Subscribe to the Snappy Web Design Blog to get notified when a new post goes live. We'll never share your e-mail address or use it for any reason other than to share new posts.

Published September 1

Snappy Web Design is the one-stop-shop for web design.

Michigan's Newest Web Design Company

You search Google for “Michigan web design” and find my site. I’m Joe, and I’m the head developer at Snappy Web Design. I’m the new guy on the block, and an expert in providing full-service web design for small business owners in MI.

I’m different from typical web design agencies because I aim to be your partner for all things related to your onli...


Published August 6

You’ve heard of WordPress, Squarespace, and Wix...but what the heck is Gatsby.js?

You’re hiring a freelancer or agency to build your company's website and considering your options - WordPress, Squarespace, Wix - and then, someone mentions Gatsby.js. You learn that it’s used by many of the largest companies across the globe - but you’ve never heard of it, and don’t know what to think. This is the position that 95% of our new clients find themselves in and it’s understandable. Technology evolves fast and it can be hard to keep up. However, if you’re hiring an agency to build...


Copyright © 2021. Snappy Web Design. All rights reserved.