正しく使う：構造化されたセマンティックHTML5タグの正しい使い方
セマンティックHTML5タグが何であるか、その機能、そして検索エンジンがコンテンツを理解するのを助ける上でなぜ重要なのかがまだ不明な場合は、以前の記事「セマンティックHTML5タグを使って、検索エンジンにページの焦点を理解させる」を読むことをお勧めします。この記事では、基本的な概念と例を提供しています。
しかし、この投稿ではさらに進んだトピック、これらのタグを正しく慎重に使い、一般的な落とし穴を避ける方法について掘り下げます。
開発者がページのマークアップや構造化データに細心の注意を払うようになっても、セマンティックHTML5タグを何気なく、あるいは過度に使用する傾向があるという問題が広く見られます。
なぜこうなるのでしょうか？主な理由は2つあると考えています。
- 直接的な視覚的フィードバックの欠如: CSSスタイルとは異なり、セマンティックな構造は一般のユーザーには見えないため、開発者がその影響を直接感じることは困難です。これが、私がセマンティック構造を視覚化するための小さなツール（最後にリンクがあります）を開発した理由です。
- 一部のタグが
<div>のように振る舞う:<section>や<article>のようなタグはブロックレベル要素であるため、開発者はレイアウトや視覚的なグルーピングのために<div>の代わりにこれらを使いがちです。これは設計上の小さな欠陥であり、これらのタグが<span>のようにデフォルトでレイアウトに影響を与えない方が良かったでしょう。
なぜセマンティックHTML5タグの乱用は有害なのか
セマンティックタグの主な目的は、検索エンジンのページ分析アルゴリズムに、さまざまなコンテンツブロックの役割と重要性を伝えることです。これらを使って重要な情報を「強調」し、検索エンジンを最も重要なコンテンツに誘導します。
しかし、逆の側面を考えてみてください。すべてをさまざまなセマンティックタグで囲むと、実質的に何も強調していないことになり、本当に中心となるコンテンツの重要性が薄れてしまいます。
実際には、通常、検索エンジンに伝える必要があるのは次の3つだけです。
- ページのヘッダーがどこにあるか。
- ページのフッターがどこにあるか。
- その間にあるメインコンテンツ/記事が何か—そのページに固有の、最も重要な情報です。
時には、メインコンテンツに関連しているが、その一部ではない補足的なコンテンツ（Aside）を特定する必要がある場合もあります。
通常、<header>、<footer>、<main>、<article>、<aside>をうまく使えば十分です。典型的でクリーンかつ効果的な構造は、以下のようになり、6〜7対のタグで済みます。
どれほどシンプルかわかりますか？ほとんどのウェブページでは、これで十分です。SeoSpeedupのサイト監査ツールを使えば、ページの構造が過度に複雑でないかを迅速に特定できます。
上の図で一般的なHTML5タグが1つ欠けていることにお気づきかもしれません。そうです、**<section>**です！これは最も誤用されやすいタグの1つであり、以下で詳しく説明します。
パート1：セマンティックタグの正しい使い方とよくある間違い
最も一般的な間違いは、セマンティックタグを<div>の代わりとして使い、視覚的な構造ブロックを作成することです。これはその目的を損なうだけでなく、検索エンジンに誤った信号を送る可能性があります。
私のタグビューアで分析したこの例を見てください。
これはページの<main>領域の一部で、<header>と<footer>の間にあります。<h1>を含む<article>タグがあり、これはメインコンテンツ領域と主要な見出しを示しており、非常に良いです。
しかし、<h1>の周りには多数の<section>タグが散乱しています。ここで問わなければなりません：これらの<section>は何のためにあるのでしょうか？それぞれが明確なテーマブロックを表しているのでしょうか？
<section>タグのセマンティックな意味は、記事（<article>）または独立したコンテンツ領域を、テーマに基づいて論理的で自己完結した部分に分割することです。上記のように無計画に使用すると、検索エンジンは混乱します—どの部分を強調したいのですか？どの部分が並列のサブトピックなのですか？
検索エンジンがあなたの意図を確信できない場合、良いランキングを与えることをためらうでしょう。
<section>の正しい使い方
では、<section>を使うのが適切なのはいつでしょうか？
スマートフォン（例：Samsung Galaxy Zシリーズ）のレビュー記事（<article>）を書いているとします。次のように<section>を完璧に使うことができます。
ここでは、各<section>が明確なサブトピック（デザイン、スクリーン、カメラ、パフォーマンス、バッテリー）を中心に展開しており、それぞれが比較的に独立して完結しています。1つの<section>を単独で取り出しても、それは意味のある情報ブロックとして成立します（Google検索結果のフィーチャードスニペットになる可能性さえあります）。
<h2>タグでも視覚的にコンテンツを区切ることはできますが、これらの論理的なブロックを<section>タグで囲むことで、検索エンジンに対してより明確な「パッケージ」を提供し、「ねえ、これらのセクションはこの記事の異なる側面に関する並列で重要な議論なんだよ」と伝えているようなものです。
<section>の正しい使い方のまとめ:
<article>（または独立したコンテンツを表す他の要素）の内部で使用する。- 視覚的なレイアウトではなく、テーマに基づいた論理でコンテンツを分割するために使用する。
- 各
<section>には明確な見出し（通常は<h2>-<h6>）を持たせる。 - 各
<section>の内容は、比較的に独立して完結しているべきである。 - 明確なテーマによるグルーピングが必要ない場合は、
<section>の使用を避ける。 - 汎用的なレイアウトコンテナとして
<section>を絶対に使用しないこと。それは<div>の役割です。
<article>と<aside>に関する追記
<article>タグは、その内容が独立しており、自己完結していることを示します。理論的には、単独で配信または再利用が可能です（例：ブログ投稿、フォーラムのエントリ、ニュース記事、ユーザーコメント）。
しかし、時には階層の問題が発生します。例えば、この商品ページの例では、ページ下部の「関連商品」セクションも<article>タグ内に配置されています。
上の画像で、赤いボックスは主要商品の<article>の終わりを示しています。もし下の「関連商品」セクションも<article>を使い、他に区別するタグがなければ、セマンティックなレベルでメインコンテンツと同じと見なされる可能性があります。これは明らかに意図したものではありません。
この二次的なコンテンツの重要性を下げ、メインコンテンツとの関係を明確にするために、次のように<aside>タグで囲むべきです。
<aside>タグのセマンティックな意味は、メインコンテンツに関連しているが、それ自体は独立したコンテンツを含むことです。「サイドバー」、「補足情報」、「引用」と考えてください。関連商品、関連記事、広告、著者紹介などに適しています。
複数の<h1>に関する論争
HTML5の仕様では、技術的には異なる<section>や<article>要素内で複数の<h1>タグを使用することが許可されています。しかし、SEOのベストプラクティスの観点からは、1ページにつき1つの<h1>タグのみを使用することを強く推奨します。
<h1>はページで最も重要な見出しであり、ページの主要なトピックを検索エンジンに伝える最も強力なシグナルです。複数の<h1>を使用すると、このシグナルが薄まり、主要なテーマについて検索エンジンを混乱させる可能性があります。
シンプルに：1ページに<h1>は1つ。
セマンティックタグ使用の簡略化された意思決定フロー
以下の手順に従えば、非常に簡単です。SeoSpeedupは、このプロセスを自動的にガイドする実用的なアドバイスを提供します。
- ヘッダーを特定する: サイトのヘッダー領域（通常はロゴ、メインナビゲーション、検索バーなどを含む）を**
<header>**で囲みます。 - フッターを特定する: サイトのフッター領域（通常は著作権情報、二次リンク、連絡先などを含む）を**
<footer>**で囲みます。 - メインコンテンツ領域を特定する:
<header>と<footer>の間にあるすべてのコアコンテンツを**<main>**で囲みます。1ページに<main>タグは1つだけであるべきです。 - コアコンテンツユニットを特定する:
<main>の内部で、ページのユニークで最も重要で自己完結したコンテンツを**<article>で囲みます。ページの唯一の<h1>**がこの<article>内にあることを確認してください。 - 補助コンテンツを特定する:
<article>の内部で、コアトピックに関連しているが主要な物語の一部ではないコンテンツ（例：アクセサリーの推奨、関連記事リンク、FAQ、著者情報）は、**<aside>**で囲みます。<article>の外部にあるが、まだ<main>の内部にあるコンテンツ（例：サイドバーナビゲーション、あまり関連のないプロモーション、人気記事リスト、メール購読フォーム）も、コアの<article>と区別し、その二次的な位置付けを示すために**<aside>**で囲むべきです。
このプロセスに従うことで、次のようなクリーンでシンプル、かつ検索エンジンフレンドリーなレイアウトを構築できます。
ほとんどのウェブページでは、この構造で十分です。重要なのは明快さとシンプルさです。過度に複雑にしないでください。
パート2：他のセマンティックタグでテキスト要素を「スパイスアップ」する
主要な構造タグに加えて、HTMLにはいくつかのインラインセマンティックタグがあり、テキスト断片の意味をより正確にマークアップするのに役立ちます。これもSEOとアクセシビリティに有益です。SeoSpeedupのコンテンツ生成ツールは、最適化された出力のためにこれらのタグを自動的に組み込むように設計されています。
しかし、まず最初に注意点：古い**<b>、<i>、<u>タグは、視覚的な太字、斜体、下線を提供するだけで、セマンティックな意味を持たず、SEOには何の影響もありません！**これらのスタイルはCSSで処理すべきです。
では、便利なセマンティックタグを見ていきましょう。
<strong>: 重要性を示します。検索エンジンは<strong>で囲まれたコンテンツを通常のテキストよりも重要だと考えます。控えめに使用してください。使いすぎると効果が薄れ、視覚的に邪魔になることがあります。<em>: 強調を示します。テキストを読み上げる際に、特定の単語やフレーズを強調する必要がある場合に使用できます。通常は斜体で表示されます。<mark>: ハイライトを示します。検索結果のキーワードをハイライトしたり、リストのおすすめオプションを強調したりするなど、テキストの一部に注意を引くために使用されます。通常、テキストに黄色の背景を追加します。<abbr>: 略語または頭字語を表します。title属性を使用して完全な用語を提供することができ、曖昧さを解消するのに役立ちます。例えば、「SEO」は<abbr title="Search Engine Optimization">SEO</abbr>と書くことができます。<figure>と<figcaption>:<figure>はイラスト、図、コードスニペットなどの独立したコンテンツ（通常は画像）を囲むために使用され、<figcaption>はそのキャプションや説明を提供します。これは画像SEOに非常に役立ちます。なぜなら、<figcaption>の内容は検索エンジンによって抽出され、画像と関連付けられ、画像検索結果に表示されることさえあるからです。<ul>と<ol>: 順序なしリストと順序付きリスト。厳密にはセマンティックタグではありませんが、検索エンジンに「これは関連アイテムのグループです」と明確に伝えます。**<ol>**は特にアイテムの順序を明示します。リスト形式のコンテンツは、検索エンジンにも理解されやすく、検索結果でリストとして表示される機会が増える可能性があります。<table>と<caption>: 表形式のデータを表示するために使用されます。テーブルは構造化データを提示する優れた方法です。テーブルが正しくマークアップされ（<thead>、<tbody>、<th>などを使用）、**明確な<caption>（テーブルのタイトル）**が付いている場合、検索エンジンはその内容を非常によく理解できます。<caption>が付いたテーブルは、文脈から外れてもその意味が明確です。この明快さは検索エンジンに高く評価され、フィーチャードスニペット（直接の回答やテーブルスニペットなど）の強力な候補となります。この例を見てください。
<caption>のおかげで、このテーブルが「2019年の英国の都市人口」に関するものであることがすぐにわかります。<th>（テーブルヘッダーセル）は各列の意味を明確に定義しています。このような構造化情報は、検索エンジンにとって非常に価値があります。
結論：明快さが鍵、レス・イズ・モア
覚えておいてください、ページ上で多すぎて整理されていないセマンティックタグを使うことは、まったく使わないことと同じくらい悪く、場合によってはそれよりも悪いです！
HTML5セマンティックタグの真の価値は次の点にあります。
- 検索エンジンに明確に伝えること：ページのどの部分がコアコンテンツで、どれが補足的または二次的なコンテンツであるか。
- 検索エンジンが曖昧さを解消するのを助けること：ページのトピックとコンテンツ構造をより正確に理解させる。
- リッチスニペットを取得する可能性を高めること：リストやテーブルなどの構造化コンテンツに対して。
最終的な目標は、検索エンジンがあなたのページをより信頼して理解し、その結果、より良いランキングを与えたくなるようにすることです。
ですから、セマンティックタグを使用する際は、簡潔で、正確で、目的を持ってください。レス・イズ・モアです。
リソース
- セマンティック要素に関する詳細な公式ドキュメントは、W3Schoolsのウェブサイトでご覧いただけます。
- ウェブページのセマンティックHTML5構造を視覚化したいですか？Semantic HTML5 Viewerをお試しください。
- ご自身のサイトのセマンティック構造を監査する準備はできましたか？**SeoSpeedup**の無料トライアルにサインアップして、数分で実用的な洞察を得ましょう。