Closed3

パンくずリスト(構造化データ)について

たたたたたた
対象 追加する属性 代表例
パンくずリスト全体 itemscope itemtype=”https://schema.org/BreadcrumbList” ulタグ
各パンくず itemprop=”itemListElement”
itemscope
itemtype=”https://schema.org/ListItem”
liタグ
リンク itemprop=”item” aタグ
パンくず名 itemprop=”name” aタグ直下のspanなど
順番 itemprop=”position” metaタグ
html
<ol class="c-breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li class="c-breadcrumb_item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="/"><span itemprop="name">HOME</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li class="c-breadcrumb_item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="/xxx/"><span itemprop="name">第2階層</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li class="c-breadcrumb_item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="/xxx/xxx/" aria-current="page"><span itemprop="name">第3階層</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

itemscope: マイクロデータの範囲を示すために使用します。これにより、その要素とその内部の要素が一つのアイテム(オブジェクト)として扱われることを検索エンジンに示します。具体的には、その要素内のデータがひとつの論理的なエンティティであることを示すためのものです。

itemtype: その要素が何のタイプのアイテムであるかを指定します。通常は、schema.org などの語彙からURLを指定します。これにより、指定されたアイテムがどのタイプのものであるかを検索エンジンが理解するのに役立ちます。

itemprop: アイテムのプロパティ(属性)を定義します。これは、itemscope とともに使用され、そのアイテムが持つ具体的なプロパティを示します。例えば、name、url、address などです。

このスクラップは2024/09/22にクローズされました