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

SEO対策において、正しくHTMLタグでコーディングすることは非常に重要な施策の一つです。

正しい書き方で設定できれば、コンテンツの内容をGoogleなどの検索エンジンへ適切に伝えることができ、SEO効果を高めることができます。また、ユーザーにとっても利便性の向上につながるため、Web担当者ならしっかり理解しておきたいところです。

当ページでは、HTMLタグで正しくコーディングするべき理由を解説した上で、SEOで押さえておくべきHTMLタグの使い方を10個ご紹介いたします。

「どんなHTMLタグを使えば、SEO対策に効果的なのか知りたい」
「SEO対策に効果的なHTMLコーディングでライバルに差をつけたい」
このようにお思いの方は必見です！

HTMLタグはなぜSEO対策に重要？

結論、HTMLタグを最適化することはSEO評価を高める重要な施策になります。Googleをはじめとする検索エンジンは、HTMLで記述されたコードを解読し、検索順位を決定するもの。

もし間違った書き方でHTMLコードを記述すると、検索エンジンにWebページの内容が適切に伝わらず、上位表示することが難しくなります。

つまり、Googleがコンテンツを適切に認識し、SEO評価するためにも、正しいHTMLタグでコーディングすることが非常に大切になります。

また、HTMLタグを最適化することはユーザーの観点からも大切な施策になります。Googleはユーザーファーストを最重要としており、ユーザーの利便性を高めたコンテンツをSEO評価しています。

この利便性にはデザイン面のUX/UI観点も含まれており、HTMLタグで記述されたWebページはユーザーにとって見やすいものとなります。テキストだけで書かれたWebページより、表やリストで装飾されたWebページの方が読みたいと思いますよね。

つまり、HTMLタグが正しく書かれているページはユーザー動向の向上につながり、SEO評価を高めることにつながります。

このように、HTMLタグは検索エンジンとユーザーの双方にとってメリットをもたらすことができます。

続いては、どんなHTMLタグでコーディングしていけば良いのかをご紹介いたします。

SEOで最重要な「title」タグ

まずはSEOの中でも一番重要とされるtitle（タイトル）タグについてご紹介します。

「title」タグにはコンテンツの内容を表す役割を担っており、検索結果の順位を左右する非常に重要なHTMLタグです。

また、設定したタイトルは検索結果画面に表示され、ユーザーのクリック率に大きく影響します。

titleタグを使ったHTMLの書き方は下記になります。

<title>コンテンツのタイトル</title>

書き方自体は簡単ですが、SEO評価を高めるポイントがいくつかあるのでご紹介します。

上記の内容を盛り込みながら、SEO効果を高めるタイトルを設定していきましょう。

更に詳しく、SEOに強いタイトルの付け方を知りたい方は下記をチェックしてみてください。

SEOに効果的な「h1～h4」タグ

続いてはh1～h4タグについてご紹介します。

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

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

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

中でも「h1」タグは検索エンジンにWebページの主題を伝えたり、重要性を示すタグのため、SEOにおいても重要な役割を果たします。SEO評価を高める書き方のポイントとしてはtitleタグ同様に、対策キーワードを含めるようにしましょう。

見出しタグ（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タグ）。

このように、Webページの本文を構造的にコーディングしていくことで、ユーザーと検索エンジン共に階層構造を理解しやすくなり、SEO対策にも効果的となります。

Webページの内容を伝える「meta（メタ）」タグ

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

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

meta descriptionとmeta keywordに直接的なSEO効果はありません。

しかし、meta descriptionを適切に設定することは、CTR（ユーザーのクリック率）が上昇することに繋がり、WEBサイトのアクセス数に大きな影響を与えるため、間接的なSEO効果があります。

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

更に詳しく、SEO対策に効果的なmetaタグにを知りたい方は下記をチェックしてみてください。

リンク設定の「a」タグ

「a」タグ（<a>タグ、アンカータグ）とは、内部リンクや外部リンクを作成する際に使用されるHTMLタグのこと。

