![見出し画像](https://assets.st-note.com/production/uploads/images/13937653/rectangle_large_type_2_c327f7955f3baa4f7abd940b59298705.png?width=1200)
パンくずリストを作る(HTML)
パンくずリストを入れるとアクセシビリティの向上になって…
とかいうことは聞いていたので、初めて実装してみた。
1)SEOとの関係
調べてみると、まず「パンくずリスト」に
「SEO」がキーワードとしてくっついてくるのがよく分からず。
パッと見たところでは
パンくずリストは「そのページに至るまでの足跡」であって
コンテンツそのものではないから、検索エンジンでひっかかってしまうと
逆に都合が悪い。
(なので、SEOと売り出したいコンテンツとの関係性を
整理して考える必要がある)
なるほど!!!
2)「構造化して記載する」ということ
「構造化」も、やたらキーワードとして挙がっていた。
先の(1)にも関係して、検索エンジンが「これはパンくずリストなんだ」
ということを理解できるような仕組み(=構造化した内容)で
パンくずリストをHTMLファイルに書いていく必要がある。
なるほど!!!
構造化して書く方法、代表例では
・Microdata
・RDFa
・JSON-LD
とのこと。
今回は「JSON-LD」でTry!!!
<!-- パンくずリスト -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "../MR000x/MR0001.html",
"name": "Menu"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "../MR0010/MR0010.html",
"name": "Certification"
}
}
]
}
</script>
こんな感じで一通り書いて、Googleの「構造化データ テストツール」
でテスト。
(https://search.google.com/structured-data/testing-tool/u/0/)
「エラーなし」「警告なし」でOK…と。
ここで気がついたこと…
別にWebサイト上に公開するページを作っていた訳ではないため、
検索されることもなく…。
このコードを書いたからといって、HTML上に
なにか表記されるわけでもないので、特に日の目を見ず。
(=お疲れさまでした。)
くっ…(調査不足)
3)HTMLで記載する
気を取り直して、実際にパンくずリストとして画面上に表示する階層を
「ul」タグを使って記載。
<nav class="breadcrumbs">
<div class="breadcrumbs">
<ul class="breadcrumbs">
<li class="breadcrumbs"><a class="breadcrumbs" href="..\MR000x\MR0001.html" title="Top">Top</a></li>
<li class="breadcrumbs"><a class="breadcrumbs" href="#!" title="Certification">Certification</a></li>
</ul>
</div>
</nav>
突貫工事で作ったので、class名が全部「breadcrumbs」
になってしまったけど、まぁいいや…。
CSSでアイコンや間隔を整えて、仕上げ。
【出典】
https://webliker.info/29643/
https://seolaboratory.jp/92481/
https://webliker.info/94182/#toc_11
この記事が気に入ったらサポートをしてみませんか?