パンくずリスト(Breadcrumbs)の構造化データをマークアップする方法

パンくずリスト(Breadcrumbs)

Photo by Olenka Kotyk via Unsplash

パンくずリスト(Breadcrumbs)の構造化データをマークアップする方法を紹介します。

Googleは検索結果にパンくずリスト(Breadcrumbs)を表示することがあります。

パンくずリスト(Breadcrumbs)の構造化データ

パンくずリストは構造化データを設定していなくても、Googleがページを解析して表示することがありますが、パンくずリストの構造化データをマークアップすると、Googleにより正確に情報を伝えることができます。

構造化データはJSON-LD、もしくはMicrodata、RDFa形式でマークアップします。

JSON-LDでマークアップする

パンくずリストをJSON-LDでマークアップする方法です。JSON-LDはページのどこに記載しても問題ありませんが、通常は<head>タグの中に記載します。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/recipes",
      "name": "レシピ",
      "image": "http://example.com/images/icon-recipe.png"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/recipes/japanese",
      "name": "和食",
      "image": "http://example.com/images/icon-japanese.png"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://example.com/recipes/japanese/stew",
      "name": "煮物",
      "image": "http://example.com/images/japanese-stew.png"
    }
  }]
}
</script>

Microdataでマークアップする

パンくずリストををMicrodataでマークアップする方法です。MicrodataはHTMLタグ内に直接マークアップします。

<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="https://example.com/recipes">
        <span itemprop="name">レシピ</span>
        <img itemprop="image" src="http://example.com/images/icon-recipe.png" alt="レシピ"/></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="https://example.com/recipes/japanese">
      <span itemprop="name">和食</span>
      <img itemprop="image" src="http://example.com/images/icon-japanese.png" alt="和食"/></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="https://example.com/recipes/japanese/stew">
      <span itemprop="name">煮物</span>
      <img itemprop="image" src="http://example.com/images/japanese-stew.png" alt="煮物"/></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

RDFaでマークアップする

RDFaもMicrodataと同じようにHTMLタグ内に直接マークアップします。

<ol vocab="http://schema.org/" typeof="BreadcrumbList">
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage"
        href="https://example.com/recipes">
      <span property="name">レシピ</span>
      <img property="image" src="http://example.com/images/icon-recipe.png" alt="レシピ"/></a>
    <meta property="position" content="1">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage"
        href="https://example.com/recipes/japanese">
      <span property="name">和食</span>
      <img property="image" src="http://example.com/images/icon-japanese.png" alt="和食"/></a>
    <meta property="position" content="2">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage"
        href="https://example.com/recipes/japanese/stew">
      <span property="name">煮物</span>
      <img property="image" src="http://example.com/images/japanese-stew.png" alt="煮物"/></a>
    <meta property="position" content="3">
  </li>
</ol>

属性の解説

パンくずリスト(Breadcrumbs)の構造化データの属性は次のようになります。

属性 必須 説明
position 必須 パンくずの位置
item 必須 パンくず
JSON-LD形式は@idでURLを指定
item.name 必須 パンくずのタイトル
item.image 任意 パンくずを表す画像

複数のパンくずリストをマークアップする

サイトの構成によっては、1つのページが複数のカテゴリに属する場合があります。

例えば、肉じゃがの作り方のページが、「煮物」と「じゃがいも」の2つのカテゴリに属する場合です。

レシピ > 和食 > 煮物
食材 > じゃがいも

複数パンくずリストをMicrodataでマークアップすると、次のようになります。パンくずリストの構造化データを複数セット用意すればOKです。

<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="https://example.com/recipes">
        <span itemprop="name">レシピ</span>
        <img itemprop="image" src="http://example.com/images/icon-recipe.png" alt="レシピ"/></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="https://example.com/recipes/japanese">
      <span itemprop="name">和食</span>
      <img itemprop="image" src="http://example.com/images/icon-japanese.png" alt="和食"/></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="https://example.com/recipes/japanese/stew">
      <span itemprop="name">煮物</span>
      <img itemprop="image" src="http://example.com/images/japanese-stew.png" alt="煮物"/></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>
<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="https://example.com/foodstuff">
        <span itemprop="name">食材</span>
        <img itemprop="image" src="http://example.com/images/icon-foodstuff.png" alt="食材"/></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="https://example.com/foodstuff/potato">
      <span itemprop="name">じゃがいも</span>
      <img itemprop="image" src="http://example.com/images/icon-potato.png" alt="じゃがいも"/></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

参考

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

コメント

  • Posted on
  • Updated on
  • Views 120