SEO対策に重要な8つのHTMLタグの書き方【2022年最新版】

SEO対策

2021.03.14 2022.01.06

SEO対策をするにあたって、ホームページのHTML構造の見直しは非常に重要です。

とはいえ、

『HTMLの書き方がよく分からない』
『SEOにどのような効果があるの？』
『HTMLタグはたくさんあり過ぎてなにが重要なのかが分からない』

そんな風に悩んでいませんか？

今回のコラム記事では、SEO対策に大きく関係する8つのHTMLをご紹介します。

あわせて、それぞれの書き方やSEO効果についても解説するので、HTML構造を最適化してGoogleから高い評価を獲得しましょう。

1. SEOにHTMLは関係している
2. SEO対策に重要な8つのHTMLタグの書き方
3. メタキーワードはSEO対策として効果がない？
4. SEO対策向け！HTML構文の例
5. まとめ

SEOにHTMLは関係している

HTMLは、SEO対策に大きく関係する要素のひとつです。

SEOの基本は、検索エンジンにホームページ内容と構造をどれだけ的確に伝えられるかが重要です。

HTMLでホームページの構造を作れば、正しく検索エンジンが理解できるので直接的にSEO効果をもたらします。

そのうえ、HTMLを使用すれば読者にとって「良質なコンテンツ」と認識されるので、間接的にもSEO対策に繋がるはずです。

SEO対策に重要な8つのHTMLタグの書き方

ここからは、SEO対策に大きく関係する下記の8つのHTMLタグについて解説します。

titleタグ
metaタグ
hタグ
canonicalタグ
リストタグ
aタグ
altタグ
pタグ

それでは一つずつ見ていきましょう。

titleタグ

title（タイトル）タグは、名前の通り各ページのタイトルとして設定します。

titleタグは、検索結果の一覧やページのトップに大きく表示されるので視覚的にも重要な要素のひとつです。

なお、titleタグは検索順位の評価に大きく関係するので適切に設定しましょう。

titleタグをHTMLソースに記述する方法は下記の通りです。

<title>SEOの基本となる「titleタグ」マニュアル</title>

タイトルタグを挿入する際のポイントを見ていきましょう。

タイトルタグの間のページタイトルを35文字程度に設定する
タイトルの内容と本文の内容を一致させる
ページの内容が分かるキーワードを入れる

なかでも、ページ内容と本文に相違があれば検索エンジンが混乱するので評価が下がってしまうケースもあります。

読者にとっても「このページは私の悩みを解決できそう」と期待してクリックしたのに、ページ内容がタイトルとマッチしていなければすぐにページを閉じてしまうでしょう。

検索結果の上位を狙うのであれば、最低限上記の3つのポイントを押さえておくべきです。

SEO効果を高めるタイトルタグについては、以下のコラム記事で解説中です。

SEO効果が期待されるタイトル(タグ)の文字数とは？

mataタグ

mata(メタ)タグは、head内に記述されSEOにとって大きな効果をもたらすHTMLタグの一つです。

ページの付加価値を表す情報だと認識している人が多く、サブのようなイメージを持っていませんか？

実はメタタグのなかでも、

「title(メタタイトル)」
「meta description(メタディスクリプション)」
「meta keyword(メタキーワード)」

上記の3つは、SEO対策に大きく関与するので押さえておくべきポイントです。

mataタグのSEO効果

metaタグを設置することで、検索エンジンがページの内容や構成を理解しやすくなります。

メタタグは、読者(ユーザー)がホームページに訪れた際に、直接見ることはほとんどありません。

ただし、メタディスクリプションは検索結果のタイトル直下に表示されるので、人目につく機会があります。

タイトルだけでなくメタディスクリプションの内容で読者にアピールできるので、興味を引く文章にすることが大切です。

▼スマホの場合は横にスクロールしてご覧ください