例えば、先ほどの「<h2>SEOで最重要な「title」タグ</h2>」という見出しを設定して、見出し内でサイト内の別記事である「SEOに強いタイトル」について書かれたWebページを紹介していたとしましょう。

こうすると、興味を持ったユーザーが別のWebページにアクセスし、サイト内の回遊率が上がります。 回遊率が向上することはSEO効果を高める施策につながります。

こうした内部リンクや参照URLを記述する際は、下記の書き方を参考に設定しましょう。

 <a href="https://〇〇〇/">SEOに関する〇〇</a>

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

また、アンカーテキストのキーワードにはなるべく対策キーワードを入れることがSEO評価を高めるポイントです。検索エンジンは遷移先ページと遷移元ページの関連性もSEO評価しているため、関連性のあるキーワードを使用することが効果的なSEO対策につながります。

画像設定の「alt（オルト）」タグ

「alt」タグとは、画像が表示されない際に代わって、画像の内容を説明するためのHTMLタグです。

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

altタグを使ったHTMLの書き方は下記になります。

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

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

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

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

箇条書きの「list（リスト）」タグ

SEOに効果的なHTMLでは、箇条書きに使われる「li」タグ（リストタグ）も覚えておくとよいでしょう。listタグとは、箇条書きや番号でリストを作成できるHTMLタグのこと。

例えば、SEOのメリットを3つ端的に並べるときなどに便利です。 コンテンツ内に箇条書きがあれば、本文を読みやすくなるため、SEOにも高い効果を発揮します。 また、「li」タグを使ってコーディングすることで、強調スニペット（フィーチャードスニペット）にも表示されやすくなります。

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

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

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

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

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

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

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

1. SEOメリット①～～
2. SEOメリット②～～
3. SEOメリット③～～

表作成の「table」タグ

「table」タグとは、表を作成する際に使用するHTMLタグです。

「table」タグもまた、適切に使用できればページの内容を検索エンジンにより正確に伝えることができるため、SEO効果を高めることが可能です。またユーザーにとっても情報を表として見やすくなるためユーザーの利便性を高めることにもつながります。

「table」タグを使ったHTMLの書き方は下記になります。

<table>
<tbody> 
 <tr>
    <td>「title」タグ</td>
    <td>検索結果画面に表示されるHTMLタグのこと</td>
    </tr>
<tr>
    <td>「h1～h4」タグ</td>
    <td>見出しを表すHTMLタグのこと</td>
    </tr>
<tr>
    <td>「meta」タグ</td>
    <td>Webページの内容を表すHTMLタグのこと</td>
    </tr>

「list」タグと同様に、tableタグが設定された内容は強調スニペットに表示される可能性があるため、SEOに効果的なHTMLタグと覚えておきましょう。

重複コンテンツを解消する「canonical（カノニカル）」タグ

「canonical」タグは、複数のコンテンツが重複している場合に、その中でどれが正規ページなのか検索エンジンに伝えるHTMLタグです。

SEO対策をしていると、気づかないうちに検索エンジンから重複コンテンツとみなされることがあります。

重複コンテンツとは同一または非常に類似したコンテンツが複数のページに存在することを指します。重複コンテンツが生じるとユーザーの利便性が低下するとともにSEO評価が分散さるという悪影響があります。

このようなSEOの低評価を回避するためにも、どのページが正規なのか検索エンジンへ伝える必要があります。そこで登場するHTMLタグを「canonical」タグと呼びます。

「canonical」タグを使ったHTMLの書き方は下記になります。

    <head>
    <link rel="canonical href="ページURL">
    </head>

ページURLについては正規（メイン）のページURLを記載します。

そして、上記のタグを正規ページと重複コンテンツページの両方のhead内に追加することで完了となります。

外部サイトの情報を引用する「blockpuote（ブロッククオート）」タグ

「blockpuote」タグとは外部サイトの内容を引用する際に使用するHTMLタグです。

