Breadcrumbs with Structured Data for Blogger

日本語»

A lot of blogs refer to

Breadcrumb for Blogger - Blogger Widgets

And the original idea is based on

Hoctro’s Archived Blog - Trang Lưu Trữ Học Trò: Archived Post: Adding a Breadcrumb Trail to your Blogger Post

Thank you, Hoktro-san, Aneesh-san. It’s still useful but has the following issues at present.

• The structured data type definition is based on the obsolete Data-Vocabulary.org, not schema.org.
• Not using ordered list (<ol> <li>), commonly used for breadcrumbs.

I try to modify these issues.

FYI

Breadcrumb | Search | Google Developers

developers.google.com

1. Add <b:includable>

The modified code snippet of <b:includable> is as follows.
It uses RDFa as a structured data format.

<b:includable id='breadcrumb' var='posts'>
<!-- breadcrumb start -->
<ol id='breadcrumb' typeof='BreadcrumbList' vocab='http://schema.org/'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <li property='itemListElement' typeof='ListItem'>
    <a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'>
    <span property='name'>Home</span></a>
    <meta content='1' property='position'/>
  </li>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <li><data:blog.pageName/></li>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- breadcrumb for the post page -->
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
          <b:loop index='index' values='data:post.labels' var='label'>
          <!-- b:if cond='data:label.isLast == &quot;true&quot;' -->
            <li property='itemListElement' typeof='ListItem'>
              <a expr:href='data:label.url' property='item' typeof='WebPage'>
              <span property='name'><data:label.name/></span></a>
              <meta expr:content='data:index + 2' property='position'/>
            </li>
          <!-- /b:if -->
          </b:loop>
          <li><data:post.title/></li>
        <b:else/>
          <li>Unlabelled</li>
        </b:if>
      </b:loop>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <!-- breadcrumb for the label archive page and search pages.. -->
        <li>Archives for <data:blog.pageName/></li>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            <li>All posts</li>
          <b:else/>
            <li>Posts filed under <data:blog.pageName/></li>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:if>
</ol>
<!-- breadcrumb end -->
</b:includable>

Insert this snippet before <b:includable id='main' var='top'> in Edit HTML.

* I recommend the backup before editing.

Note:

After saving it, the formatter of Edit HTML moves the snippet, as snippets are in an alphabetical order of id, and indent the first line of the snippet.

• If you comment out <b:if cond='data:blog.homepageUrl != data:blog.url'> and end-tag </b:div>, you can display the breadcrumb trail at all times including top page.
• If you comment in <!-- b:if cond='data:label.isLast == &quot;true&quot;' --> and <!-- /b:if -->, the breadcrumbs include only the last label (in alphabetical order).
  (When you use more than one label, labels are sorted forcibly in alphabetical order.)

Usage of Search Function in Edit HTML

In Edit HTML, press Ctrl + F keys, then search box is displayed in upper right corner.
Input the search string and press Enter key. Each time press Enter key, the cursor jumps to the next match.

2. Add <b:include>

Next, insert the following widget tag for display before the part of <b:include data='top' name='status-message'/>.

<b:include data='posts' name='breadcrumb'/> 

• If you put it just before </div> corresponding to <div class='blog-posts hfeed'>, the breadcrumb list is placed at the bottom of the page.
• If you put it before <b:if cond='!data:mobile'>, the breadcrumb list can be shown in mobile pages as well.

3. Add CSS

Finally, add CSS as follows. Please modify as needed.

/* breadcrumb */
ol#breadcrumb{
    font-size:13px;
    padding: 8px;
}
#breadcrumb li {
    display: inline;
    list-style-type: none;
}
#breadcrumb li:after {
    content: " > ";
}
#breadcrumb li:last-child:after {
    content: none;
}

It’s all done.

Structured Data Testing Tool

You can check whether the breadcrumb list is working properly with Google Structured Data Testing Tool.

Structured Data Testing Tool

search.google.com

You must input URLs showing breadcrumbs.

You may find some errors in BlogPosting (not breadCrumbList).
You don’t have to care about it unless you want to reflect these error items correctly to search results. See Structured Data testing Tool errors on Blogpost Blogger - Google Product Forum.

If you want to fix them, this site may help you.

doityaar: Fix Schema Errors in Blogger

www.doityaar.com

Remaining issue

Breadcrumbs are listed in alphabetical order, not showing the actual hierarchy.
To be continued in Blogger: Sort Breadcrumbs by Label Frequency.