検索結果にパンくずを追加したい

検索結果にパンくずを追加したいと思ったときのメモです。

おおよそ下記のような形でいけました。

 具体的には文書内にschema.orgのbreadcrumbを追加します。

 ■HTML

<nav id="breadscumb" class="breadscumb">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemscope="" itemtype="http://schema.org/Thing" itemprop="item" href="../../"><span itemprop="name">ホーム</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemscope="" itemtype="http://schema.org/Thing" itemprop="item" href="../"><span itemprop="name">第2階層</span></a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemscope="" itemtype="http://schema.org/Thing" itemprop="item" href="./"><span itemprop="name">第3階層</span></a>
<meta itemprop="position" content="3">
</li>
</ol>
</nav>

■cssはおおよそこのようなかんじで

.breadscumb ol {
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
}
.breadscumb li {
display: inline-block;
}
.breadscumb li:after {
content:' > ';
}
.breadscumb li:nth-last-child(1):after {
content: "";
}

書式が正しいかの確認は下記にて。

構造化データ テストツール

早めに反映してほしいときは「Search Console」から「Fetch as Google」する。

＃本当は左端のWebSite部分もschemaで変更したかったのですが、

　参考サイトを見つつ書いても反映されませんでした。（2017年9月）