Breadcrumb

Breadcrumbs are structures that show the hierarchy of web pages and provide users with a more effective website navigation.

Breadcrumb length varies depending on page depth; in the example below, the breadcrumb structure of the “What is Canonical URL?” page under the SEO category under Home (Junior to Expert) consists of 3 breadcrumbs.

Breadcrumb Structured Example:

Note: The last element of the breadcrumb structure should not be linked.

Breadcrumb Structured Data

In order for Google and other search engines to understand the hierarchy on a web page, it is necessary to use breadcrumb structured data.

How to Create Breadcrumb Structured Data?

If the website infrastructure is connected to a CMS, the infrastructure can generate structured data itself, or it can be created with a plugin. If breadcrumb structured data is to be created manually, the following format can be used.

Structured data can be created in multiple different formats such as JSON-LD, RDFa, or Microdata.

<script type="application/ld+json">
{ 
 "@context": "https://schema.org", 
 "@type": "BreadcrumbList", 
 "itemListElement": [{ 
  "@type": "ListItem", 
  "position": 1, 
  "name": "Junior to Expert", 
  "item": "https://juniortoexpert.com/en/" 
 },{ 
  "@type": "ListItem", 
  "position": 2, 
  "name": "Web Design", 
  "item": "https://juniortoexpert.com/en/web-design/" 
 },{ 
  "@type": "ListItem", 
  "position": 3, 
  "name": "CSS", 
  "item": "https://juniortoexpert.com/en/web-design/css-en/" 
 },{ 
  "@type": "ListItem", 
  "position": 4, 
  "name": "CSS Margin Property" 
 }] 
}
</script>

<ol vocab="https://schema.org/" typeof="BreadcrumbList"> 
 <li property="itemListElement" typeof="ListItem"> 
  <a property="item" typeof="WebPage" href="https://juniortoexpert.com/en/"> 
   <span property="name">Junior to Expert</span>
  </a> 
  <meta property="position" content="1"> 
 </li> 
 › 
 <li property="itemListElement" typeof="ListItem"> 
  <a property="item" typeof="WebPage" href="https://juniortoexpert.com/en/web-design/"> 
   <span property="name">Web Design</span>
  </a> 
  <meta property="position" content="2"> 
 </li> 
 › 
 <li property="itemListElement" typeof="ListItem"> 
  <a property="item" typeof="WebPage" href="https://juniortoexpert.com/en/web-design/css-en/"> 
   <span property="name">CSS</span>
  </a> 
  <meta property="position" content="3"> 
 </li> 
 › 
 <li property="itemListElement" typeof="ListItem"> 
  <span property="name">CSS Margin Property</span> 
   <meta property="position" content="4"> 
 </li> 
</ol>

Note: Including a home page on Breadcrumb structured data is not mandatory; Google and schema.org do not include the home page in their own documentation. Including the home page or not makes no difference.

SERP View of Page with Breadcrumb Structured Data

SERP View of Page Without Breadcrumb Structured Data

Note: It may take a few days for Breadcrumb structured data to be reflected in Search Console, depending on the time it takes for pages to be recrawled and re-indexed.

Videos Published by Google About Breadcrumb

What are some best practices for indicating breadcrumbs?

Why aren’t breadcrumbs displaying in search results for my site?

Can I place multiple breadcrumbs on a page?