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 などです。

VSCode スニペット登録
このスクラップは2024/09/22にクローズされました