title(メタタイトル)	ページごとのタイトル、30文字前後
meta description(メタディスクリプション	ページの内容をひとまとめにした50～120文字程度の文章
meta keyword(メタキーワード)	ページごとのキーワード5つ程度

メタディスクリプションのSEO効果については、以下のコラム記事で解説中です。

ディスクリプションとは？SEO効果・文字数について解説

mataタグの書き方

まずは、メタタグの基本的な記述方法を見ていきましょう。

<html>
  <head>
    metaタグを記述する
  </head>
  <body>
  </body>
</html>

「metaタグを記述する」と記載されている部分にそれぞれのメタタグを挿入します。

続いて、SEO対策に大きく関わってくる3つのメタタグの記述方法を見ていきましょう。

①タイトルタグ

<title>タイトル名</title>

②メタディスクリプション

<meta content="概要文を50～120文字程度" name="description">

③メタキーワード: <meta name=”keywords” content=”キーワード1,キーワード2,キーワード3″>

たとえば、メタディスクリプションをHTMLコードに記述する場合には下記のようにherd内に挿入します。

<html>
  <head>
    <meta content="概要文を50～120文字程度" name="description">
  </head>
  <body>
  </body>
</html>

なお、適切にHTMLコードを記述できているかを確認する方法があるので確かめてみましょう。

確認したいページの上で右クリック
「ページのソースを表示」をクリック
右側にソースが表示されるのでhead内のHTMLを確認する

メタディスクリプションであれば、タイトルの直下に小さな文章で表示されているので検索ページを見れば確認できます。

hタグ

hタグは、ページの見出しの役割を果たすHTMLタグです。

h1～h6までの6段階あり、h1が最も重要度が高いため大見出しに使われます。

hタグの役割は以下の通りです。

h1：ページの大見出し(タイトル)
h2：見出し
h3：中見出し
h4：小見出し

「h1→h2→h3→h4→h5→h6」の順番に使うことで、検索エンジンがページの構成を理解しやすくなります。

hタグを使うことで得られる効果

hタグを使うことで、下記の3つのメリットがあります。

検索エンジン(クローラー)が記事の構成を理解しやすくなる
読者(ユーザー)がひと目見ただけで何について書かれている記事かが分かる
読者（ユーザー)にとって心地のいいサイトになり回遊率のアップや滞在時間が長くなる

Googleは「hタグの使用を間違えたからといって評価を下がることはないだろう。

しかし適切な構成は検索エンジンのクローラーにとって手助けとなる。」と述べています。

検索エンジンにとって読み取りやすいサイトは、必然的に上位に表示されるのでクローラーのために、hタグの適切な使い方を覚えておいた方がいいでしょう。

なお、読者(ユーザー)も見出しタグが整理されている方が視覚的に、ページの内容や構成を理解しやすいはずです。

読者(ユーザー)の滞在率と回遊率がアップすると良質なコンテンツと認識されて、検索結果の上位を狙えるでしょう。

hタグの書き方

hタグの書き方を良い例と悪い例にわけて解説していきます。

まずは、良い例から見ていきましょう。

<h1>HTMLタグはSEO効果があるの？</h1>
<h2>HTMLタグがもたらす2つのSEO効果</h2>
<h3>【効果①】検索エンジンにサイトの構成が適切に伝わる</h3>
<h3>【効果②】読者にとって読みやすいページになる</h3>
<h4>ユーザーの回遊率が上がる</h4>
<h4>ユーザーの滞在時間が長くなる</h4>

上記のように、h1→h2→h3…の順番通りに使用することが大切です。次に悪い例を見ていきましょう。

<h3>HTMLはSEOに効果的？</h3>
<h2>HTMLタグはSEO効果を発揮する2つの理由</h2>
<h1>【理由①】検索エンジンにサイトの構成が適切に伝わる</h1>
<h4>【理由②】読者にとって読みやすいページになる</h4>
<h3>HTMLの書き方の注意点は？</h3>

悪い例では、h1→h2→h3…の順番通りにhタグを使われていません。

h1タグやh2タグは、見出しの役割を果たすため大きく表示されます。

