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 (opens in a new tab) to know more about breadcrumb rich result.

What are necessary data for breadcrumb rich result?

Breadcrumb is generated by following file system structure(tree) and index file existance. And there is a parameter named domainAddress that is configured inside rjs.config.json and it would used inside breadcrumb rich snippets.

If index file is existing in a directory then that is considered as a level, In this way it construct levels one by one.

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!

Article Movie & Carousel