HTML5でSEO強化へ！要素タグsection, article, mainの使い方

ふきげん猫ちび

SEOに強いWebサイトを作りたい！

HTML5のタグを積極的に使うとSEOに強いサイトが作れるの？

ふきげん猫ちび

結論から言うと、HTML5の要素タグを使うとSEOに劇的に強くなります。

要素タグというのは、<header>, <footer>, <main>,<article>, <section>, <aside>などのレイアウトを構成するタグのことです。

今回の記事では以下の内容について詳しく解説します。

HTML5とは？
HTML5要素タグを使うことによる特典：コードが整理される
各要素タグの使い方の解説
SEOに強いサイトのHTML5の使い方サンプル

ちなみに僕は６年くらいWeb制作とマーケティング（SEO中心）をWeb制作会社で担当していたので、ここら辺のことを語らせるとかなり詳しいです。

HTML5の要素タグを上手く使うとソースコードが凄く整理されるし、Googleにコンテンツの内容を正しく伝えれるようになります。

ただし、いくつかのタグ（main, article, section, asideなど）は使い方が若干ややこしいので注意が必要です。

ヘイショー

参考にしてみてください！

HTML5とは？
HTML5要素タグを使うことによる特典：コードが整理される
各要素タグの使い方の解説
SEO最強と呼ばれるWordPressテンプレート「Stinger」のHTML5要素の構造を分析してみた

HTML5とは？

この動画で物凄く分かりやすく、簡潔にまとめられています。

つまりHTMLのルールが変わったという話です。

一番の目玉となる変更は、<video><audio>などのタグを使うことによって動画や音声を直接ページに埋め込めることになったことです。

その他いろいろなタグが追加されたのですが、SEOに関係するのは要素タグ（nav, main, article, section, aside）と呼ばれるものです。

ちなみにWordPressのテンプレートを使う人はSEOに強いテンプレート（アフィンガー、サンゴなど）を利用すれば初めから実装されています。

ただし自分のWebサイトを作る方は必ず覚えておいた方がよい内容です。

HTML5要素タグを使うことによる特典：コードが整理される

まずは実際のコードを見てみてください。

HTML5の要素タグを使わない場合

コード

<div class="header">
	<h1>title</h1>
	<form>Search</form>
	<div class="nav">
		<ul>Site navigation</ul>
	</div><!-- /nav -->
</div><!-- /header -->

<div class="main">
	<div>
		<h1>Article Title</h1>
		<p>Summary</p>
	</div>
</div><!-- /main -->

<div="sidebar">
	<div>
		<h2>Blogroll...</h2>
	</div>
</div><!-- /sidebar -->

<div="footer">
	<h2>Footer</h2>
</div><!-- /footer -->

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>