Richie.js 2.0.2 released 🚀 Explore
DocumentationSupported Rich ResultsBreadcrumb

Breadcrumb (BreadcrumbList)

What is breadcrumb?

A breadcrumb trail shows a page’s position within the site hierarchy, aiding users in navigation and site exploration. Starting from the last breadcrumb, users can move up one level at a time through the site hierarchy.

Kindly Refer Google Doc to know more about breadcrumb rich result.

What are necessary data for breadcrumb rich result?

Breadcrumb is generated by following the file system structure (tree) and determining the existence of an index file. Each directory containing an index file is treated as a level in the breadcrumb hierarchy.

Key Configuration

  • domainAddress: A required parameter configured in richiejs.config.js. This value will be used as the base URL for constructing breadcrumb rich snippets.

    {
  "domainAddress": "https://example.com"
}

Function and parameters

đź’ˇ
By default input file is overwriiten with result so destination is optional
This is only for API method. We prefer CLI method for keeping it simpler (refer - Working with API & CLI).
func_params.js
const richResultType = 'breadcrumb';
const filePath = 'pages/breadcrumb/sub-breadcrumb/notindex.html';
const destination = 'dist/breadcrumb.html'; /* optional */
 
richie([richResultType], filePath, destination);

Illustration of file system structure (tree)

    • index.html
      • index.html
        • index.html
        • notindex.html

Output of a Instance

breadcrumb.html
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Mimicking Root for breadcrumb - Level 1 ",
        "item": "https://www.cresteem.com/pages"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Breadcrumb page - Level 2",
        "item": "https://www.cresteem.com/pages/breadcrumb"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Sub breadcrumb Page | Level n",
        "item": "https://www.cresteem.com/pages/breadcrumb/sub-breadcrumb"
      },
      {
        "@type": "ListItem",
        "position": 4,
        "name": "Not index Page | Level- possible last",
        "item": "https://www.cresteem.com/pages/breadcrumb/sub-breadcrumb/notindex."
      }
    ]
  }
</script>


Let’s see what’s next!

ArticleMovie & Carousel