【SEO】【構造化データ】パンくずリスト #Web

はじめに

ここでは実際にどのように実装をしたかを書いていきたいと思います。
パンくずリストはRDFa、microdata、JSON-LDで記述できますが、今回はRDFaを使った例を紹介します。

パンくずリスト

ここ→google developer's guide for breadcrumbに書いてあることをやっていきます。

breadcrumb.html

<div class="pankuzu">
  <div class="inner">
    <ol vocab="https://schema.org/" typeof="BreadcrumbList" class="breadcrumb">
      <li property="itemListElement" typeof="ListItem">
        <a href="/" property="item" typeof="WebPage">
          <span property="name">HOME</span>
        </a><meta property="position" content="1">
      </li>
      <li property="itemListElement" typeof="ListItem">
        <a href="/spot/kanagawa/" class="prefName" property="item" typeof="WebPage">
          <span property="name">神奈川県</span>
        </a><meta property="position" content="2">
      </li>                                                                  
      <li property="itemListElement" typeof="ListItem">
        <a href="/spot/kanagawa/l141003/" class="cityName" property="item" typeof="WebPage">
          <span property="name">横浜市</span>
        </a><meta property="position" content="3">
      </li>
      <li property="itemListElement" typeof="ListItem">
    <span property="name">横浜市西区</span><meta property="position" content="4">
      </li>                                                                          
    </ol>
  </div>
</div>

補足すると、

最後のリストは現在地を表示するものなので<a>タグがない
<a>タグのurlは相対パスでOK
<meta>タグのcontentの数値は1から開始し、階層が深くなるごとにプラス1する

ちゃんと書けているか確認したい

構造化データには決められたルールがあり、そのルール通り記述する必要があります。
本番公開前にエラーがないか確認したい...というとき、構造化データテストツールがとても便利です！
対象ページのURLからでも確認できますし、htmlをコピペするだけでもOKです。
最低限errorが出ないようにしてください。
（警告は修正必須ではありません。）

エラーが出ているときはこんな感じで表示されます。

ちゃんとできているとこんな感じで表示されます。

終わりに

WordPressだとプラグインでやっちゃったりすると思いますが、そうじゃなくても簡単ですぐできるのでやっておくといいと思います。