Help us understand the problem. What is going on with this article?

【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だとプラグインでやっちゃったりすると思いますが、そうじゃなくても簡単ですぐできるのでやっておくといいと思います。

bubbles
仕事ではweb開発をしており、現在はphp(framework:laravel5.4.36)、sqlserver、mysql、javascriptを扱っています。
ayudante
いつもユーザー中心で技術者とコンサルタントがとことん考え抜く それがアユダンテです
https://ayudante.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした