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

HTML5の要素タグを効果的に活用することで、WebサイトのSEOを大幅に改善できます。要素タグとは、<header>、<footer>、<main>、<article>、<section>、<aside>などの、Webページの構造を明確に示すタグのことです。

この記事では、以下の内容について解説します。

Web制作会社で約6年間、制作とSEOマーケティングを担当してきた経験から、HTML5要素タグがSEOに与える影響について詳しく解説します。

HTML5の要素タグを適切に使用すると、コードが整理され、検索エンジンがコンテンツの構造や意図を正確に理解できるようになります。

ただし、main、article、section、asideなどのタグは、それぞれ特定の目的があり、適切な使い分けが重要です。

それでは、詳しく見ていきましょう。

HTML5とは？

動画では、HTML5の概要がわかりやすく解説されています。

HTML5は、HTMLの最新バージョンであり、Webページ構築のための新しい標準規格です。

大きな特徴として、<video>や<audio>タグによりプラグインなしで動画や音声を直接埋め込めるようになりました。

SEOの観点で特に重要なのは、nav、main、article、section、asideといった構造化タグです。これらを使うことで、検索エンジンがページの構成を正確に把握できます。

WordPressを利用する場合、アフィンガーやSANGOなどのSEO対策済みテーマには、これらの要素タグが最初から実装されています。

しかし、オリジナルサイトを構築する場合は、これらのタグの意味と使い方を理解することが不可欠です。

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>

考察

上記の例からわかるように、HTML5要素タグを使用するとコードがすっきりと整理されます。

HTML5以前は、<div>タグとクラス名で構造を表現するしかなく、多数の</div>が並ぶことでコードの可読性が低下していました。

HTML5要素タグがSEOを強化する理由は、検索エンジンがページ構造を明確に理解できるようになるからです。

例えば、<aside>タグでサイドバーを囲むことで、「このコンテンツはメインではない補足情報です」と検索エンジンに伝えられます。これにより、サイドバー内の重複コンテンツによるSEO評価の低下を防げます。

また、mainやarticle内の見出しタグは、他のセクションより重要と認識されるため、記事の核となるキーワードが検索エンジンに正確に伝わります。

各要素タグの使い方

<header>、<nav>、<aside>、<footer>タグの使い方は比較的わかりやすいでしょう。

一方、<main>、<article>、<section>の適切な配置は少し複雑です。

サイトの構造によって最適な使い方が異なるため、各要素の定義を正確に理解しておくことが重要です。

main要素の定義

• ページの主要コンテンツを囲む要素です。
• 1ページにつき1回のみ使用します。
• article、aside、footer、header、nav要素の中には配置できません。

参考 HTML の <main> 要素 | MDN Web Docs

article要素の定義

• それ自体で完結する独立したコンテンツを表します。
• ブログ記事、ニュース記事、製品レビューなどに適しています。
• 新着情報リストの各項目にも使用できます。

参考 <article>: 記事コンテンツ要素 | MDN Web Docs

section要素の定義

• コンテンツを意味的なまとまりごとに区分けします。
• 単なるスタイル適用のためではなく、内容の論理的区分に使用します（スタイル目的なら<div>を使用）。
• 通常、見出し（Hタグ）を含むべきです。見出しがない場合は<section>の使用を再検討してください。

参考 <section>: 汎用セクション要素 | MDN Web Docs

参考として、実際のWordPressテーマの構造を見てみましょう。

SEOに強いWordPressテーマ「Stinger」のHTML5要素構造を分析

Stingerでは、main要素内にarticleを配置し、その中でsectionを使って記事を区分けしています。

様々なサイトの構造を研究することで、自分のサイトに最適なHTML5要素の使い方が見えてくるでしょう。

以上、HTML5の要素タグとSEOへの効果について解説しました。適切に実装して、検索エンジンに優しいサイト構造を作りましょう。