今日はテクニカルな内容で、HTML5の要素タグについて勉強したのでメモしておきたいと思います。
HTML5の要素タグは今まであまり気にした事が無かったのですが、SEOに有効だという話を聞いて勉強してみました。
実際に意識して使ってみると、ソースコードが凄く整理されてかなり良かったです。
ただし、これらの要素タグは正しい定義の中で正しいポジションに使用する事でGoogleからの評価が上がるらしいです。
その中で、いくつかのタグ（main, article, section, asideなど）の使いどころが若干ややこしいので、まとめてみました。
目次
HTML5要素タグの目的は？
<header>
<h1>title</h1>
<form>Search</form>
<nav>
<ul>Site navigation</ul>
</nav>
</header>
<section>
<article>
<h1>Article Title</h1>
<p>Summary</p>
</article>
</section>
<aside>
<section>
<h2>Blogroll...</h2>
</section>
</aside>
<footer>
<h2>Footer</h2>
</footer>上記のサンプルソースを見てもわかるように、全体的にソースコードがすっきりします。
これが登場するまでは基本Divタグで囲ってクラス名で区別していたと思いますが、ソースコード内にはどこから来ているのかわからない</div>が大量発生していました。
HTML5要素タグを使うと内部SEOが強くなる理由は、Googleなどの検索エンジンがサイトの構造を理解しやすいためでしょう。
例えばブログなどではサイドバーにあたる<aside>内のコンテンツが他ページと重複しますが、<aside>タグで囲むことによって「ここはサイドバーだよ」という情報を検索エンジンに与え、コンテンツ重複による低評価を避けることができるのです。
また、mainやarticle内に登場するH1, H2タグなども他のセクションよりも優先付けされるため、記事内のキーワードが検索エンジンにより拾われ易くなると思われます。
各要素タグの使い方、ポジション
上記のサンプル画像を見て分かるように、<header>, <nav>, <aside>, <footer>タグの使う場所は簡単に分かると思います。
ややこしいのが<main>, <article>, <section>のポジションです。
これは各サイトで使い方が違う事が多いので、当初は何が正しくて何が間違っているのかが判断できませんでした。
そこで、各要素の定義付けを見ていきたいと思います。
main要素の定義
- ページ内のメインのコンテンツとなるセクションへ使用
- 1ページ内に1つのみ使用
- article, aside, footer, header, nav要素の中には入れてはいけない
article要素の定義
- そのページから切り取っても単独で成り立つセクション
- ページ内のメインのコンテンツとなるセクションへ使用
- トップページの新着情報の箇所に使う
section要素の定義
- その名の通り、ページ内の文章などの区切りのセクションを囲むタグ
- レイアウト目的では使用しない。レイアウト目的なら<div>を使用。
- 見出し（Hタグ）が無いを箇所は<section>を使用しない
内部SEO最強のWordPressテンプレート「Stinger」のHTML5要素の構造は？
SEOに強いと言われているWordPressテンプレートのStinger5の構造を研究してみました。
以下のようになっています。
Main, Articleの中にSectionを入れているようですね！
それにしてもこのStingerのソースコードは凄く整理されていて驚きました。。
以上、HTML5の要素タグについてでした。
コメントを残す