メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

スキーマ(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. -

    コメントする

    CAPTCHA


    TOPへ Top