Pages

Thursday 9 July 2015

Breadcrumbs

Breadcrumb trails on a page indicate the page's position in the site hierarchy. A user can navigate all the way up in the site hierarchy, one level at a time, by starting from the last breadcrumb in the breadcrumb trail.
In the example below, the page thestand.html about a specific book may contain the following breadcrumb trail:
Home › Books › Authors › Stephen King › The Stand
The last item in the breadcrumb trail - "The Stand" - leads to the page itself. The breadcrumb before that - "Stephen King" - leads to its parent page. The "Authors" breadcrumb leads two levels up the site hierarchy.
The breadcrumb trail may include or omit a breadcrumb for the page on which it appears. The following would also be a valid breadcrumb trail for thestand.html:
Home › Books › Authors › Stephen King
Pages may contain more than one breadcrumb trail if there is more than one way of representing a page's location in the site hierarchy. The page thestand.html may, for instance, additionally contain the following breadcrumb:
Books › Fiction › Horror › The Stand
When you mark up breadcrumb information in the body of a web page, Google can use it to understand and present the information on your pages in our search results, like this:
image of a Google search result showing breadcrumbs

Properties

Breadcrumbs can contain a number of different properties which you can label using Microdata, RDFa markup, or JSON-LD. Google recognizes the following properties of a BreadcrumbList.
PropertyDescription
itemAn individual breadcrumb in the breadcrumbs trail. It contains the URL and the title of the breadcrumb.
nameThe title of the breadcrumb.
positionThe position of the breadcrumb in the breadcrumbs trail. Position 1 signifies the beginning of the trail.

Examples

A breadcrumb trail may appear on a page like the following example:
Arts › Books › Poetry
The HTML code for the breadcrumb trail above may be:
<ol>
  <li>
    <a href="http://www.example.com/arts">Arts</a> ›
  </li>
  <li>
    <a href="http://www.example.com/arts/books">Books</a> ›
  </li>
  <li>
    <a href="http://www.example.com/arts/books/poetry">Poetry</a>
  </li>
<ol>
The following basic examples specify a breadcrumb trail using microdata, RDFa, and JSON-LD. In case of JSON-LD, the script block may be inserted anywhere on the page - either in the head or the body.
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "https://example.com/arts",
        "name": "Arts"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "https://example.com/arts/books",
        "name": "Books"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item":
      {
        "@id": "https://example.com/arts/books/poetry",
        "name": "Poetry"
      }
    }
  ]
}
</script>

No comments:

Post a Comment