Google検索結果画面でパンくずリストのマークアップを追加する方法！構造化データをマークアップしよう！

Google検索結果画面でパンくずリストのマークアップを追加する方法

Google検索結果画面でパンくずリストのマークアップすることで、検索したユーザーにパンくずが表示されページの内容が把握しやすくなります。
構造化データをマークアップすることこで可能になります。

パンくずリスト全体（ul）

itemscope itemtype=”https://schema.org/BreadcrumbList”

各パンくず（li）

itemprop=”itemListElement”
itemscope
itemtype=”https://schema.org/ListItem”

リンク（a）

itemprop=”item”

パンくず名（span）

itemprop=”name”

順番（meta）

itemprop=”position”

※（）内はタグの例

<div itemscope itemtype="https://schema.org/BreadcrumbList">
 <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  <a href="https://www.ad-bind.com/" itemprop="item">
  <span itemprop="name">ホーム</span>
  </a>
  <meta itemprop="position" content="1″>
 </span>

 <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  <a href="https://www.ad-bind.com/category/webad" itemprop="item">
  <span itemprop="name">Web広告・リスティング広告</span>
  </a>
  <meta itemprop="position" content="2″>
 </span>

 <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
  <span itemprop="name">タイトル</span>
  <meta itemprop="position" content="3″>
 </span>
</div>

data-vocabulary.orgからschema.orgへの移行

2020年4月6日以降、Google は data-vocabulary.org スキーマで記述された構造化データをサポートしないと発表しています。

https://developers.google.com/search/blog/2020/01/data-vocabulary