SEOに効果的なHTMLタグの書き方

SEOに効果的な6つのHTMLタグの書き方とは？【2022年最新版】

2019年5月15日最終更新日:2021年2月2日

小関拓弥

HTMLタグの使い方やコーディングが間違っているからといって、Googleからペナルティを与えられることはありません。

GoogleのMatt Cutts氏によれば、現在公開されているWEBページには、HTMLの構文エラーがあるものが非常に多く、Googleのクローラーは文法エラーのあるHTMLでも判断できるようになっていると言います。

しかし、SEO対策において、正しくHTMLタグでコーディングすることは重要です。

当ページでは、HTMLタグで正しくコーディングするべき理由を解説した上で、Googleの検索アルゴリズムの観点からSEOで押さえておくべきHTMLタグの使い方を6つ紹介いたします。

「SEO対策において、HTMLコーディングで少しでもライバルに差をつけたい」
「どのようにHTMLタグを使えば、SEO対策に適したコーディングになるのか知りたい」

このようにお思いの方は必見です！

1 HTMLタグはなぜSEO対策に重要？Google検索アルゴリズムをチェック
2 SEO対策に効くHTMLコーディング方法｜Googleの検索順位アップに役立つ！
3 SEO対策を意識してコーディングしたHTML構文の例
4 まとめ： HTMLタグで正しくコーディングし、Googleとユーザー両方に価値を届けよう
- 4.1 SEOのライティングに力を入れるなら

HTMLタグはなぜSEO対策に重要？Google検索アルゴリズムをチェック

SEO対策で特定のページの検索順位を高めるには、HTMLタグの使い方にもこだわる必要があります。

Googleをはじめとする検索エンジンは、HTMLで記述されたコードを解読し、検索順位ページの内容を理解するもの。そのため、Googleがコンテンツを適切に認識し、評価するためにも、正しくHTMLでコーディングすることは非常に大切です。

先程、間違ったHTMLの記述でGoogleからペナルティを受けることはないと書きましたが、SEO対策においては、HTMLタグの最適化は欠かせません。

では、こうしたHTMLタグは、一体どのようにして使えばSEO対策に効果的なのでしょうか。ここではGoogleの検索アルゴリズムの観点から、最適なHTML構造を考えています。

（参考：NORTHCUTT、Google Ranking Factors）

Googleの検索アルゴリズムを紐解いていくと、HTMLタグについても記載がありました。特に、次のものには注意して、SEO対策に適したHTMLタグを設定するべきだと言われています。

SEO対策に効果的なHTMLタグチェックリスト

h1～h4に適度な量のキーワードを入れる
h1～h4が論理的な構造になっている
meta情報にキーワードを入れる
aタグのアンカーテキストを最適化
画像にalt属性を設定していること
リストタグの効果的な利用

こうしたHTMLタグのコーディングは、慣れてしまえば簡単なものばかり。実際にどのようにHTMLタグでコーディングしていけば良いのか、次項でコーディングの6つのポイントをご紹介いたします。

SEO対策に効くHTMLコーディング方法｜Googleの検索順位アップに役立つ！

①h1～h4タグの設定方法をチェック

HTMLタグの中でも、「h」と「数字」を組み合わせたものが見出しタグです。この記事にも「h1」から「h2」、「h3」までの見出しタグを設定しています。

では、「h1」から「h4」まで、それぞれのHTMLタグの役割をみていきましょう。

見出しHTMLタグの役割と例

h1：その記事の大見出し
（例：SEO対策のメリットとは？）
h2：見出し
（例：SEO対策をする3つのメリット）
h3：中見出し
（例：メリット①たくさんのユーザーがサイトに訪れる）
h4：小見出し
（例：ユーザーの訪問率を表す指標）

このように、「h1」タグで記事の大見出しを決め、その本文を構成する各見出しに「h2」～「h4」タグを配置していくという形で使われます。

見出しタグ（hタグ）を利用する場合は、そのタイトルを各HTMLタグで囲みます。上記の例で表すと次の通りです。

<h1>SEO対策のメリットとは？</h1>
<h2>SEO対策をする3つのメリット</h2>
<h3>メリット①たくさんのユーザーがサイトに訪れる</h3>
<h4>ユーザーの訪問率を表す指標</h4>

②h1～h4タグの適切な階層構造をチェック

見出しタグには適切な構造があります。

大前提として、「h1」タグは各コンテンツページに1つしか使ってはいけません。そして、「h2」から以下の見出しタグはHTMLの文法構造が決まっています。まずは、悪い例からご覧ください。

