How To Implement Product Page Breadcrumbs On Shopify

How To Implement Product Page Breadcrumbs On Shopify

What are product page breadcrumbs?

 Breadcrumbs are a type of secondary navigation scheme that reveals the customers’ location on the website. They can improve how a user and Google navigate a website, especially if your website has many products or pages.

Are breadcrumbs still important? 

Many UX pros will tell you no-one uses breadcrumbs anymore. 

Well, they do. 

Especially on mobile devices.

(If you need data to support this, add a heatmap tool to your product pages and track the number of mobile clicks on the breadcrumbs.)

…And more importantly, Google does. 

Here’s why you should fight for breadcrumbs from an SEO (and UX perspective):

Why are breadcrumbs important for SEO?

• Google uses breadcrumbs to understand the hierarchy of your site. Particularly important for eCommerce brands, breadcrumbs help Google to understand your architecture. 
• From a non-SEO perspective. The rise in Google shopping means more traffic than ever going directly to your product pages on mobile. If the user for whatever reason does not like that specific product, the only way they can see the full range is to go into your mega navigation. If you have a large catalogue this may be off-putting for users. A product page breadcrumb back to your category page is just 1-click away. Worried about conversion rate? Put it below the fold
• Finally, product page breadcrumbs are so good for internal linking. Adding these to the site can dramatically change your internal linking profile.

As mentioned above, in our opinions adding breadcrumbs to product pages can actually enhance the user experience for users on mobile devices. Just install a heatmap and test it on your eCommerce store. 

In our opinion, they certainly don’t have a negative impact. They do have a positive impact on SEO.

See point “D” below:

This was MADE.com’s YoY SEO growth (note: actual figures are fake & made up for confidentiality purposes).

You’ll see that SEO growth was declining, until breadcrumbs were implemented – which is how Google managed to understand the hierarchy of the site – not to mention a tonne of additional links to valuable eCommerce commercial landing pages.

If you’re thinking ‘Well what’s ‘E’?’ – we just removed internal linking to a dead Italian website – not exactly an SEO growth tactic. 

All of this is great, however so many brands are now setting up on Shopify. One of the main drawbacks of Shopify from an SEO perspective is the inability to define and manage the hierarchy of collections. I.e. you can’t specify a sub-collection or a sub-sub collection in the back end. 

Therefore this makes internal linking optimisation difficult for SEOs. 

That said, we’re Shopify specialists and here’s how we implement product page breadcrumbs for our Shopify clients.

How to implement breadcrumbs in Shopify

Before you implement the following sets, you will need to edit the code in your breadcrumb.liquid so that the breadcrumbs are able to be pulled to the front end. This should be done by a developer.  

1. Firstly you will  need  to download a metafields app, if you do not already have one  installed. In the back end of your Shopify admin select the product you want to add breadcrumbs to, then under more actions select Metafields. 

1. Select add new product Metafield. Each breadcrumb that you add the namespace will have to be a ‘meta_tag,’ and value type needs to be set to ‘string’. Under key add tag1_ . The tag number will differ depending on what order you want the breadcrumbs to appear.
2. Lastly, for value write the name of the breadcrumb you want to appear, followed by a comma and space then the page you want that breadcrumb to link to. 

Repeat the process for each breadcrumb you wish to add the product page. The only thing that will change for each breadcrumb is the tag number under the key and what you want the value to be.

Once you have done all the breadcrumbs press save and refresh and the breadcrumbs will appear as below.

If you have a large number of products to add breadcrumbs to, it is recommended to upgrade the Metafield app.  This will allow you to export large amounts of data and edit then import it back to Shopify.

 Adding breadcrumbs is easy and quick to help with internal linking within your site and increase your ranking while giving users a better experience of your site.

If you would like to know more about increasing your website rank why not read How To Secure Your Content In The Google Answer article for more help 

If you do have an issue or are unsure about something and want a second opinion then fill out our form and get in touch today.