はじめに
みなさん、パンクズリストって作ったことありますか？
何階層にもわたる規模のサイトならばほぼ100%出現するUIですが
普段みなさんはどうやって実装しているでしょうか。
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/hogehoge/">hogehoge</a></li>
<li>fuga</li>
</ol>
こんな感じでとりあえずol>liで組んでおけばええでしょ！
ではまだ足りません。
この記事では
ここまでやっときゃかなり良さげでは？に たどり着いたパンクズ実装方法をご紹介します。
とりあえずパンクズの役割を整理
- ナビゲーションの補助
- ユーザビリティの向上
- SEO効果
- コンテンツの文脈理解
こんなところでしょうか。
それぞれ簡単に解説します。
ナビゲーションの補助
パンクズはユーザーが現在どのページにいるのか、サイト構造内での位置を視覚的に示します。
これにより、ユーザーが簡単に上位階層や関連するカテゴリーページに戻ることができます。
例:
ホーム > 商品 > カテゴリー > 商品名
ユーザビリティの向上
特に階層構造が深いサイトで、ユーザーが目的のページに移動する際の操作を簡単にできます。
これにより、サイト内で迷子になることを防ぎ、ストレスのない閲覧体験を与えることができます。
SEO効果
- 検索エンジンはパンクズを通じて、サイトの構造や階層を理解しやすくなります
- パンクズを適切にマークアップすることで、Googleの検索結果にリッチスニペットとして表示され、クリック率の向上を見込めるかもしれません
コンテンツの文脈理解
ユーザーにページのカテゴリやトピックを直感的に理解させ、関連情報へのアクセスを促します。
特に新規ユーザーや、深めの階層に突然アクセスしたユーザーにとって有効だと思います。
はい
ちゃんとやろうとすると結構考えることがありそうです。
ではどうやって実装していけばよいのか
ステップを踏んで解説していきます。
1. まずはセマンティックに
冒頭で登場したHTML
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/hogehoge/">hogehoge</a></li>
<li>fuga</li>
</ol>
こいつを進化させていこうと思います。
まずolをnavでラップしましょう。
こいつはナビゲーションの役割なので。
<nav>
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/hogehoge/">hogehoge</a></li>
<li>fuga</li>
</ol>
</nav>
ほいで、必要な aria 属性とその値を付与します。
aria-label="Breadcrumb"
nav 要素で提供される、ナビゲーションの種類を説明するラベルを提供します。
aria-current="page"
ナビゲーショングループの最後のリンクに適用され、現在のページを表すことを示します。
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/hogehoge/">hogehoge</a></li>
<li><a href="" aria-current="page">fuga</a></li>
</ol>
</nav>
最後のリンク「fuga」は、リンクである必要はなさそうですがa要素でマークアップします。
この理由は、読み上げ技術支援者に対応するためです。
a要素でマークアップすれば
タブキーで移動した時にフォーカスが当たるようになります。
フォーカスが当たればその内容が読み上げられます。
そして、aria-current="page"を付与していることによって「現在のページ」と読み上げられます。
そして、aria-current="page"はa要素に付与するのが一般的です。
したがって、リンクである必要はないですが、a要素でマークアップする必要は十分にあるということです。
スタイリングで気をつけるべきこと
パンクズには、リンクとリンクの間に装飾があることが結構ありますよね。
スラッシュだったり
中黒だったり
このとき、リンク間の装飾は必ずCSSで表現しましょう。
spanとかで装飾用のHTMLを含めてはいけないということです。
See the Pen Untitled by 加藤菜摘 (@lreeyied-the-decoder) on CodePen.
このCodepenではスラッシュは疑似要素としていれてます。
こうすることで、パンクズが読み上げられた時、装飾まで読み上げられてしまうことを防ぎます。
仕上げ
このままでは現在のページである「fuga」もクリック可能になってしまいます。クリックしてもどこにも行かないのに。
なので、aria-current属性が付いているa要素には以下のCSSを当ててあげましょう
a {
&[aria-current="page"] {
color: #000;
text-decoration: none;
pointer-events: none;
}
}
こうすることで、クリックできない通常テキストとして扱いつつ、フォーカス可能で正しく読み上げられる、最もアクセシブルで、最もセマンティックなパンクズができあがりました。
SEO対策
では、SEO対策もしてみましょう。
Googleで検索すると
こんな感じで下層ページへのリンクがリストとして表示されているのをよく見ると思います。
これは「リッチリザルト」と呼ばれ、上の画像はパンクズのリッチリザルトです。
検索結果がこうなってるとそのサイトのクリック率が上がると言われています。
リッチリザルトを表示させるには構造化データというものを仕込んでおく必要があります。
Googleのクローラーは優秀なので、正直今まで説明したマークアップをしておけば勝手にリッチリザルトとして表示してくれたりします。
が、階層構造が正しくなかったりと、正しい・期待通りのリッチリザルトにするためにはやはり構造化データを仕込んでおくことに越したことはありません。
構造化データってなんやねん
Googleの公式ドキュメントに全てが書いてあります。
https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja
もちろんリッチリザルトはパンクズだけでなく、いろーーーーんな種類があるので
リッチリザルトとして表示したいものはあるかというのは事前に確認しておきましょう。
構造化データはJSON-LDという形式で、主にHTMLのheadタグ内に置いておきます。（bodyでもいいらしいけど）
JSON-LDなんて聞いたことないと言う人もいるかもしれませんが安心してください。ほぼjsonです。
Googleがテンプレを置いといてくれてるのでありがたく使わせてもらいましょう
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Books",
"item": "https://example.com/books"
},{
"@type": "ListItem",
"position": 2,
"name": "Science Fiction",
"item": "https://example.com/books/sciencefiction"
},{
"@type": "ListItem",
"position": 3,
"name": "Award Winners"
}]
}
</script>
これがGoogleが用意してくれてるパンクズリストの構造化データのテンプレです。
https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=ja
このテンプレをいじいじするのですが
変えるべきところは
position、name、itemの3つだけです。
positionはサイトにおいて何階層目にあたるページか
nameはそのページタイトル。パンクズリストとしてマークアップしているページ名と同じにするのが望ましそうです。
itemはそのページのURL
です。
これをパンクズリストがある全ページに仕込んでおきましょう！！！
....
いや、全ページ手動で追加するのだるすぎる
構造化データはJSで生成しても問題ないの？
はい、そうなったらJSで自動生成させたくなりますよね。
でも、JSってクライアントサイドで発火するものだから、Googleのクロールのタイミングによっては構造化データがまっさらの状態をクロールしちゃって意味ないんじゃないの？
と思ったそこのあなた
たぶん大丈夫です。
GoogleのドキュメントにJSで構造化データを生成する人にむけたドキュメントがあります。
https://developers.google.com/search/docs/appearance/structured-data/generate-structured-data-with-javascript?hl=ja#custom-javascript
だし、実際にJSで生成した構造化データがあるページをリッチリザルトテストにかけたらしっかり認識してくれました。
ただし、構造化データが検索結果に必ず表示されるとは限りません。リッチリザルトテストに沿ってページを正しくマークアップしても表示されない場合があります。
クロールの詳しい仕様やタイミングについてはGoogleの人以外誰もわからないです。
どんなに正しくマークアップしていても、構造化データをしっかり仕込んでいても、必ずしもリッチリザルトとして表示されるとは限らないので、実際に指摘された時に焦らないよう覚えておきましょう。
JSで構造化データを生成するスニペット
最後にスニペットを置いておきます。
誰かの役に立て〜〜〜〜；；
<nav class="c-breadcrumb" aria-label="Breadcrumb">
<ol class="js-breadcrumb_list">
<li>
<a href="/" class="js-breadcrumb_link" data-position="1">
<span class="c-breadcrumb_txt">ホーム</span>
</a>
</li>
<li>
<a href="/hogehoge/" class="js-breadcrumb_link" data-position="2">
<span class="c-breadcrumb_txt">hogehoge</span>
</a>
</li>
<li>
<a href="" aria-current="page" class="js-breadcrumb_link" data-position="3">
<span class="c-breadcrumb_txt">fuga</span>
</a>
</li>
</ol>
</nav>
const breadcrumbData = () => {
const breadcrumbListElem = document.querySelector('.js-breadcrumb_list');
if(!breadcrumbListElem) return;
const breadcrumbListItemElem = breadcrumbListElem.querySelectorAll('.js-breadcrumb_link');
const breadcrumbItems = [];
breadcrumbListItemElem.forEach(el => {
const breadcrumbItem = {
'@type': 'ListItem',
position: el.dataset.position,
name: el.querySelector('.c-breadcrumb_txt').innerText,
item: el.href ? el.href : '',
};
breadcrumbItems.push(breadcrumbItem);
});
const breadcrumbList = {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: breadcrumbItems
};
const jsonLD = JSON.stringify(breadcrumbList);
const scriptElement = document.createElement('script');
scriptElement.type = 'application/ld+json';
scriptElement.textContent = jsonLD;
document.head.appendChild(scriptElement);
};
positionの値はカスタムdata属性を持たせてJSで取得します。
ぶち込み先はheadタグ内の一番最後です。
以上です！