こんにちは。
Webページのマークアップにおいて、HTMLのセマンティックタグは出来るだけ適切に使いたいところです。これはページの構造を明確にし、ブラウザやスクリーンリーダーなどのユーザーエージェントが内容を理解しやすくするためです。SEOへの影響は要因が多く一概には言えませんが、構造が明確になることが間接的にプラスになる場合はあります。
さて、セマンティックタグに関連する話の中でも今回はサイドバーを何タグで実装すべきかについて改めて考えていきましょう。特に考えずにasideタグで実装されるケースが多いと思いますが、実は違うケースがあると思っていて、それを解説していこうと思います。
概要
タイトルで煽っておきながら、基本的にはasideで良いケースが多いかと思います。
ただしサイトのトップページなど一部の場合においてはasideタグではない方が良いケースがあるかなと考えています。
解説
改めてasideタグの役割を確認する
aside タグは文書の主題（本筋）から少し外れた補助的な内容（補足・関連情報など）を表すために導入されました。まったく無関係というより「本文の流れに対して脇に置ける内容」に向いています。
ひとつの目安として「なくても本文が成立するか？」を考えると判断しやすいです。ただしこれは絶対条件ではなく、主題との距離感（本筋か補助か）を基準にするのが重要です。
例えば記事ページにおいては、記事の内容以外の多くがasideタグで実装すべきものとみなしていいでしょう。具体的には、
- プロフィールや著者情報（本文とは別枠の補足）
- 補足説明・用語解説
- 広告やプロモーション枠
- 関連リンク（※リンクの集合なら後述の
navも検討）
などです。
asideタグの詳細についてはこちら。
一部のページ（トップページなど）においてはサイドバーはメインコンテンツかもしれない
大抵の場合、トップページは各ページへのナビゲーションを担っていると思います。例えば各セクションは見出しとリード文があって、詳細を載せた各ページへのリンクがあったりします。
そしてブログやメディアサイトではその一部としてサイドバーがよく見られます。例えば本ブログのトップページの下部を見てみると、サイドバーには「検索バー」「各カテゴリーへのリンク」「最新のコメント」「人気記事」などが含まれています。まさに各ページへのナビゲーションを行っていますし、さらに上記のいくつかはこのサイドバーにしかリンクが存在しなかったりします（下画像）。
この視点から見ると、サイドバーをasideタグでマークアップするのは必ずしも適切ではないかもしれません。サイドバーがメインコンテンツの一部と見なすことができるからです。
上記の例では見た目が「サイド」でも内容がページの主目的（回遊のための導線）に直結していますよね。こういう時は単純に aside と決め打ちせず「主目的の一部として main に含めるべきか？」まで含めて検討すると筋が良いです。
それをマークアップするための適切なタグは、リンクの集合としての役割が強いならまず nav が第一候補です。サイドバー部分のコンテンツが、「その部分が独立した話題のまとまりで、見出し（名前）を付けられる」のであれば section も有効です。
参考にnav, sectionそれぞれのMDNの記事を貼っておきます。
そういうわけで、サイドバーだったらいつでもどこでもasideタグかというとそうではないと言えそうです。
まとめ
HTMLのセマンティックなマークアップは、WebページのアクセシビリティやSEOに大きな影響を与えます。前述の通り、Webページの構造を明確にし検索エンジンがページの内容を正確に理解するための重要な情報だからです。
サイドバーのマークアップについても、その役割と内容に基づいて最適なタグを選択することが求められます。
「見た目がサイドか」ではなく「主目的に対して補助か」「リンク集合としてのナビか」を基準に選ぶのがポイントです。迷ったら、
- リンク集合は
nav - 補助領域は
aside - 主目的の一部なら
main配下に置く
という順で整理すると判断しやすくなります。
各要素に対してどのセマンティックタグを使うべきかの判断は非常に難しいのですが、今回の記事をぜひ参考にしてみてください。
また、こういった細かいテクニックをもっと知ってレベルアップしたい方はぜひこちらの本で勉強してみてください！
コメント