SEOとアクセシビリティを意識した「パンくずリスト」のマークアップの方法
概要
パンくずの正確な書き方とはなんだろうか考えてみる。
単純に見た目だけパンくずにしようとすると下記のようにリストで階層構造を表して、見た目を「パンくず」っぽくする実装になる。
<ol class="breadcrumb">
<li><a href="https://example.jp/">トップページ</a></li>
<li><a href="https://example.jp/list/">記事一覧</a></li>
<li class="current"><a href="https://example.jp/detail/">詳細</a></li>
</ol>
見た目だけはこれで良いのだが、この HTML 構造だとスクリーンリーダーやボットなどが「パンくず」を辿るこどはできない。
仕様
「正解の仕様」を定めるために、下記の技術仕様を軸に実装する。
- リッチリザルト 検索結果に情報を増やすという意味で（SEO 対策としても有）
- WAI-ARIA アクセシビリティの向上として
リッチリザルト
検索エンジンなどの Bot にパンくずリストを認識させたいのであれば、UI は要らない。JSON-LD の構造化データを用意するだけで良い。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"name": "パンくずリスト",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": { "@id": "https://example.jp/", "name": "トップページ" }
},
{
"@type": "ListItem",
"position": 2,
"item": { "@id": "https://example.jp/list/", "name": "記事一覧" }
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.jp/detail",
"name": "詳細"
}
}
]
}
</script>
参考：
ライブラリなどでこの JSON-LD とパンくずリストの UI が簡単に出力されるのであれば管理や実装の手間はない。ただそうでない場合、UI との二重管理になってしまう（また、ドキュメントのサイズも大きくなる）。今回は UI があるので、構造化データも組み合わせておきたい。
microdata でマークアップした場合は下記のようになる。
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.jp/"><span itemprop="name">トップページ</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a
itemscope
itemtype="https://schema.org/WebPage"
itemprop="item"
itemid="https://example.com/books/sciencefiction"
href="https://example.jp/list/"
>
<span itemprop="name">記事一覧</span></a
>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a
itemscope
itemtype="https://schema.org/WebPage"
itemprop="item"
itemid="https://example.com/books/sciencefiction"
href="https://example.jp/deail/"
>
<span itemprop="name">詳細</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
このパンくずはリッチリザルトのテストを通っているので Google 検索結果にもパンくずリストのリッチスニペットとして表示されるだろう。
参考：
WAI-ARIA
W3C の WAI-ARIA のページに「パンくずリストの例」が記載されていた。
使用するプロパティは下記。
| 属性 | 要素 | 使用法 |
|---|---|---|
aria-label="パンくずリスト" |
nav | nav 要素で提供されるナビゲーションのタイプを説明するラベル |
aria-current="page" |
a | 最後のリンクに適用され、現在のページを表していることを示す |
それを踏まえた実装サンプルは下記の通り。
<nav aria-label="パンくずリスト" class="breadcrumb">
<ol>
<li>
<a href="https://example.jp/">トップページ</a>
</li>
<li>
<a href="https://example.jp/list/">記事一覧</a>
</li>
<li>
<a href="https://example.jp/detail/" aria-current="page">詳細</a>
</li>
</ol>
</nav>
ちなみにパンくずの構造間の区切り（セパレーター）は、スクリーンリーダーで読み上げられるのを防ぐために HTML には記述せず、CSS で記述する方が良いとのこと（当該ページのサンプルでは li::before で実装されていた）。
合体
<nav aria-label="Breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.jp/"><span itemprop="name">トップページ</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a
itemscope
itemtype="https://schema.org/WebPage"
itemprop="item"
itemid="https://example.com/books/sciencefiction"
href="https://example.jp/list/"
>
<span itemprop="name">記事一覧</span></a
>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a
itemscope
itemtype="https://schema.org/WebPage"
itemprop="item"
itemid="https://example.com/books/sciencefiction"
aria-current="page"
href="https://example.jp/deail/"
>
<span itemprop="name">詳細</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
所管
パンくずは、PC と SP のデバイスサイズの差から配置の場所が異なりデザインや役割が大きくことなることも多い。
アクセシビリティを重視する意図があれば、WAI-ARIA に沿ったマークアップを施しデバイス依存しないデザインをするべきだ。アクセシビリティよりも SEO としてパンくずリストが必要なのであればリッチリザルトに載るように JSON-LD で構造化だけ読み込んでおくのも手だ。
これら両方を重視したいとなった場合、最後に記述したような膨大なコードを今現在は記述する必要がありそうだ。
Author And Source
この問題について(SEOとアクセシビリティを意識した「パンくずリスト」のマークアップの方法), 我々は、より多くの情報をここで見つけました https://qiita.com/hiro0218/items/1ae465c82576386bf7da著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .