MENU

スキーマ(schema.org)を使用したパンくずのmicrodataマークアップ方法をメモ。記事によって記述例が全然違うので、自分が納得のいく方法を探しました。

古い記事を参考にしすぎると今では記法が変わってエラーが出るようなもあるので注意。

スキーマ - schema.org については、以下のサイトでわかりやすく説明してくれています。

Googleリッチスニペット対策!初心者向けSchema.org解説!

 

目次

公式ページを参考にしてみる

Schema.orgの公式サイトにある、BreadcrumbListのページを参考にしました。

こちらのページの最下部に、記述例がのっています。例によると構成は以下。

ul   : type(BreadcrumbList)
li   : prop(itemListElement) , type(ListItem)
a    : prop(item)
span : prop(name)
meta : prop(position)

例にならって記述してみると次のような感じ。

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="リンク">
      <span itemprop="name">HOME</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="リンク">
      <span itemprop="name">カテゴリなど</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>

  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemprop="name">現在のページ</span>
    <meta itemprop="position" content="3" />
  </li>
</ul>

構造化データテストツールを使用して確認

スキーマの記述が正しくできているかどうかを判断するために、構造化データ テストツールを使用します。

パンくずを表示しているページのURLをコピペすると画面右側に診断結果が表示され、エラーがあればその理由なども説明してくれます。

こちらでエラーがでてなければOKです。

エラーが出る時は

上記の記述でエラーが出る時は、以下の方法を試してみてください。

① : ページ全体を囲む記述をする

私はbodyにWebpageというmicrodataをマークアップしています。

<body temscope itemtype="http://schema.org/Webpage">

② : パンくずのulタグ( olタグ )の部分に属性Breadcrumbを追加

<ul itemprop="Breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

BreadcrumListのページの、記述例の少し上に下のような記述がありました。

Instances of BreadcrumbList may appear as values for the following properties

Property On Types Description
breadcrumb WebPage  A set of links that can help a user understand and navigate a website hierarchy.

 

WebPageの中のbreadcrumbとして使用してね、みたいなことかと。

おそらく、親の属性が決まっていない状態でBreadcrumbListを使用するとアウトっぽい。

完成系

全体像を含めると以下のように記述。

<body temscope itemtype="http://schema.org/Webpage">

  <ul itemprop="Breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="リンク">
        <span itemprop="name">HOME</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="リンク">
        <span itemprop="name">カテゴリなど</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <span itemprop="name">現在のページ</span>
      <meta itemprop="position" content="3" />
    </li>
  </ul>

</body>

こんな感じです。

定期的にスキーマの記法に変化がないかチェックするのを忘れずに。

- Thank you for reading this to the end. -
TOPへ Top