ですので、悪い例のようにhタグを使用するとユーザーの視覚的にもページの重要な部分が理解しにくくなるでしょう。

hタグを使う際のポイント

hタグを使う際に、押さえておくべき4つのポイントをお伝えします。

h1タグは1ページに1～2つ以内にする
必ずh1→h2→h3…といった順番を守って使う
hタグはフォントサイズの変更代わりに使わない
見出しタグには重要なキーワードを入れて簡潔にまとめる

上記の4つを理解できれば、SEOにとっても読者(ユーザー)にとっても良質なページを作成できるはずです。

SEO効果を高めるhタグ（見出しタグ）については、以下のコラム記事で解説中です。

SEO対策に効果的な見出しタグの書き方・使い方！

canonicalタグ

canonicalタグは、ひとつのホームページに類似記事が複数あった場合に、検索エンジンが混乱しないように重要な記事がどれかを伝える役割を果たします。

同じような記事が複数あれば、検索エンジンが評価を下げたり、ステマ行為だと勘違いをしたりしてしまうのです。

そのような事態を避けるためにも、canonicalタグの設置は必要となります。

canonicalタグを挿入することで「最も重要な記事」をGoogleの検索エンジンに伝えて、重複している記事を合算してSEO評価に反映してくれるのです。

たとえば、下記のような場合にはcanonicalタグを使った方がいいでしょう。

「httpとhttps」の記事が両方ともひとつのホームページに入っている
同じ商品でも色違いやサイズ違いなどがありそれぞれ一つのページを持っている
ユーザーのためにPC対応用とスマホ対応用に分けている

では、具体的にcanonicalタグをどのように記述するのかを解説します。

canonicalタグの書き方

canonicalタグを記述する際には、必ず内に入れるようにしましょう。

<link rel="canonical" href="https://○○○/">

○○○の部分に最も優先的に上位表示させたい記事のURLを挿入します。

上記のcanonicalタグをそのままコピーして、ホームページのHTMLコードに貼り付けるといいでしょう。

canonicalタグの正しい使い方については、以下のコラム記事をご覧ください。

canonical(カノニカル)タグとは？期待できるSEO効果と正しい使い方

リストタグ

リストタグは、箇条書きをする際に使用します。

検索エンジンのクローラーは、リストタグは通常の本文よりも重要度が高いと認識します。

ですので、重要なキーワードはリストタグを使用してメリハリのあるページに仕上げるといいでしょう。

なお、リストタグは検索エンジンに有効的なだけでなく読者(ユーザー)にも視覚的に見やすい記事だと認識されます。

読者にとって心地のいいコンテンツは、回遊率やクリック率、滞在率の向上に繋がり、結果的にSEO対策効果も期待できるのです。

リストタグの書き方

リストタグは「li」タグを使用します。

「数字あり」と「数字なし」の2つのパターンがあるので、文章に合う方を使用しましょう。

数字ありの記述方法

<ol>
<li>SEO効果　○○○</li>
<li>SEO効果　○○○</li>
<li>SEO効果　○○○</li>
</ol>

数字ありは、下記のように表示されます。

SEO効果　○○○
SEO効果　○○○
SEO効果　○○○

数字なしの記述方法

<ul>
<li>SEO効果　○○○</li>
<li>SEO効果　○○○</li>
<li>SEO効果　○○○</li>
</ul>

数字なしの場合は、下記のように表示されます。

SEO効果　○○○
SEO効果　○○○
SEO効果　○○○

箇条書きがあるコンテンツの方が、読者にとって読みやすくなります。

なお、重要度の高い文章だと判断されて、対策キーワードが高い評価を得られるのでSEOにも効果的です。

SEO対策を意識したリストタグの書き方

SEO対策を意識したリストタグの挿入方法は下記の通りです。

