Skip to content
How to Modify Breadcrumb for Effective SEO in shopify
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
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
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.
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-
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.
