Breadcrumb & Product Schema

Use Breadcrumb and Product schema for navigation and e-commerce results.

BreadcrumbList and Product schema are staples for e-commerce and large sites.

Breadcrumb schema

Shows the page's position in your site hierarchy as a breadcrumb trail in the SERP, replacing the raw URL and improving context.

Product schema

Describes a product's price, availability and rating. It can unlock rich results with stars and prices, and feeds Google's shopping experiences.

Example

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Hario V60 Ceramic Dripper",
  "image": "https://example.com/img/v60.jpg",
  "offers": {
    "@type": "Offer",
    "price": "24.00",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "312"
  }
}

When to use it

An e-commerce site adds BreadcrumbList schema so the category path 'Home > Shoes > Trail Runners' appears below the title in organic SERP listings.
A retailer implements Product schema with Offer and AggregateRating so product pages show price, availability, and star ratings in Google Shopping and organic results.
A marketplace uses ItemList schema on category pages to hint at the list of products, increasing eligibility for rich category snippet results.

More examples

BreadcrumbList schema

BreadcrumbList schema causes the URL in the SERP to display as a readable category path rather than a raw URL, improving click-through rates.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Home",        "item": "https://example.com/"},
    {"@type": "ListItem", "position": 2, "name": "Shoes",       "item": "https://example.com/shoes/"},
    {"@type": "ListItem", "position": 3, "name": "Trail Runners","item": "https://example.com/shoes/trail-runners/"}
  ]
}

Product schema with price and availability

Product schema with Offer and AggregateRating enables price, stock status, and star rating rich results in both organic listings and Google Shopping.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Trail Runner Pro",
  "image": "https://example.com/images/trail-runner-pro.jpg",
  "description": "Lightweight off-road running shoe for technical trails.",
  "sku": "TRP-001",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "312"
  },
  "offers": {
    "@type": "Offer",
    "price": "129.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  }
}

Breadcrumb HTML and schema together

Keeping the visible breadcrumb and the JSON-LD in sync ensures Google validates schema against on-page content and avoids rich result penalties.

<!-- Visible breadcrumb nav matches schema data -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/shoes/">Shoes</a></li>
    <li aria-current="page">Trail Runner Pro</li>
  </ol>
</nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Home","item":"https://example.com/"},
    {"@type":"ListItem","position":2,"name":"Shoes","item":"https://example.com/shoes/"},
    {"@type":"ListItem","position":3,"name":"Trail Runner Pro","item":"https://example.com/shoes/trail-runner-pro/"}
  ]
}
</script>

Discussion

Be the first to comment on this lesson.