How to Modify Breadcrumb for Effective SEO in shopify

By Bhavesha |  July 17, 2023 | 5 min reads

The breadcrumbs on your website are helpful to users and can also help search engines to understand your site structure.

How we can have SEO-friendly breadcrumbs.

Step 1. Create Metafield  “breadcrumbs” (add your metafield name) for the product

Navigate online store > settings > custom data> Add definition> products > as shown below

breadcrumbosc

Step2:  Assign a Collection to Metafield Value

Go to the Product > collections > Create a new collection > select one product > add a new collection to product>  add collection name to metafield in product >as shown below

collection-metafield

Step 3: Create Snippet ‘breadcrumbs.liquid’.

We assign the breadcrumbCollectionHandle variable to the handleized version of the collection handle stored in the product.metafields.custom.breadcrumbosc. Then, we use collections[breadcrumbCollectionHandle] to retrieve the collection object associated with that handle. If the collection exists, we generate the appropriate URL and display the collection title as the breadcrumb link.

Use this metafield for breadcrumb modification in the product.liquid/main-product.liquid.

Check that the “ breadcrumbosc ” metafield is correctly populated with the collection handle in the product.metafields.custom.breadcrumbosc.

breadcrumbs-liquid

Note:

Use handleize to convert a string that is actually a handle to a site URL 

Handleize is a Liquid filter used in Shopify’s Liquid template language. It converts a string into a URL-friendly version called a “handle.” The “handleized” string version typically removes any special characters, converts spaces to hyphens, and converts all characters to lowercase.

On the product page with the following use pattern such as: 

oscp-demo.myshopify.com/products/black-leather-bag

The breadcrumb will not have a collection link. While 

oscp-demo.myshopify.com/collection/collectionname/products/black-leather-bag

We will have a collection in URL.

But a product has a name collection redirect in different breadcrumbs on the final product URL.

For consistency of the collection link, we have provided our solution-

product-page

Note:

On the product page, we have the canonical URL:

oscp-demo.myshopify.com/products/black-leather-bag

So on this page, an internal link to the collection page on breadcrumbs. So this solution will be helpful. 

On the front end, check that the Breadcrumbs display on the product page, and that the collection page redirects correctly when clicked.

Read this Blog and Find:- Improve SEO in Shopify

Leave A Comment