<html>
  <head>
    <meta charset="utf-8">
    <title>SEO対策を意識したリストタグの書き方</title>
  </head>
  <body>
    <h1>HTMLはSEOの効果をもたらす？</h1>
    <p>HTMLタグを挿入することで、検索エンジンのクローラーが記事の構成や内容を判断しやすくなります。そのうえ、読者が視覚的に記事を読みやすくなったり、重要な文章がひと目でわかるといったメリットがあります。結果的にSEO対策に効果をもたらすので積極的に使用した方がいいでしょう。</p>
    <h2>HTMLタグのSEO効果</h2>
    <p>では、HTMLが具体的にどのような効果を発揮するのかを見ていきましょう。ホームページ運営者様が押さえておくべきポイントを詳しく解説します。</p>
    <ul>
      <li>効果①検索エンジンがサイトの構造を理解しやすくなる</li>
      <li>効果②読者にとって心地のいいコンテンツだと認識される</li>
      <li>効果③回遊率・クリック率・滞在率の向上に繋がる</li>
    </ul>
    <h3>効果①検索エンジンがサイトの構造を理解しやすくなる</h3>
    <p>HTMLタグを挿入することで、検索エンジンが...</p>
    <h3>効果②読者にとって心地のいいコンテンツだと認識される</h3>
    <p>読者が重要な文章をひと目でわかったりといったメリットがあります。...</p>
  ...
  </body>
</html>

HTMLコードに記述する際には、適切な構造でなければクローラーが判断しにくくなります。

hタグの順番やリストタグの使用頻度などを考慮して、読者と検索エンジンに伝わりやすいコンテンツを作成しましょう。

aタグ

aタグとは「アンカー」の略で、文章や画像にリンクを貼り付けることができます。
記述方法は下記の通りです。

<a href="リンク先のURL" target="_blank">リンクテキスト</a>

リンク先のURLを記述すると、クリックすればリンク先に飛べるようになります。

なお、リンクテキストには、リンク先の対策キーワードを入れるといいでしょう。

「a」タグで囲った部分は青色に表示されるので、投稿した記事を見れば適切に反映されているかがひと目でわかります。

リンク先のURLをGoogleの評価対象にさせたくない場合には「nofollow」と記述すると評価の対象となりません。

<a href="リンク先のURL" rel="nofollow”>リンクテキスト</a>

「リンクの内容は読者にだけ伝えたい」という際には、上記のHTMLコードにそのまま貼り付けて使用しましょう。

altタグ

alt属性は、検索エンジンに画像の内容を的確に伝えるためにあるHTMLタグです。

Googleの検索エンジンがどのような画像であるかを判断できるようになるので、画像を挿入する際には必ずalt属性に設定しましょう。

また、alt属性を設置すれば通信速度が遅くて画像が表示されないときに、テキストで読者に画像の内容を伝えてくれます。

視覚障がい者は、読み上げ機能を使って音声でネットの情報を得るのですが、alt属性で画像を設定されていれば画像の内容まで読み上げてくれるのです。

つまり、alt属性を使用すれば、Googleが作りたい「すべての人に分かりやすいコンテンツ」を実現することができます。

altタグの書き方

altタグをHTMLソースに記述方法は下記の通りです。

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

「画像を説明する文章」は、対策キーワードを含めて簡潔に画像の内容をまとめることが重要です。

対策キーワードをムリに詰め込んだり、画像の内容と合致しない文章を記述したりすると検索エンジンの評価が下がってしまうので注意が必要です。

SEO効果を高めるaltタグについては、以下のコラム記事で解説中です。

alt属性とは？SEO対策に効果的な書き方

pタグ

pタグは、改行をする際に使用するHTMLタグです。

適度な改行は、読者がコンテンツの文章を読みやすくなるので、書き方を押さえておきましょう。

なお、検索エンジンにとってもコンテンツ内容や構造を理解しやすくなる利点があります。 pタグの書き方は下記の通りです。

<p>コンテンツの内容</p>

続いて、ほかのHTMLタグもあわせて記述した場合の構文例もまとめました。