「canonical」タグ同様、「blockpuote」タグを使用することで重複コンテンツと判断されることを避ける役割があります。

また、検索エンジンに対してページ内容の理解をサポートする際に役立つためSEO担当者は知っておきたいHTMLタグになります。

「blockpuote」タグを使ったHTMLの書き方は下記になります。

<blockpuote>
  <p>引用するテキスト</p>
    <cite>引用元のURL</cite>
</blockpuote>
 

ここでは、引用される文章を<p>タグ内に、引用元URLを<cite>タグ内に記述します。

強調を表す「strong（ストロング）」タグ

「strong」タグは、コンテンツ内で強調したいテキストをマークアップするためのHTMLタグです。ユーザーの見え方としてはstrongタグで囲まれたテキストが太字で表示されるようになります。

「strong」タグを使ったHTMLの書き方は下記になります。

<strong>テキストを入力</strong>

ただし、strongタグは過剰に使用すると、過剰SEOとみなされる可能性があり、SEOペナルティの危険性があります。そのため、必要以上の使用は避け、適切に使用することが重要です。

以上、SEO担当者が知っておきたいHTMLタグをご紹介しました。
続いてはSEO対策を意識したHTML構文の例をご紹介します。

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>SEOに効果的なHTMLタグとは？</title>
    <meta charset="UTF-8">
    <meta name="description" content="SEOに効果的なHTMLタグの種類や書き方を紹介します。">
    <meta name="keywords" content="SEO,HTML,タグ">
  </head>
  <body>
    <h1>SEOに効果的なHTMLタグとは？</h1>
    <p>SEOに効果的なHTMLタグを知っておくと、ご自身で運営されているWebサイトのSEO効果を高めることができ、ひいてはユーザーの流入するが増えることでしょう。次の画像はSEOを効果的に行った場合の検索結果と、SEOを行っていないページの検索結果です。SEOによって訪問者が増えることで、サイト上の広告クリック率も向上することは間違いありません。</p>
    <img src="https://〇〇〇/images/seo.JPG" alt="SEO対策の検索結果"   width="450 "height="250">
    <h2>SEOに効果的なHTMLタグの種類について徹底解説！</h2>
    <p>SEO対策を行う上でHTMLタグを知ることはWebサイト運営者にとって大切ですよね。適切な書き方で設定できればSEOに大きな効果があるため、HTMlタグの種類を詳しく解説していきます。</p>
    <ul>
      <li>「title」タグ</li>
      <li>「h1～h4」タグ</li>
      <li>「meta」タグ</li>
    </ul>
    <p>まずはSEOで最も重要なHTMLタグの「title」タグについてみていきましょう。...</p>
   ...
  </body>
</html>

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

まとめ： HTMLタグを正しくコーディングし、SEO評価を高めましょう

SEO対策においてHTMLタグを適切に用いてコーディングすることは、高い評価を得るためにも重要です。

今回お伝えした「title」タグや見出しタグ（h1～h4）、「list」タグを適切に記述し、その記事を読むユーザーにも検索エンジンにもメリットのあるWebページにしていきましょう。

また、今回お伝えしたHTMLのコーディングが面倒という方には、世界で1番使われているCMSである「WordPress（ワードプレス）」の「ビジュアルエディター」機能がおすすめです。

WordPressのビジュアルエディターを使えば、HTMLコーディングなしで記事を書くことができるため、初心者でもサイトの運営がしやすくなるでしょう。

本記事を読んでいただき、HTMLタグを適切に使用し、SEO対策に役立て頂けますと幸いです。

今回ご紹介したHTMLタグ以外にも、より詳しくSEO対策について知りたいという方は下記ページも併せてお読みください。

SEOのライティングに力を入れるなら

htmlタグのSEO対策はとても重要ですが、SEO対策において最も重要なのはコンテンツです。htmlタグ以外にコンテンツ作成に力を入れたいという企業さまは当社開発のSEOライティングツールもぜひご活用ください。