[Blogger][Vaster2] コピペでOK パンくずリスト サーチコンソールの警告を修正しました。

サーチコンソールのパンくずリストに data-vocabulary.org schema deprecated の警告がでていたので修正しました。data-vocabulary.orgのサポートが終わるようですね。（英語）

修正できたかどうかは構造化データ テストツールで確認しました。

テンプレートはVaster2です。後述するサイトを参考に素人が書いたものです。正確性などは担保しておりませんので留意してください。

HTMLを編集します。必ずバックアップを取ってから作業してください。

元のコードと修正したコード

元のコードで該当しそうな部分はここ。（<!--パンくずリスト編集-->から<!--パンくずリスト編集ここまで-->までの部分です）

<!--パンくずリスト編集-->
<div class='breadcrumb-wrapper'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--記事ページのパンくず-->
<ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<li>
<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
<span itemprop='title'>
Home
</span>
</a>
</li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li>
<a expr:href='data:label.url' itemprop='url' rel='tag'>
<span itemprop='title'>
<data:label.name/>
</span>
</a>
</li>
</b:if>
</b:loop>
<b:else/>
</b:if>
</b:loop>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!--カテゴリ アーカイブのパンくず-->
<ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<li>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<span itemprop='title'>
Home
</span>
</a>
</li>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<ul class='breadcrumb'>
<li>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<span itemprop='title'>
Home
</span>
</a>
</li>
</ul>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
<!--パンくずリスト編集ここまで-->

これを下記の修正したコードに置き換えました。

修正したコード：コピペでOK

<!--パンくずリスト編集-->
<div class='breadcrumb-wrapper'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--記事ページのパンくず-->
<ul class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item'>
<span itemprop='name'>
Home
</span>
</a>
<meta itemprop='position' content='1'/>
</li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url' itemprop='item'>
<span itemprop='name'>
<data:label.name/>
</span>
</a>
<meta itemprop='position' content='2'/>
</li>
</b:if>
</b:loop>
<b:else/>
</b:if>
</b:loop>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!--カテゴリ アーカイブのパンくず-->
<ul class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item'>
<span itemprop='name'>
Home
</span>
</a>
<meta itemprop='position' content='1'/>
</li>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<ul class='breadcrumb'>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item'>
<span itemprop='name'>
Home
</span>
</a>
<meta itemprop='position' content='1'/>
</li>
</ul>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
<!--パンくずリスト編集ここまで-->

こちらのサンプルコードを参考にしました。

サンプルコード(Macrodata)

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
   itemtype="http://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/dresses">
 <span itemprop="name">Dresses</span></a>
 <meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
   itemtype="http://schema.org/ListItem">
 <a itemprop="item" href="https://example.com/dresses/real">
 <span itemprop="name">Real Dresses</span></a>
 <meta itemprop="position" content="2" />
</li>
</ol>

実際にやったこと

その１

これを

<ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>

これに置き換え

<ul class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>

その２

<li>タグにitemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'を付与。4か所。

<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

その３

<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>

を

<a expr:href='data:blog.homepageUrl' itemprop='item'>

に、

<a expr:href='data:label.url' itemprop='url' rel='tag'>

を

<a expr:href='data:label.url' itemprop='item'>

に、それぞれ変更。

その４

<meta>タグを追加。2種類、計4か所

<meta itemprop='position' content='1'/>

<meta itemprop='position' content='2'/>

その５

<span itemprop='title'>

を

<span itemprop='name'>

に変更。

以上で警告が消えました。