HTML5にて新しく追加された要素に、section,article,header,footerがありますが、これらをSEO的にもhtmlの構文としても正しい順序でマークアップしているか気になったので、調べてみました。
セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント
上記でSEO的に正しくと書いていますが、検索エンジンを欺く以前のスパムに近い手法とかでは全く無く、htmlの文法上正しい使い方をしていることが、ユーザーにも検索エンジンにもフレンドリーな内容になるため、結果として検索順位が上がります。
htmlの構造化タグと呼ばれるものは他にも色々ありますが、まずはページを構成する際の基本的な要素であるsection,article,header,footerの４つに絞って使い方を確認していきます。
HTML5でのsection,article,header,footer要素はレイアウト目的で使用してはいけない←<div>を使う
例えばsection要素は、文書のアウトラインを明示するために使用するものであり、レイアウトで文章を区切りたい場合はdiv要素を使います。(本当に紛らわしい…)
article要素は、サイト内でコンテンツとして明示したい部分に使用します。
また、header要素とfooter要素はそれぞれ、これまでヘッダー／フッターであることを示す要素です。
HTML5になって追加された「header要素」はheadタグと何が違うの？
となると、以下のような使い方が正しいです。
<header>nav要素とかここに記述する</header>
<article>
<section>
<h1>見出し(sectionタグはh1タグを含めることが推奨されている)</h1>
</section>
<p>コンテンツ内容</p>
</article>
<footer>フッター関連はここ</footer>
articleタグ内にsectionタグが存在するが、逆ももちろんOKです。
<section> <h1>見出し(sectionタグはh1タグを含めることが推奨されている)</h1> <article>記事本文をここに。こういうarticleの使い方もあり。</article> </section>
sectionタグ内にはh1タグを内包するのが好ましい
sectionタグが必ずしも必要な訳ではないですが、記述する際はh1タグを内包しているのがベターではあります。
ちなみに当サイトはどうなっているかというと、以下です。
<header>nav要素とかヘッダーの内容を記述</header>
<article>
<header>
<h1>大見出し</h1>
</header>
<section>
<!--ページ本文-->
</section>
<footer>フッター要素はここ</footer>
</article>
※ちなみに1ページ複数のheader要素はOKです。
sectionタグの中にh1タグが無い…！(現在は違うWordPressテーマを利用しており、h1タグは入っています。)
ぶっちゃけあんま気にしなくても良い気はするのですが、W3Cバリデータなどでエラーが出ないかは一度確認してみてもいいかもしれません。
