SEOで重要なHTMLタグの種類や設定方法を詳しく紹介
執筆者
マーケティングサポート「バンソウ」のメディア管理人
株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。
SEOに効果的なHTMLタグの種類や設定方法
HTMLタグを正しく設定することで、検索エンジンはサイトの内容を正確に理解できます。タグには多数の種類がありますが、titleタグやh1、h2といったhタグ、metaタグなどが最も重要です。
titleタグ
titleタグは、SEOでも最も重要な役割を担っており、titleタグに設定した内容は、ページタイトルとして検索結果にも以下のように表示されます。
検索エンジンが各ページの情報を読み取る際には、クローラーというロボットを使用しますが、クローラーがtitleタグやページ内の内容とキーワードとの関連性を判断し、ランク付けが行われます。
titleタグは検索順位にも大きく影響するだけでなく、検索結果を閲覧したユーザーがどのWebサイトにアクセスするかの判断材料ともなり、クリック率にも影響するため、対策キーワードをタイトル内に含めたり、コンテンツ内容を端的に表したりなどを心がけましょう。
なお、titleタグは以下のように設定します。
<title>タイトル</title>
適切なタイトルの付け方は、以下の記事でもご紹介しているので、ぜひあわせてご覧ください。
hタグ(見出しタグ)
hタグは、コンテンツ内に配置され、h1（大見出し）、h2（見出し）、h3（中見出し）、h4（小見出し）…と設定し、ページ上では以下のように表示されます。
コンテンツを作成する際は、初めにh2タグを設定し、h2配下にh3、h3配下にh4…といったかたちで階層を分けることで、コンテンツの情報を見やすく見出しごとに整理できるでしょう。
h2以降の見出しは上記のようにコンテンツの本文の作成時に使用しますが、大見出しであるh1タグは、クローラーがページ情報を適切に理解するために、ページ内容を端的に表す見出しタイトルを付ける必要があります。
なお、hタグはtitleタグと同様に、以下のようにhタグで設定したいテキストを囲みます。
<h1>見出しタイトル</h1>
<h2>見出しタイトル</h2>
hタグの階層構造
hタグを設定するときは、以下のルールを押さえておきましょう。- h1タグは1ページに1つまで設定可能
- h2タグの配下にはh3、h4タグの配下にはh5…のように、配下には1つ下の数字のタグを設定する
hタグの誤った設定例
hタグの誤った設定例は、次のとおりです。
<h2>見出しタイトル</h2>
<h4>見出しタイトル</h4>
<h3>見出しタイトル
<h5>見出しタイトル</h5>
<h2>見出しタイトル</h2>
このように、h2タグの配下にh4タグ、h3タグの配下にh5タグを設定するなど、タグの数字をばらばらに設定してはいけません。タグを設定する際は、h2＞h3＞h4の順番で設定することが大切です。
hタグの正しい設定例
hタグの正しい設定例は、次のとおりです。
<h2>見出しタイトル</h2>
<h3>見出しタイトル
<h4>見出しタイトル</h4>
<h3>見出しタイトル
<h3>見出しタイトル
<h4>見出しタイトル</h4>
<h4>見出しタイトル</h4>
<h5>見出しタイトル</h5>
<h2>見出しタイトル</h2>
上記のように、h2の配下にはh3、h3の配下にはh4…と、h2＞h3＞h4＞h5と並ぶように見出しを構成することで、ユーザーにとっても検索エンジンにとっても理解しやすいコンテンツを作成できます。
pタグ
pタグは、見出し内に含む文章を段落で分ける際に使用するタグです。見出し内の文章が長く続いてしまうと、ユーザーが読みにくいと感じ、最後まで読まずに離脱してしまう恐れもあるため、こまめにpタグで段落分けを行いながら読みやすい文章を心がけましょう。
pタグを使用する際は、以下のように各文章を囲みます。
<p>バンソウは、あなたのマーケティングサポーターです。</p>
<p>Webサイトでの集客を<br>より強化したい方は、ぜひご相談ください。</p>
このようにpタグで囲んだ文章は、通常の改行よりも間隔を空けて表示されます。
なお、改行を入れる際は、上記のように改行のタグとしてbrタグも使用できますが、brタグで改行を入れた場合はユーザーの使用デバイスによってはレイアウトに差が生じ、かえって文章が読みづらく感じる可能性もあるため、段落と段落の間に空白を入れたい場合は、brタグよりもpタグを使用することをおすすめします。
metaタグ
metaタグは、検索エンジンのクローラーにページ情報をよりわかりやすく伝える際に役立つタグで、<meta 〇〇="××" content="△△">のように記述します。metaタグではさまざまな要素を設定でき、文字コードの指定（meta charset）やインデックス登録の制御（noindex）、端末ごとの表示レイアウトの調整（viewport）などがあげられます。
なお、metaタグの中には、メタディスクリプションと呼ばれるコンテンツの情報を120字程度で説明する要素が含まれます。このメタディスクリプションは検索結果にタイトルとともに表示され、ユーザーのクリックを促せる可能性もあるため、コンテンツの内容を簡潔にまとめたメタディスクリプションを作成するとよいでしょう。
メタディスクリプションを設定する際は、以下のように記述します。
<meta name="description" content="メタディスクリプションの内容">
Googleがサポートしているそのほかのmetaタグの種類は、Google 検索セントラルの「Google がサポートしている meta タグと属性」をご確認ください。
aタグ(リンクタグ)
aタグは、リンクタグとも呼ばれ、テキストにリンクを張る際に使用します。自社サイト内の別のページに誘導する内部リンクや、外部サイトのページに誘導する外部リンクを活用することで、各ページのSEO評価を高められます。
なお、aタグでは現在開いているページでリンク先のページを開いたり、別タブでページを開いたりするなどの細かな設定も可能です。
aタグの詳しい活用方法については、以下の記事をご確認ください。
liタグ・ulタグ・olタグ
liタグは「list item」の略で、箇条書きを作成する際に使用します。liタグを使用する際は、ulタグやolタグで囲むことで、点の箇条書きや数字の箇条書きが作成できます。
箇条書きを活用することで、コンテンツ内で複数の項目をあげる際も視覚的にわかりやすくまとめられ、ユーザーにとって見やすいコンテンツを作成できるメリットがあります。
また、箇条書きで項目をリストアップすることで、Googleの検索結果の上部に特別な枠でコンテンツを抜粋する「強調スニペット」に表示されやすくなるといった効果も期待できるため、押さえておくとよいでしょう。
参照：強調スニペットとウェブサイト｜Google 検索セントラル
liタグを以下のようにulタグで囲って使用する場合は、中点（・）の箇条書きが作成できます。
■記述例
<ul>
<li>テキスト1</li>
<li>テキスト2</li>
</ul>
■表示例
また、liタグを囲む際にolタグを使用すると、箇条書きが1.2.3.…のように数字表記になります。
■記述例
<ol>
<li>テキスト1</li>
<li>テキスト2</li>
<li>テキスト3</li>
</ol>
■表示例
alt属性(altタグ)
alt属性（altタグ）は、コンテンツ内に画像を配置した際に、画像の内容を説明するテキストを付与する際に使用します。テキストは、画像を配置する際のimgタグ内である<img src="〇〇" alt="△△">の、△△の部分に記述します。
例えば、犬と遊ぶ子どもの画像を配置した際は、以下のように記述します。
■記述例
<img src="https:/xxxx.jpeg" alt="犬と遊ぶ子ども">
なお、設定するときは、上記の例のように画像の内容を簡潔に説明するテキストを心がけましょう。キーワードを乱用してしまうと、検索エンジンが画像の内容を正しく理解できなかったり、スパム行為と見なされたりする恐れがあります。
参照：わかりやすいファイル名、タイトル、代替テキストを使用する｜Google 検索セントラル
alt属性についての詳細は以下の記事でご紹介しているため、ぜひご覧ください。
blockpuoteタグ
blockpuote（ブロッククオート）タグは、外部サイトからコピー＆ペーストしたテキストを使用する際に、引用した内容であることを検索エンジンに伝える役割を持ちます。
blockpuoteタグを使わずにそのままテキストを引用した場合、外部サイトからのコピーコンテンツと見なされ、SEO評価が下がる場合があるため、引用箇所には必ずblockpuoteタグを使用しましょう。
blockpuoteタグを使用する際は、以下のように記述します。
<blockquote cite="https://～～">
<p>引用テキスト</p>
</blockquote>
なお、外部サイトからテキストを引用した際は、引用元のサイトの規定に合わせて引用元の明記も欠かさずに行いましょう。
canonicalタグ
canonical（カノニカル）タグは、1つのWebサイト内に重複するコンテンツが存在していた場合、SEO評価の分散を避けるために、どちらかのページに評価を集中させる際に使用するタグです。このように、重複と見なされるページを1つのページに評価を集めるよう設定することを「URLの正規化」といいます。
canonicalタグを使用する際は、重複するそれぞれのページのHTMLの<head>部分に、<link rel="canonical" href="〇〇">と記述し、〇〇の部分に正規化させて評価を集めるページのURLを入力します。
canonicalタグの記述例は、以下のとおりです。
<link rel="canonical" href="https://〜～（評価を集中させたいページのURL）">
このようにcanonicalタグでURLの正規化を行うことで、重複コンテンツで評価が分散することによる検索順位の低下を防ぎ、上位化を狙いやすくなります。
tableタグ
tableタグは、表（テーブル）を作成する際に使用するタグで、tableタグの中にtr要素やtd要素などを使いながら表の項目を含めることで、以下のような表を作成できます。
なお、上記の表をHTMLで記述する場合は、以下のとおりです。
<table style="width: 100%; border-collapse: collapse;
table-layout: fixed; border: 1px solid #99acc2;">
<tbody>
<tr>
<td style="width: 33.3192%; padding: 4px; border: 1px solid #99acc2;">A案</td>
<td style="width: 33.3192%; padding: 4px; border: 1px solid #99acc2;">B案</td>
<td style="width: 33.3223%; padding: 4px; border: 1px solid #99acc2;">C案</td>
</tr>
<tr>
<td style="width: 33.3192%; padding: 4px; border: 1px solid #99acc2;">DDD</td>
<td style="width: 33.3192%; padding: 4px; border: 1px solid #99acc2;">EEE</td>
<td style="width: 33.3223%; padding: 4px; border: 1px solid #99acc2;">FFF</td>
</tr>
</tbody>
</table>
tableタグは、表のに含める項目が増えるにつれて記述内容も複雑になるため、CMSを使用できる場合はCMS内のテーブル作成機能を使って作成すると、スムーズかつ正確に作業を進められるでしょう。
なお、以下では、文章の装飾に役立つHTMLタグをご紹介します。これらのタグを活用することで、ユーザーが読みやすい文章を作成できるでしょう。
strongタグ
strongタグは、タグで囲んだ箇所を太字にできます。strongタグで太字の箇所を作ることで、文章で重要性の高い部分を目立たせられるため、特に伝えたい内容をユーザーにわかりやすく示せます。
strongタグを設定する際は、以下のように記述します。
■記述例
<strong>バンソウ</strong>は、あなたのマーケティングサポーターです。
■表示例
また、strongタグで囲んだ箇所を太字だけでなく、赤色など文字色を変更したい場合は、以下のようにHTMLにstyle属性を追加することで、太字部分の文字色を変えられます。
■HTMLにstyle属性を追加する記述例
<strong style="color: red;">バンソウ</strong>は、あなたのマーケティングサポーターです。
■表示例
spanタグ
spanタグは、タグで囲んだ箇所の文字色・文字サイズの変更、背景色・下線の追加などの装飾が可能です。
先述した太字の装飾は、strongタグよりも、spanタグで<span style="font-weight:bold;">～</span>と記述するのが一般的です。
spanタグの活用方法は、以下の記事で詳しくご紹介しているため、ぜひご覧ください。
HTMLにおけるSEOの基本
ここまで、SEO対策を行ううえで役立つHTMLタグをご紹介しました。HTMLは、Webページを構築するためのマークアップ言語のひとつです。タグを用いてコンテンツを記述し、構造化されたデータを提供することができます。HTMLは、検索エンジンからの評価にも大きな影響を与えます。
HTMLでSEOを考慮したサイト構成
HTMLでSEOを考慮したサイト構成は、以下の要素を含みます。
- 正しいタグの使用
- 適切なキーワードの使用
- 内部リンクの最適化
- モバイルフレンドリーなデザイン
これらの要素を組み合わせることで、検索エンジンからの評価が高まり、上位表示される可能性が高くなります。
HTMLでのタグの役割と設定方法
HTMLでのタグの設定方法は、「SEOに効果的なHTMLタグの種類や設定方法」で説明したタグの種類別の設定方法と同様です。タグには多数の種類がありますが、titleタグやhタグ、metaタグなどが最も重要です。また、画像のalt属性やaタグも、SEOに影響を与えるため重要な要素となります。
HTMLでの画像タグの役割と設定方法
画像タグは、画像を表示するためのタグです。画像の適切なマークアップによって、検索エンジンは画像の内容を正確に理解し、適切な検索結果に表示することができます。画像のファイル名やalt属性にキーワードを含めることも、SEOに影響を与えるため重要です。
画像タグの設定方法は、以下のとおりです。
- imgタグを使用する
- src属性に画像のURLを指定する
- alt属性に画像の説明文を指定する
- キーワードを含める場合は、画像のファイル名やalt属性に含める
HTMLでのコンテンツの適切なマークアップ方法
HTMLでのコンテンツの適切なマークアップによって、検索エンジンはコンテンツの内容を正確に理解し、適切な検索結果に表示することができます。コンテンツを適切にマークアップするためには、適切なタグの使用や、見出しの階層関係の正確な設定が必要です。
よくあるHTMLタグの設定ミスとその対処法
検索エンジンからの評価を得るためにもHTMLタグを正確に記述することが大切です。最後に、HTMLタグのよくある設定ミスとその対処法をご紹介します。
複数のタグの重複や欠落がある場合
複数のタグが重複していたり、必要なタグが欠落していたりする場合は、検索エンジンからの評価が低下する可能性があります。この場合は、以下の対処法があります。
- 不要なタグを削除する
- 欠落しているタグを追加する
- タグの役割が重複している場合は、片方のタグを削除する
タグの文字数や内容に関するミス
タグの文字数が過剰だったり、内容が不適切だったりする場合も、検索エンジンからの評価が低下する可能性があります。この場合は、以下の対処法があります。
- タグの文字数を適切な範囲に抑える
- タグの内容を適切なキーワードや説明に置き換える
- タグの内容を詳細に記述する際には、hタグなどを併用して、階層的な情報構造を構築する
タグの設定方法に関する一般的なミス
タグの設定方法に関する一般的なミスとしては、タグの場所や属性の設定方法が誤っている場合があげられます。この場合は、以下の対処法があります。
- 正しいタグの設定方法について学習する
- タグの設定方法に関するドキュメントを参照する
- タグの設定方法についての専門家に相談する
HTMLタグの設定が反映されない場合
HTMLタグの設定が反映されない場合には、以下の対処法があります。
- タグの設定が正しくなされているかを確認する
- クローラーによるインデックスが完了しているかを確認する
- サーバーエラーや設定の不具合が原因となっている可能性があるため、システム管理者に相談する
まとめ
この記事では、SEOに効果的なHTMLタグの基本知識や設定方法、よくあるタグの設定ミスと対処法などについてご紹介しました。
HTMLタグは、SEO対策において非常に重要な要素です。正しく設定することで、検索エンジンからの評価が高まり、上位表示される可能性が高くなります。この記事を参考にして、HTMLタグの設定に必要な知識を身につけ、自社サイトのSEO対策に役立ててください。
