HTML5の新要素、section・article・header・footerをSEO的に正しい順序でマークアップする

2017年3月27日2018年9月21日HTMLarticle,footer,header,HTML5,section,SEO,マークアップ,要素,順序

HTML5にて新しく追加された要素に、section,article,header,footerがありますが、これらをSEO的にもhtmlの構文としても正しい順序でマークアップしているか気になったので、調べてみました。

セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント

Webページのフロントエンドコーディングは「セマンティックWeb(Semantic Web)」の考え方に則るように提 ...

https://reviewlog.info/html5-semantic/

上記でSEO的に正しくと書いていますが、検索エンジンを欺く以前のスパムに近い手法とかでは全く無く、htmlの文法上正しい使い方をしていることが、ユーザーにも検索エンジンにもフレンドリーな内容になるため、結果として検索順位が上がります。

htmlの構造化タグと呼ばれるものは他にも色々ありますが、まずはページを構成する際の基本的な要素であるsection,article,header,footerの４つに絞って使い方を確認していきます。

HTML5でのsection,article,header,footer要素はレイアウト目的で使用してはいけない←<div>を使う

例えばsection要素は、文書のアウトラインを明示するために使用するものであり、レイアウトで文章を区切りたい場合はdiv要素を使います。(本当に紛らわしい…)

article要素は、サイト内でコンテンツとして明示したい部分に使用します。

また、header要素とfooter要素はそれぞれ、これまでヘッダー／フッターであることを示す要素です。

HTML5になって追加された「header要素」はheadタグと何が違うの？

HTML5になって追加された「header」要素ですが、これまでのXHTMLやHTML4.01には無かった要素になります ...

https://reviewlog.info/html5-header/

となると、以下のような使い方が正しいです。

<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バリデータなどでエラーが出ないかは一度確認してみてもいいかもしれません。