あなたのホームページではHTML5の構造化タグ使ってますか?

HTML5

インターネットの進化は早いです。一昔前まではパソコン主導でネットサーフィンしていたのが携帯電話(ガラケー)になり、そして今はスマホでネットサーフィンする事が主流になりました。
HTMLも同じでHTML4やXHTMLなど進化し続けて、気が付くとHTML5が主流になりつつあります。
ホームページを新規制作するのにあたりHTMLは最新のHTML5にした方が良いの?と質問される事が増えましたが、答えはYESです。HTML5を使った方が良いでしょう。
理由は新しい構造化タグが新規に追加された事と、この新しいタグにより今後のSEOへも影響がでると予想されるからです。
“ともたか39”のHP制作経験、SEO経験も含めHTML5の構造化タグの説明と今後SEOについて述べていきますので、これからホームページ制作をおこなう方への参考になれば幸いです。

HTML5での新しい構造化タグ

header

ヘッダーセクションで、ページの冒頭部分で使用します。
今まではdivタグなどでclassやidでheaderと指定して定義していた部分をheaderタグを使用して直接指定する事が可能になりました。
具体的にはサイト全体のロゴやサイトタイトルなどを上部で表現する時に使用する人が多いです。

footer

フッタセクションで、ページの最下部で使用します。
今まではdivタグなどでclassやidでfooterと指定して定義していた部分をfooterタグを使用して直接指定する事が可能になりました。
具体的にはサイト下部のロゴやコピーライトなどを下部で表現する時に使用する人が多いです。

nav

ナビゲーションメニューなどを指定する時に使用します。
これもまたheaderやfooterと同じでdivタグなどでclassやidを指定して定義していたものをナビゲーション専用に用意された構造化タグです。

article

独立した1つの記事(コンテンツ)として使用します。
1つの記事とは何?と疑問が湧いてきますが、調べたところ認識、解釈は人それぞれでした。
これでは明確な答えにはなっていませんね。
私個人の見解でしかありませんが、1ページ内にある全体のコンテンツをarticleタグで括るというより、articleタグで括られた内容が独立した1つのコンテンツになっている場合に使用するんだと解釈しました。
※もし違うという人がいらっしゃいましたら遠慮なく突っ込んでください!

section

ページ内の章を括る時に使用するタグです。
本で例えたら第1章、第2章などの切り分けに使用します。
具体的には1記事(1コンテンツ)の中で章分けして記事が成り立つ事が多いかと思いますが、その際に使用することを推奨されています。

aside

ページ内の余談や補足説明の情報などを括る時に使用するタグです。
具体的には記事内の内容と関連はしているけれども、少しずれた内容を説明する時に使用します。
例えば用語の説明や補足情報を解説する時などに使用するイメージです。

main

ページ内にあるメイン部分を括る時に使用するタグです。
具体的にはそのページのみで独立していて、そしてそのページのみの固有で主体となる部分としての使用になります。

HTML5使用でのSEOへの影響

HTML5から新機能として追加されたこの構造化タグは、SEOにも大きく影響されると考えられています。
理由としては、それぞれ専用の構造化タグを使用し構造化する事で検索エンジンのアルゴリズムが解釈しやすくなり、セクション毎のアピールがHTML4より強くできる事にあります。
ホームページを新規制作する場合には、HTML5を使用する事を強くお勧めします。
ただし現状HTML4やXHTMLなどの古いバージョンのHTMLで運用していて、かつ狙ったキーワードで上位表示されている場合は、一概にHTML5化のお勧めはできません。Googleを主とした検索エンジンはコンテンツ(記事内容)重視でみています。構造を変えた事で記事の内容やセクションも変わってしまうと、現在評価されている検索順位が評価し直され、検索順位を下落させる可能性もあるからです。
そのため、もし現在運用しているサイトをHTML5化させたい場合は、ページ毎の検索順位を確認してから検討、制作する事をお勧めいたします。