ウェブサイトは、人にも機械（検索エンジン）にも読みやすいコーディングが良いとされる。
読みやすければ、おのずとアクセスは増え、検索上位にも掲載される。
このことは、内部SEO対策のひとつとして欠かせない。
今回は、人にも機械にもやさしいサイト構造を表現する「セクショニング」について。
サイト構造の基本
HTML5では、より読みやすさを重視したコーディングが求められる。
「読みやすさ」とは、ウェブページの構造がはっきりとわかるように、各要素を並べられていること。
最初は、視覚的な読みやすさについて。
例えば、ブラウザで表示される一般的なウェブページの構造は、だいたい以下の図のように構成されている。
上から順に、
- 企業名やサイトタイトルなどを表示するヘッダー部分
- 各カテゴリーページへジャンプするナビゲーション（メニューともいう）
- メインコンテンツ（本文）
- フッター（プライバシーポリシー・サイトマップ・問い合わせなどのリンク）
というようにできている。
視覚的、つまり人がウェブページを読む場合は、この図のように表示されれば良い。極端な話、このように見せることは、「一から始めるWeb制作 #8〜最低限これだけは使いこなしたい！よく使うタグ」で説明したdivタグや、cssでどうにでもできる。
しかし、divタグやcssだけでレイアウトされたウェブページでは、検索エンジン(機械）は人と同じように読み取ることはできない。
そこで、各構造を示すheader、nav、main、footerタグを用いれば、人にも機械にも読みやすくなるということ。
ちなみにheaderタグは、「一から始めるWeb制作 #4〜文字エンコーディングとHTMLの基本構造」で説明したheadタグとは違う意味なので、ご注意を。
header、nav、main、footerタグは全て、bodyタグ内に書き、実際にブラウザに表示される部分となる。
セクショニング要素
bodyタグ内は、ページの本文。視覚的にはもちろんのこと、検索エンジンにも、文章構造の意味や役割が伝わらなければ意味がない。
HTML4.01以前は、本文においてhタグ（見出し）で構造化し、文章はpタグやdivタグでセクションを分けておけば良かった（以下のような感じ）。
<body>
<nav></nav>
<h1></h1>
<h2></h2>
<p></p>
<p></p>
<h3></h3>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
<h3></h3>
<p></p>
<p></p>
<footer></footer>
</body>しかし、検索エンジンがより文章を理解しやすくするため、HTML5より「セクショニング要素」が導入された。
セクショニング・コンテンツとなる要素は、見出しや文書を構成する特定の部位の範囲を定義します。
セクショニング・コンテンツとなる要素は明示的にアウトラインを生成します。各セクショニングコンテンツは通常、見出しを伴って使用されます。
つまり、
「文章の見出し、章や節の範囲を定義する要素（コンテンツ）」
のことを、セクショニング要素という。
具体的には、articleタグ、sectionタグ、asideタグ、そしてnavタグを指し、下記HTMLのように、見出しやフッターを含む区切り要素のこと。
<body>
<nav></nav>
<article>
<h1></h1>
<section>
<h2></h2>
<p></p>
<p></p>
<section>
<h3></h3>
<p></p>
<p></p>
</section>
</section>
<section>
<h2></h2>
<p></p>
<p></p>
<section>
<h3></h3>
<p></p>
<p></p>
</section>
</section>
<footer></footer>
</article>
</body>navタグ
navタグは、文章内の主要なナビゲーションのセクションを表す。
一般的には、サイト全体のナビゲーション「グローバル・ナビゲーション」をさすが、サイドメニューにあるリンク類のリンクブロック、記事の目次もnavタグを用いる。
footer内によくある、企業やサイトのprofile、sitemap、contactといったリンクについては、無理にnavタグを使うことなく、footerタグ内の要素として取り扱うことで十分。
articleタグ
articleタグは、
「その範囲がセクションの中で独立しており、それだけで完結していることを示す要素。」
タグ内が、ひとつの記事としてまとまっていることを示す。
h1タグ（サイト名）やパンクズリスト以下、本文をarticleタグで囲む。
sectionタグ
sectionタグは、その範囲が一般的な章・節・項などであることを示す要素。章や節など記事の一部分のひとかたまりを示す。
sectionタグ内にはhタグを含むことが推奨され、入子にすることも可能。反対に、見出しをつけられない場合は、この要素は用いることができない。
2016年勧告のHTML5.1により、セクション内の見出しで、h1を使用することが撤廃された。そのため、h2以下をセクショニングする。
<section>
<h2></h2>
<section>
<h3></h3>
</section>
<section>
<h3></h3>
</section>
</section>sectionタグは、文章の章・節など、意味を示すもの。CSSやJavaScriptでの操作のみを目的にする用途に使うときや、ブロックを作成するときはdivタグを使う。
asideタグ（補足）
asideタグは、メインコンテンツとは関連性が低い、補足や広告などを示す要素。主要文章に対して、間接的な説明を入れる場合や、サイドバーをまとめるときなどにも用いる。
asideタグは、１ページ内に複数回使用しても可。
H1タグはサイト名？記事タイトル？
h1タグは大見出しを表すタグで、1ページ内に1つが原則だ。通常は、記事タイトルに使われる。
しかし、上記図のようにヘッダーにサイト名を入れて、どのページでも同じヘッダーを表示させる場合、サイト名をh1と考える人もいる。
サイト名についてのタグの振り方は、以下3通りが考えられる。
- どのページでもサイト名をh1、記事タイトルはh2
- トップページのみサイト名をh1、それ以外のページでは記事タイトルをh1
- 全てのページでサイト名をh1、かつ記事タイトルもh1
これらをSEO的に考えると、どれも間違いとはいえない。
例えば、1においては、全てのページで同じh1がある場合、Googleの検索エンジンはとても利口なため、h2を各ページのタイトルと読むようになる。
また、上記にて原則h1は1ページ内にひとつと書いたが、3番目のh1の重複を理解し、次に来るh1が記事タイトルと理解するためだ。
とはいえ、やはり原則1つのh1が重複するのは、コーディング上好ましいとはいえない。そこで、一般的に取られるh1の振り方として、2番目の
「トップページのみサイト名をh1、それ以外のページでは記事タイトルをh1」
が良いと思われる。スタイルシートの書き方が厄介となるが・・・。
あるいは、企業のウェブサイトの場合、サイト名を会社ロゴの画像をdivタグやfigureタグで囲って、全て記事タイトルをh1にする方法もある。
こうなると、Webデザイン能力も問われるということか・・・。
この記事のまとめ
HTML5は、HTML4.01より簡素化されたコーディングと言われているが、セクショニング要素など、反対に入れるべき要素が増えた。
もちろん、全ては検索エンジンに正確に読み取ってもらうためなので、省略せずに入れておくことが大事。
まだ、セクショニング要素を厳密に入れているサイトは少ないようだが、ここできっちりとセクショニングしておくことで、他のサイトとの差別化を図ることができる。
人にも機会にも優しいコーディングを心がけよう。
コメント