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

2019年5月15日 2020年4月14日

Sohshi Yoshitaka

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

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

しかし、SEO対策において、正しくHTMLタグでコーディングすることは検索順位を上げるために必須です。

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

「SEO対策において、HTMLコーディングで少しでもライバルに差をつけたい。」

「どのようにHTMLタグを使えば、SEO対策に適したコーディングになるのか知りたい」

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

Contents

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

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タグの役割をみていきましょう。

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

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

見出しタグを利用する場合は、そのタイトルを各HTMLタグで囲みます。次の通りです。

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

②h1～h4の適切な構造

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

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

【見出しタグの悪い例】

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

③meta情報の設定で間接的なSEO対策に

SEO対策におけるmeta（メタ）情報とは、特定のタイトルやキーワード、記事の概要などを表す情報のこと。headタグ内に記述されます。特に、次の3つの要素はSEO対策に大きく関わるため、必ず覚えておきましょう。

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

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

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

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

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

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

リンクを設定するときは「a」タグを用います。

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

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

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

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

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

⑤altタグにもキーワードを入れる

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

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

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

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

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

SEOに効果的なHTMLでは、箇条書きに使われる「li」タグも覚えておくとよいでしょう。メリットを3つ端的に並べるときなどに便利です。コンテンツ内に箇条書きがあれば、それだけ読者は本文を読みやすくなるため、SEOにも高い効果を発揮します。

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

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

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

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

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

・メリット①～～

・メリット②～～

・メリット③～～

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

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

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

1.メリット①～～

2.メリット②～～

3.メリット③～～

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>

HTML構文の基本的な構造は上記の通りです。HTMLのコーディングをする際には是非参考にしていただければと思います。