Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@bubbles

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

はじめに

ここでは実際にどのように実装をしたかを書いていきたいと思います。
パンくずリストは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が出ないようにしてください。
(警告は修正必須ではありません。)

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

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

structuredDataWithNoError.png

終わりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?