<html>
  <head>
    <meta charset="utf-8">
    <title>pタグについて</title>
  </head>
  <body>
    <h1>HTMLはSEOの効果をもたらす？</h1>
    <p>HTMLタグを挿入することで、検索エンジンのクローラーが記事の構成や内容を判断しやすくなります。そのうえ、読者が視覚的に記事を読みやすくなったり、重要な文章がひと目でわかるといったメリットがあります。結果的にSEO対策に効果をもたらすので積極的に使用した方がいいでしょう。</p>
    <h2>HTMLタグのSEO効果</h2>
    <p>では、HTMLが具体的にどのような効果を発揮するのかを見ていきましょう。ホームページ運営者様が押さえておくべきポイントを詳しく解説します。</p>
  </body>
</html>

hタグやliタグなど、ほかのHTMLタグを使用しない場合は「pタグ」を挿入するといいでしょう。

メタキーワードはSEO対策として効果がない？

メタキーワードは、head内に記述するメタタグの一つです。

下記のように記述をするメタタグですが、近年SEO効果をもたらさないという説もあります。

<meta name="keywords" content="SEO,HTML,メタタグ,メタキーワード">

GoogleのWebマスター向けのオフィシャルブログでは「メタキーワードは検索順位を決定づける要素として利用していない」と述べています。

検索順位の評価付けに関係しなくなった理由としては、悪質に対策キーワードを盛り込むホームページ運営者が存在していたからだそうです。

対策キーワードを無理やり盛り込まずに適切なメタキーワードは挿入した方がいいでしょう。

なぜかというと、スパムを認識できるようになった今、Googleがメタキーワードで評価付けを開始する可能性が高いからです。

SEO対策向け！HTML構文の例

ここでは、SEO対策を意識したHTML構文をまとめました。実際に、HTMLソースを記述する際の参考にしていただけると幸いです。

<html>
  <head>
    <meta charset="utf-8">
    <title>SEO対策構文</title>
  </head>
  <body>
    <h1>HTMLはSEOの効果をもたらす？</h1>
    <p>HTMLタグを挿入することで、検索エンジンのクローラーが記事の構成や内容を判断しやすくなります。そのうえ、読者が視覚的に記事を読みやすくなったり、重要な文章がひと目でわかるといったメリットがあります。結果的にSEO対策に効果をもたらすので積極的に使用した方がいいでしょう。</p>
    <h2>HTMLタグのSEO効果</h2>
    <p>では、HTMLが具体的にどのような効果を発揮するのかを見ていきましょう。ホームページ運営者様が押さえておくべきポイントを詳しく解説します。</p>
    <ul>
      <li>【効果①】検索エンジンがサイトの構造を理解しやすくなる</li>
      <li>【効果②】読者にとって心地のいいコンテンツだと認識される</li>
      <li>【効果③】回遊率・クリック率・滞在率の向上に繋がる</li>
    </ul>
    <h3>【効果①】検索エンジンがサイトの構造を理解しやすくなる</h3>
    <p>HTMLタグを挿入することで、検索エンジンが...</p>
    <h3>【効果②】読者にとって心地のいいコンテンツだと認識される</h3>
    <p>読者が重要な文章をひと目でわかったりといったメリットがあります。...</p>
  ～以下省略～
  </body>
</html>

上記のようにhタグの順番やpタグ、liタグの挿入を適切に行うことで、読者と検索エンジンに分かりやすいコンテンツに仕上がります。

まとめ

今回のコラム記事では、SEO対策に効果的なHTMLを8つご紹介しました。

改めて、今回ご紹介した8つのHTMLは、以下になります。

titleタグ
metaタグ
hタグ
canonicalタグ
リストタグ
aタグ
altタグ
pタグ

それぞれの使用目的や記述方法、SEO効果を押さえて適切に使えるようにマスターするべきです。

SEOの基本は、検索エンジンにホームページの内容と構造をどれだけ的確に伝えられるかが重要です。

HTML構造を最適化することで、Googleからの評価が高まり検索結果の上位を獲得できるでしょう。