【見出しタグの悪い例】

  <h2>大見出し</h2>
  <h4>小見出し</h4>
  <h3>中見出し</h3>
  <h2>大見出し</h2>
  <h4>小見出し</h4>

このように、各見出しを適当に配置するのは避けましょう。必ず「h2の後にはh3」、「h3の後にはh4」というように設定していきます。

【見出しタグの良い例】

  <h2>SEO対策の3つのメリット</h2>
  <h3>メリット①たくさんのユーザーがサイトを訪れる</h3>
  <h4>ユーザーの訪問率を表す指標</h4>
  <h3>メリット②購買意欲の高いユーザーを集中的に集客できる</h3>
  <h3>メリット③広告費用をかけずに高い効果を期待できる</h3>
  <h2>SEO対策のデメリットについても知っておこう</h2>
  <h3>デメリット①成果まで時間がかかる</h3>
  <h3>デメリット②業者に依頼する場合は高額な費用がかかる</h3>
  <h2>まとめ</h2>

上記のように、必ずh2タグの後にはh3タグが続いています（h2タグ＞h3タグ）。また、h4タグを使う場面も、必ずh3タグの後に設置する形です（h3タグ＞h4タグ）。このように、記事の本文を構造的にコーディングしていくことで、ユーザーと検索エンジン共に階層構造を理解しやすくなり、SEO対策にも効果的となります。

③metaタグの設定で間接的なSEO対策に

SEO対策におけるmeta（メタ）情報とは、特定のタイトルやキーワード、記事の概要などを表す情報（メタデータ）のことでheadタグ内に記述されます。

特に、次の3つの要素はSEO対策に大きく関わるため、必ず覚えておきましょう。

SEO対策で重要なmetaタグ

title（メタタイトル）：
その記事のタイトル情報を30文字程度で表したもの
meta description（メタディスクリプション）：
その記事の内容を120文字程度で表した概要文
meta keyword（メタキーワード）：
その記事で扱う5つ程度のキーワード

この中で直接的なSEO効果があるのはタイトルタグ。タイトルタグの最適化はSEO内部対策の中でも最重要だと言っても過言ではないため、適切に設定しましょう。

一方で、メタディスクリプションとメタキーワードに直接的なSEO効果はありません。しかし、メタディスクリプションを適切に設定することは、CTR（ユーザーのクリック率）が上昇することに繋がり、WEBサイトのアクセス数に大きな影響を与えるため、こちらも適切な設定が必要です。

各メタ情報のHTMLタグは次のように記述します。

各メタ情報のHTMLタグ記述例

meta title：
<title>タイトル名</title>
meta description：
<meta name="description" content="概要文を120文字程度" />
meta keyword：
<meta name="keywords" content="キーワード①,キーワード②" />

上記を含め、SEO対策で重要なmetaタグについて詳しくは以下をご覧ください。

metaタグとは？SEO対策に重要な6つのmetaタグと最適な書き方

2019.05.16

このページでは、SEO対策で重要なmetaタグや、その効果的な書き方・設定方法について紹介しています。「SEOで上位表示させたい」「メタ情報の細かい書き方が知りたい」というサイト担...

④アンカーテキストにキーワードを入れ、リンクを最適化

リンクを設定するときは「a」タグ（<a>タグ、アンカータグ）を用います。

例えば、先ほどの「<h2>SEOのデメリットについても知っておこう</h2>」という見出しを設定して、見出し内でサイト内の別記事である「SEOのデメリットとは」というタイトルのコンテンツページを紹介していたとしましょう。

「<h2>SEOのデメリットについても知っておこう</h2>」という見出しの本文で、「SEOのデメリットとは」のコンテンツページを紹介する内部リンクを貼っておけば、興味を持ったユーザーがリ別のページにアクセスし、サイト内の回遊率が上がります。

こうした内部リンクや参照URLを記載するときに、下記のように「a」タグを使いましょう。

 <a href="https://〇〇〇/">関連記事：SEOのデメリットとは</a>

このように、アンカータグ（<a>タグ）のHTMLの間にテキストを入れ（アンカーテキストといいます）、ユーザーがそのテキストをクリックすると、「a」タグで設定したURL先のページに移動します。

⑤画像タグのalt属性にもキーワードを入れる

また、画像のHTMLタグ（imgタグ、イメージタグ）にもテキスト情報を設定しておきましょう。Googleは人間のように画像情報を認識できないため、画像をテキストに置き換えておくとSEOで効果が高くなります。この画像をテキストに置き換える際に使用するのは、「alt属性」です。

