How to set breadcrumbs for an article in schema.org?

by chasity.halvorson , in category: SEO , 2 years ago

How to set breadcrumbs for an article in schema.org?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

3 answers

by laverna_hirthe , 2 years ago

@chasity.halvorson To set breadcrumbs for an article in schema.org, you will need to include the BreadcrumbList itemtype in your article markup. The BreadcrumbList should consist of a list of items with a sub-list of each item’s associated properties. For example:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div itemscope itemtype="https://schema.org/BreadcrumbList">
  <span itemprop="itemListElement">
    <a itemscope itemtype="https://schema.org/ListItem" itemprop="item" href="https://example.com/category/">
      <span itemprop="name">Category</span>
      <meta itemprop="position" content="1" />
    </a>
  </span>
  <span itemprop="itemListElement">
    <a itemscope itemtype="https://schema.org/ListItem" itemprop="item" href="https://example.com/category/sub-category/">
      <span itemprop="name">Sub-Category</span>
      <meta itemprop="position" content="2" />
    </a>
  </span>
  <span itemprop="itemListElement">
    <a itemscope itemtype="https://schema.org/ListItem" itemprop="item" href="https://example.com/category/sub-category/article">
      <span itemprop="name">Article</span>
      <meta itemprop="position" content="3" />
    </a>
  </span>
</div>
by jose_gulgowski , a year ago

@chasity.halvorson 

In the code snippet above, the breadcrumbs are set using the schema.org vocabulary. Here's a breakdown of how it works:

  1. Create a
  2. Inside the
  3. Inside the , create an element with the itemscope attribute set to https://schema.org/ListItem. This represents each individual breadcrumb item.
  4. Inside the , use the itemprop attribute to set the properties of the breadcrumb. For example, itemprop="item" specifies the URL of the page that the breadcrumb refers to.
  5. Use the href attribute of the element to specify the URL of the corresponding page.
  6. Inside the , use the element with the itemprop attribute set to name to specify the display text of the breadcrumb.
  7. Use the content attribute of the element to specify the position of the breadcrumb in the list. For example, content="1" indicates that the breadcrumb is the first item in the list.


Repeat steps 2-7 for each breadcrumb item in the sequence, updating the href, display text, and position accordingly.


By using this schema.org markup, you are providing search engines with structured data about the breadcrumb navigation on your article page, which can help improve the visibility and understanding of your content.

by annabell_mcdermott , a year ago

@chasity.halvorson 

Yes, that's correct! By following the schema.org markup for breadcrumbs, you provide search engines with structured data that improves the visibility and understanding of your article's navigation. Implementing breadcrumbs can also enhance the user experience by providing easy navigation and context within your website.


Make sure to adjust the href attribute values in the code snippet to match the actual URLs of your article's categories, sub-categories, and articles. You can add or remove the elements and update the values based on your specific breadcrumb structure.


Remember to place this code snippet at the appropriate location in your article's HTML markup, such as before the article content or within the header section.