Why the Breadcrumb List Schema Markup is Important and How to Implement It - Schema.dev ![Revisit consent button](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) We value your privacy We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies. Customize Reject All Accept All Customize Consent Preferences ![Close](https://schema.dev/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg) We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below. The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... Show more NecessaryAlways Active Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data. No cookies to display. Functional Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features. No cookies to display. Analytics Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc. No cookies to display. Performance Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors. No cookies to display. Advertisement Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns. No cookies to display. Reject All Save My Preferences Accept All Powered by [![Cookieyes logo](https://schema.dev/wp-content/plugins/cookie-law-info/lite/frontend/images/poweredbtcky.svg)](https://www.cookieyes.com/product/cookie-consent) ☰ [![Schema Markup Generator, Tester, Deployer](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)![Schema Markup Generator, Tester, Deployer](https://schema.dev/wp-content/uploads/2020/04/schema-logo-dark-bgnd-red.png)](https://schema.dev) - [Home](https://schema.dev) - [Schema Builder](https://schema.dev/schema-builder/) - [Schema Tester](https://schema.dev/schema-tester/) - [Schema Deployer](https://schema.dev/schema-deployer/) - [Blog](https://schema.dev/blog/) - [Roadmap](https://schema.dev/schema-roadmap/) # Why the Breadcrumb List Schema Markup is Important and How to Implement It November 23, 2020 in [Articles](https://schema.dev/blog/category/articles/) ![Why the Breadcrumb List Schema Markup is Important and How to Implement It](https://schema.dev/wp-content/uploads/2020/11/breadcrumb-structured-data.jpg) You are probably already familiar with breadcrumbs on a website.  We’re of course not talking about breadcrumbs that we use for breading foods, topping casseroles, stuffing poultry, or thickening stews! The breadcrumbs on a website are a small text path that’s often found on top of the page. They  indicate to the user where they are on the page. Here’s an example of breadcrumbs in action: ![](https://schema.dev/wp-content/uploads/2020/11/image-10.png) In this example from seoclarity.net, we’ve landed on the Research Grid page. But we can still see the path we took to get there: Home > Platform > Keyword Research > Research Grid. The breadcrumbs show where we are, and where we’ve been. Every step of the path is clickable and links back to the respective previous pages — all the way back to the home page.  Breadcrumbs are particularly useful for ecommerce sites, as users can see the path they took to find a particular product, and easily backstep to where they want to go. ## **Different Type of Breadcrumbs** There are a few different types of breadcrumbs that each have their own presentation and use. Below are the two most common types of breadcrumbs. ### **Hierarchy-based breadcrumbs** This is the most common breadcrumb type you will find. As we saw with the example above, it tells you where you are in the site structure, and how many clicks it will take to get back to the home page or parent category.  Here’s another example of hierarchy-based breadcrumbs that lead from Home > State > Illinois > Chicago > View Details.  ![](https://schema.dev/wp-content/uploads/2020/11/image-12.png) ### Attribute-based Breadcrumbs Attribute-based breadcrumbs are most used when a site has faceted navigation with an option to select multiple filters, as we see here: ![](https://schema.dev/wp-content/uploads/2020/11/image-13.png) In this case, the breadcrumbs are the filter boxes that have been selected: 30 and slim. ## What is Breadcrumb List Schema? Google has introduced breadcrumb structured data which uses the markup in the body of a web page to showcase the breadcrumbs within search results.  For example, the structured data markup page on this site has the following appearance in the SERPs: ![](https://schema.dev/wp-content/uploads/2020/11/image-15.png) Without this markup, Google would display the search result as just the main URL of the page. Over the years, however, Google search results have changed significantly, and the search engine now has the ability to show the search results as breadcrumbs by breaking up the URL. As the example shows, the breadcrumb of “Personalized Gifts” shows directly on the SERPs, which takes the users to that specific page in the site hierarchy.  The question now is: **Should I still implement the breadcrumb schema now that breadcrumbs are already shown instead of URLs in the search results?** You should still implement the breadcrumb list schema to show the correct breadcrumb in the search results. It is currently breaking the URL and displaying as a breadcrumb instead. If your URL structure is not SEO friendly, it will pick up those words and display them in the SERP instead of the actual breadcrumb that you have on the page. ![](https://schema.dev/wp-content/uploads/2020/11/image-16.png) ## Are There Any Benefits of Breadcrumb Schema? One of the biggest benefits of having the breadcrumb schema is that it improves the click-through rate from search. Since Google uses the schema in actual search results, as we saw above, it makes your result much more enticing to users. It also helps Google understand how your website is structured. Besides CTR, breadcrumbs help to enhance the user experience. When users visit your site, it helps them visit the other pages on the site without clicking the back button (and it shows them where they’re navigating to). Hence, it also lowers the bounce rate. Don’t you think it’s better to send a visitor to your homepage than back to Google? ## How to Implement Breadcrumb Schema Google has provided [guidelines for using JSON-LD, microdata, RDFA, or HTML](https://developers.google.com/search/docs/data-types/breadcrumb) markup to enable easier indexing of a website’s breadcrumbs by its crawlers. It’s recommended that all breadcrumbs include microdata markup to enable enhanced SERP snippets with breadcrumb links. To specify breadcrumbs, you must define the breadcrumbList that contains at least two ListItems. - **BreadcrumbList:** the container item that holds all the elements in the list. - **ListItem:** includes details about an individual item in the list. You must include the required properties for your content to be eligible for display with breadcrumbs. - **itemListElement:** an array of breadcrumbs listed in a specific order. Specify each breadcrumb with a ListItem. Here’s an example for single breadcrumb tail: { "@context": "https://schema.org", "@type": "BreadcrumbList",   "itemListElement": \[{     "@type": "ListItem",     "position": 1,     "name": "Books",     "item": "https://example.com/books"   },{     "@type": "ListItem",     "position": 2,     "name": "Authors",     "item": "https://example.com/books/authors"   },{     "@type": "ListItem",     "position": 3,     "name": "Ann Leckie",     "item": "https://example.com/books/authors/annleckie"   }\] } - **Item:** the URL to the webpage that represents the breadcrumb. There are two ways to specify the item: 1. URL: specify the URL of the page, as shown here: “item”: “[https:/](https://example.com/books)/[example.com/books](https://example.com/books)“ 2. Thing: use an id to specify the URL based on the markup format you’re using: - JSON-LD: use @id to specify the URL. - Microdata: you can use href or itemid to specify the URL. - RDFa: you can use about, href, or resource to specify the URL. - **Name:** the title of the breadcrumb displayed for the user. If you use a thing with a name instead of a URL to specify an item, then name is not required. - **Position:** the position of the breadcrumb in the breadcrumb trail. Position 1 signifies the beginning of the trail. Breadcrumb trails tell users about a page position within a site’s hierarchy. Marking up your pages with breadcrumb structured data helps search engines display this information to users.  ### Leave a Reply [Cancel reply](/blog/why-the-breadcrumb-list-schema-markup-is-important-and-how-to-implement-it/#respond) You must be [logged in](https://schema.dev/sd-sadmin/?redirect_to=https%3A%2F%2Fschema.dev%2Fblog%2Fwhy-the-breadcrumb-list-schema-markup-is-important-and-how-to-implement-it%2F) to post a comment. ![Schema.dev Logo](https://schema.dev/wp-content/uploads/2020/04/schema-dev-logo-light-red-400x100-1.png) Free tools for structured data schema markup generation, testing and deployment. ###### Company [About Us](/about-us/)[Our Journey](/our-journey/)[Privacy Policy](https://schema.dev/privacy-policy/) ###### Product [Structured Data Generator](https://schema.dev/schema-builder/)[Structured Data Tester](https://schema.dev/schema-tester/)[Structured Data Deployer](https://schema.dev/schema-deployer/) ###### Support [Help Center](https://support.schema.dev)[](#) [Install FREE](https://chrome.google.com/webstore/detail/schema-builder/klohjdodjjeocpbpadmkcndjoadijgjg) [](#facebook)[](#twitter)