alt属性を使ったHTMLは次のようにコーディングしましょう。

 <img src="images/001.jpg" alt="画像を説明する文" width="500" height="300">

これでユーザーからは画像として見られ、Googleのクローラーにはしっかりとテキストとして認識されるようになります。

また、画像タグ（imgタグ）の「alt属性」は、音声読み上げ機能でコンテンツを読んでいるユーザーにとって「その画像が何を示しているものなのか」理解する手助けとなるので、SEO対策に限らず、imgタグの「alt属性」は必ず設定するようにしましょう。

さらに、Googleが発表したWEBページのUX指標「コアウェブバイタル」の中で特にCLS（Cumulative Layout Shift）については、HTMLのimgタグの「width/heiht属性」を設定しているかどうかが大きく関係します。

imgタグのwidth/heiht属性を設定していないとコンテンツ読み込み時に画像サイズ分のズレが生じてしまい、ユーザビリティを大きく損ねるので、HTMLのimgタグを設置するときはwidth/heiht属性も一緒に指定するようにしましょう。

⑥箇条書きはユーザーにもSEOにも効果的

SEOに効果的なHTMLでは、箇条書きに使われる「li」タグ（リストタグ）も覚えておくとよいでしょう。例えば、メリットを3つ端的に並べるときなどに便利です。

コンテンツ内に箇条書きがあれば、それだけ読者は本文を読みやすくなるため、SEOにも高い効果を発揮します。

また、「li」タグを使ってコーディングすることで、強調スニペット（フィーチャードスニペット）にも表示されやすくなります。

強調スニペットへの露出はアクセス数の増加に繋がったりと、2021年のSEOにおいて非常に重要となるため、箇条書きの際は「li」タグでの記述を行うようにしましょう。

箇条書きのHTMLは次の通りです。

    <ul>
    <li>メリット①～～</li>
    <li>メリット②～～</li>
    <li>メリット③～～</li>
    </ul>

すると次のように、黒点が文頭にくる箇条書きが表現されます。

メリット①～～
メリット②～～
メリット③～～

また、番号付きの箇条書きを設定する場合は、「ul」タグではなく「ol」タグを用いてコーディングします。

    <ol>
    <li>メリット①～～</li>
    <li>メリット②～～</li>
    <li>メリット③～～</li>
    </ol>

すると実際の表示は次のようになります。

メリット①～～
メリット②～～
メリット③～～

SEO対策を意識してコーディングしたHTML構文の例

SEOを意識したHTMLコーディングを利用して、実際に文章を記載してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>SEOのメリットとは？</title>
    <meta charset="UTF-8">
    <meta name="description" content="SEOについて3つのメリットを紹介します。また、デメリットについて知っておくことで、あらかじめリスクに備えておくこともできます。">
    <meta name="keywords" content="SEO,メリット,とは">
  </head>
  <body>
    <h1>SEOのメリットとは？</h1>
    <p>SEOのメリットを知っておくと、ご自身で運営されているWebサイトの検索順位が上昇し、ひいてはユーザーの流入するが増えることでしょう。次の画像はSEOを効果的に行った場合の検索結果と、SEOを行っていないページの検索結果です。SEOによって訪問者が増えることで、サイト上の広告クリック率も向上することは間違いありません。</p>
    <img src="https://〇〇〇/images/seo.JPG" alt="SEO対策の検索結果"   width="450 "height="250">
    <h2>SEOの3つのメリット</h2>
    <p>SEO対策を行うことで得られるメリットは、次の3点です。Webサイト運営者にとって大きな影響を及ぼすため、それぞれのメリットについて詳しく学んでいきましょう。</p>
    <ul>
      <li>メリット①たくさんのユーザーがサイトを訪れる</li>
      <li>メリット②購買意欲の高いユーザーを集中的に集客できる</li>
      <li>メリット③広告費用をかけずに高い効果を期待できる</li>
    </ul>
    <h3>メリット①たくさんのユーザーがサイトを訪れる</h3>
    <p>SEOメリットの1つ目は、今までより多くのユーザーの流入数が望めることです。...</p>
    <h3>メリット②購買意欲の高いユーザーを集中的に集客できる</h3>
    <p>メリットの2点目は、訪れるユーザーの中でも、特に購買意欲の高い人がアクセスしてくれやすい点です。...</p>
   ...
  </body>
</html>