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

2017年7月27日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要素はそれぞれ、これまでヘッダー/フッターであることを示す要素です。

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

articleタグ内にsectionタグが存在するが、逆ももちろんOKです。

sectionタグ内にはh1タグを内包するのが好ましい

sectionタグが必ずしも必要な訳ではないですが、記述する際はh1タグを内包しているのがベターではあります。

ちなみに当サイトはどうなっているかというと、以下です。

※ちなみに1ページ複数のheader要素はOKです。

sectionタグの中にh1タグが無い…!(現在は違うWordPressテーマを利用しており、h1タグは入っています。)

ぶっちゃけあんま気にしなくても良い気はするのですが、W3Cバリデータなどでエラーが出ないかは一度確認してみてもいいかもしれません。

スポンサーリンク

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

Posted by 管理人