HTML5の新要素、section・article・header・footerをSEO的に正しい順序でマークアップする
2018年9月21日HTMLarticle,footer,header,HTML5,section,SEO,マークアップ,要素,順序
HTML5にて新しく追加された要素に、section,article,header,footerがありますが、これらをSEO的にもhtmlの構文としても正しい順序でマークアップしているか気になったので、調べてみました。
上記でSEO的に正しくと書いていますが、検索エンジンを欺く以前のスパムに近い手法とかでは全く無く、htmlの文法上正しい使い方をしていることが、ユーザーにも検索エンジンにもフレンドリーな内容になるため、結果として検索順位が上がります。
htmlの構造化タグと呼ばれるものは他にも色々ありますが、まずはページを構成する際の基本的な要素であるsection,article,header,footerの4つに絞って使い方を確認していきます。
HTML5でのsection,article,header,footer要素はレイアウト目的で使用してはいけない←<div>を使う
例えばsection要素は、文書のアウトラインを明示するために使用するものであり、レイアウトで文章を区切りたい場合はdiv要素を使います。(本当に紛らわしい…)
article要素は、サイト内でコンテンツとして明示したい部分に使用します。
また、header要素とfooter要素はそれぞれ、これまでヘッダー/フッターであることを示す要素です。
となると、以下のような使い方が正しいです。
<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バリデータなどでエラーが出ないかは一度確認してみてもいいかもしれません。
関連記事

【完全保存版】リスティング広告・SEOで成約を取るためのキーワードの選び方
Google AdWordsやYahoo! スポンサードサーチといった、リスティ ...

HTML5のmark要素で該当の文章をハイライトして目立たせる
HTML5で新しく追加された要素にmark要素があります。 これは、囲んだ部分の ...

htmlタグの文章におけるSEO上大事な要素「見出しタグ(h1,h2,h3,h4,h5,h6)」の使い方について
HTML5になっても変わらず文章におけるSEO上の重要なタグが、「見出しタグ(h ...

HTML5のルート要素であるhtmlタグ使用時の注意事項とlang=”ja”の設定方法とは
HTML5の基本となるルート要素のhtmlタグで、DOCTYPE以下の全ての部分 ...

セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント
Webページのフロントエンドコーディングは「セマンティックWeb(Semanti ...