SEOに有効なHTMLタグ10選｜書き方のポイントを解説！

Webページを記述する時に必要となるHTMLタグ。その中にはSEO対策にとっても重要になるものがいくつもあります。

 

しかし、100以上あるHTMLタグのうち、どれがSEOに対してどのような効果を持っているか、なかなか把握しきれない人も多いのではないでしょうか。

 

そこでこの記事では、SEO対策で知っておきたいHTMLタグについてご紹介します。SEOとHTMLタグの関係を理解すれば、より効果的なSEO対策を図ることができるでしょう。

 

SEOでHTMLタグが重要な理由

HTMLとは、「Hyper Text Markup Language」の略で、Webページの構造を指定するための言語です。タグと呼ばれる「<」と「>」でくくった記法を用いて記述され、たとえば見出しやリンク、画像の表示などはHTMLのタグを使って指定されます。

 

SEOでHTMLタグが重要なのは、次の二つの理由からです。

 

一つ目は検索エンジンがコンテンツの構造を理解するのに使われるためです。たとえば、タイトルや概要、画像の説明などを検索エンジンがHTMLタグから読み取り、そのページが何について書かれているのかを判断します。

 

そのため、検索エンジンが正しくWebページの構造を把握できるようにHTMLタグを最適化すれば、Webページの高評価につながります。

 

二つ目は、HTMLタグはWebページの見た目を決める見出しや文字の色と装飾などを決める要素の一つだからです。

 

HTMLが正しく記述されていないページは表示がずれてしまう場合もあります。そのようなページはユーザーにとって使いにくく、SEO的にも悪影響が出てしまいます。

 

このような理由から、HTMLタグをうまく使うことがSEOにとって重要と言えるのです。

 

SEOに有効なHTMLタグ10選とその書き方

HTMLタグはSEOにとって重要ですが、100種類以上もあるHTMLタグのすべてが同じ程度の重要性を持つわけではありません。もちろん中には影響の大きいタグもあれば、小さいものもあります。

 

そこで、以下ではとくにSEO対策をする上で覚えておきたいHTMLタグを10種類選んでご紹介します。

 

titleタグ

titleタグは、Webページのタイトル（トップページなら、そのサイトのタイトルの場合もあります）を定義するHTMLタグで、ブラウザのタイトルバーなどに表示されます。

 

titleタグはHTMLタグの中でもとくにSEOにとって重要です。Webページの内容を端的に表しているため、検索エンジンが重視するポイントの一つになるからです。

 

さらに、実際に検索した時に結果として表示されるので、タイトルの内容がクリック率を左右することにもなります。

 

titleタグはHTMLファイルの先頭、headタグの中に記述しましょう。書式は以下の通りです。

 

<title>サイトやページのタイトルをここに書きます</title>

 

titleタグの間に含められるのはテキストだけで、タグは無視されます。

 

titleタグの書き方のポイント

titleタグの書き方のポイントは以下の通りです。

 

・文字数を30文字程度にする

・キーワードをなるべく前に入れる

・興味を引くタイトルにする

 

検索エンジンでは検索結果を簡潔に表示するため、長いタイトルはカットされてしまいます。

 

表示される文字数はデスクトップPCの場合は30文字程度、スマホの場合は30～40文字程度です。どちらでもカットされにくいように、文字数は30文字程度までにすると良いでしょう。

 

タイトルの中にSEOのメインキーワードはもちろん、関連するキーワードを入れた方がそのワードでも評価されやすくなります。また、SEOのキーワードはなるべくタイトルの前半、つまり左側にある方がユーザーの目につきやすくなります。

 

もちろん、コンテンツの内容を表しつつ、思わずクリックしたくなるような興味を持たせるタイトルにすることも重要です。

 

hタグ

hタグの「h」は「heading」の略で、セクションの見出しを定義するHTMLタグです。記述方法は「<h1>見出し</h1>」というようになり、h1～h6までの6種類の中から該当する見出しを設置します。

 

最も重要な見出しにh1を使い、次に重要なものにh2、以下h3、h4と使っていくとコンテンツが階層構造になり、何が重要かなど、優先順位がユーザーにとってわかりやすくなります。

 

<h1>大見出し</h1>

<h2>見出し</h2>

<h3>中見出し</h3>

<h4>小見出し</h4>

 

そのままでもh1が最も字が大きく、hタグの数字が大きくなるにつれて小さな字で表示されます。しかし、ブラウザによって表示が異なるので、スタイルシートで調整した方が良いでしょう。

 

また、見出しはページの内容を端的に表す要素のため、タイトルと並んでSEOでも重要なタグとされています。簡潔でわかりやすい見出しをつけるように心がけましょう。

 

hタグの書き方のポイント

・h1は1ページに一つにする

・階層構造を意識する

・キーワードを入れる

 

HTMLの仕様上はh1タグをページ内でいくつ使ってもかまいません。しかし、最も重要な部分に使う見出しですから、なるべく一つだけにした方が良いでしょう。その方がユーザーと検索エンジンの両方にとって、そのページで何が重要なのかわかりやすくなります。

 

また、h1の下位にはh2、その下にはh3と、hタグが順に階層構造になるように使った方が、コンテンツの構成がわかりやすくなります。たとえば、h1の後がすぐにh3となるより、h2の見出しがきた方が良いでしょう。

 

つまり、

 

<h1>見出し1</h1>

<h3>見出し2(h3になっている)</h3>

<h2>見出し3</h2>

 

とせずに

 

<h1>見出し1</h1>

<h2>見出し2(h2の方が良い)</h2>

<h3>見出し3</h3>

 

とすべきです。

 

さらに、hタグは検索エンジンがそのコンテンツの内容を判断する時に重視する要素の一つであるため、キーワードや関連キーワードを入れた方がSEO的には有利となります。

 

metaタグ

metaタグは、headタグの中に配置し、そのページ全体のさまざまな情報を記述するためのタグです。たとえば、ページの文字コードはmetaタグを使って指定できます。

 

metaタグで指定できる情報のうち、SEOで重要となるのはdescriptionです。descriptionはそのページの概要を記述し、検索エンジンが読み込んで検索結果画面上に表示することがあるため、SEO効果が期待できます。

 

descriptionの書き方は以下の通りです。

 

<meta name=”description” content=”ページの概要” />

 

以前はmetaタグで記述できる情報としてkeywordsも重要でしたが、現在はGoogleが公式で利用を否定しており、SEOに対する効果は低いと考えられています。

 

metaタグにおける「description」の書き方のポイント

metaタグのdescriptionでは以下のことに気をつけなければなりません。

 

・100～120文字程度で簡潔にまとめる

・前半にキーワードなどを入れる

・誰にとって利益があるかを書く

 

descriptionは検索エンジンが結果を表示する時に使われることがあるため、検索ユーザーの興味を引くようなものにするとクリック率が上がる可能性があります。

 

表示される文字数はPCで130文字程度、スマホで80文字程度のため、100～120文字程度でまとめ、とくに前半部分に重要なキーワードなどを入れると良いでしょう。

 

また、たとえば「HTMLタグに興味のある方へ」といった文章を入れ、記事の対象をはっきりさせるのもおすすめです。ユーザーが自分の望んでいる情報があるか確かめやすくなり、クリック率の上昇につながります。

 

aタグ

aタグは、アンカータグとも呼ばれるリンクを設置する時に使うタグです。aタグでは「<a>」「</a>」の間にリンクを設置するテキストを、「href」という属性にリンク先のURLを記述します。

 

<a href=”リンクのURL”>リンクを設置するテキスト</a>

 

また、「target」という属性を指定してリンクの開き方を指定することもできます。指定しない場合はそのまま同じウィンドウでページが表示されますが、

 

<a href=”リンクのURL” target=”_blank”>リンクを設置するテキスト</a>

 

とすると、リンク先が別のウィンドウで開きます。

検索エンジンはこのaタグの文章も読み取り評価しているので、SEOで重要なタグの一つです。

 

aタグの書き方のポイント

aタグを使う時にSEOの観点から気をつけたいポイントは、以下の通りです。

 

・テキストにはキーワードを含める

・SEOの評価をされたくないリンクにはrel=”nofollow”を使う

 

検索エンジンはリンクのテキストの内容を使って、リンク先のページを評価しています。aタグのテキストは、なるべくリンク先の内容に関連していることが望ましいです。さらにSEO対策したいキーワードをそのテキストに入れた方が良いでしょう。

 

また、検索エンジンはリンク先のページの評価で、リンク元の評価を決める場合があります。たとえば、悪質なサイトにリンクをすると、リンク元の評価も下がる可能性があるのです。

 

もし、何かの理由でやむを得ずそのようなサイトにリンクする場合は、以下のようにaタグに「rel=”nofollow”」を加えると、検索エンジンで評価されることを防げます。

 

<a href=”リンクのURL” rel=”nofollow”>リンクを設置するテキスト</a>

 

altタグ

altタグは、画像を表示するimgタグや、データの入力を促すinputタグで画像を表示する時に使われます。

たとえば、imgタグでは

 

<img src=”画像ファイルのURL” alt=”画像の説明”>

 

となり、inputタグの場合は以下のように使います。

 

<input type=”image” alt=”画像の説明” src=”画像ファイルのURL”>

 

このように、altタグで画像の説明を入れると、読み上げソフトで再生されます。画像を視覚的に理解できない人でもわかりやすくなり、アクセシビリティが改善するのでぜひ入れた方が良いでしょう。

 

また、通信状態が悪く画像の読み込みに時間がかかる場合には、altタグで指定した説明文が表示されるため内容がすぐにわかるようになります。

 

SEO対策の観点からは、画像の内容を検索エンジンに教えられるため、より正しくページの内容が評価されやすいというメリットがあります。

 

altタグの書き方のポイント

altタグを書く上で気をつけたいポイントは以下の通りです。

 

・簡潔な内容にする

・デザイン用素材の場合は空にする

・リンクで画像を使うなら必ず入れる

 

altタグの内容があまりに長いと、どのような画像か想像しづらくなってしまいます。なるべく簡潔な内容を心がけましょう。

 

また、スペーサーや背景などの装飾に使う画像など、デザイン用に用意した素材の画像はそれ自体に意味がありません。そのため読み上げソフトで再生されても邪魔になります。デザイン用の素材の場合は、以下のようにaltに空文字列「””」を設定しましょう。

 

<img src=”画像ファイルのURL” alt=””>

 

また、画像にリンクを設定することは良くあります。この時、画像のaltタグにテキストを設定すると、リンク先のページの情報としてそのテキストが検索エンジンに解釈されます。リンクで画像を使う場合は、ぜひaltタグを設定しておきましょう。

 

canonicalタグ

canonicalタグは、サイトに重複したページがある場合、その中で検索エンジンに評価してほしいページを示すために使うタグです。

 

Webサイトでは、URLが異なるにもかかわらず内容が重複・類似するページがやむを得ず発生する場合があります。たとえば、wwwやindex.htmlの有無、httpかhttpsといった部分については、URLに違いがあっても同じページを表示することがあります。

 

この場合、被リンクが分散してしまうなど、検索エンジンにとっての評価が下がる可能性があるのです。

 

それを防ぐためにheadの中に以下のようなcanonicalタグを使用して評価させたいページを指定し、評価させたいページと重複したページの両方に記述しましょう。これにより、重複ページのSEO評価を評価させたいページに集約することが可能となります。

 

<link rel=”canonical” href=”評価させたいページのURL”>

 

canonicalタグの書き方のポイント

・URLは相対パスではなく絶対パスにする

・1ページに一つにする

・301リダイレクトの使用も考慮する

 

canonicalタグに記述するURLは相対パスにするとhttpやhttps、wwwの有無などの情報が入れられないため、絶対パスで記載することが大切です。具体的に言うと、「/def/ghi.html」といった省略した記法ではなく、「https://abc.co.jp/def/ghi.html」と書きましょう。

 

また、同じページにcanonicalタグを複数設定すると、検索エンジンがどちらを評価すれば良いかわからなくなります。canonicalタグの記載は1ページにつき一つだけにしてください。

 

さらに、重複コンテンツを防ぐ方法として、HTTPステータスコードを使った301リダイレクトで転送する方法があります。この方がユーザーに重複したページを無意味に表示しないため、可能なら301リダイレクトを使うようにしましょう。

 

しかし、サーバーやCMS（Webサイトを管理するシステム）の設定などで使えない場合や動的ページなどでは使いにくい場合もあるため、canonicalタグとうまく使い分けることが必要です。

 

strongタグ

strongタグは、とくに重要性の高いテキストを強調するために使うタグです。たとえば、

 

<strong>とくに強調したいテキスト</strong>

 

とすると「とくに強調したいテキスト」の部分が太字で表示されます。

 

ユーザーにとってコンテンツのどの部分が重要なのか一目でわかるため、うまく使うと記事が理解されやすくなるのがメリットです。また、検索エンジンに重要な部分を伝えることもできます。

 

ただし、太字にするためのタグではないことには注意してください。

strongタグは緊急性がある場合や重大な内容を含むテキストに使うことを想定されたタグです。単にテキストの一部を太字にする場合は、以下のようにbタグを使うと良いでしょう。

 

<b>太字にしたいテキスト</b>

 

strongタグの書き方のポイント

strongタグを書く時のポイントは以下の通りです。

 

・使いすぎない

・見出しには使わない

・他の強調を表すタグと使い分ける

 

strongタグを何度も使うと、逆に重要な場所がわからなくなります。そのため、1ページに1～3か所ぐらいにとどめておきましょう。

 

また、hタグで囲まれた見出しはすでに強調したい部分です。そのため、hタグ内ではstrongタグを使う意味はありません。

 

strongタグ以外にも

 

・bタグ : 単に太字にする

・emタグ : 斜体にして強調する

・lタグ : 単に斜体にする

 

といった、強調を表したり文字のスタイルを変えたりするタグがあります。うまく使い分けて、どこが重要なテキストなのか区別しやすいようにしましょう。

 

listタグ

listタグは、文章を読みやすくするために箇条書きをつくる場合に使うタグです。順序つき、順序なしの箇条書きができます。順序なしの場合はulタグを使い、書式は以下のようになります。

 

<ul>

<li>箇条書きしたい項目1</li>

<li>箇条書きしたい項目2</li>

<li>箇条書きしたい項目3</li>

</ul>

 

この場合、各項目の先頭にデフォルトでは黒丸が入ります。

順序ありはolタグで囲みます。

 

<ol>

<li>箇条書きしたい項目1</li>

<li>箇条書きしたい項目2</li>

<li>箇条書きしたい項目3</li>

</ol>

 

この場合、各項目の先頭にデフォルトでは通し番号が入ります。

箇条書きは情報が整理され、ユーザーにとって内容が理解しやすくなるというメリットがあります。

 

また、Googleの検索結果で上部に表示される強調スニペットにも表示されやすくなり、アクセスの増加が見込めるためSEO的にも重要です。

 

listタグの書き方のポイント

listタグを使う時は以下のようなことに注意しましょう。

 

・olタグやulタグの直下は必ずliタグのみを使う

・typeを使うと黒丸や番号をアレンジできる

 

olタグやulタグの直下にはliタグだけしか入れられません。しかし、liタグの中なら使えるため、項目にリンクを設定するような場合には注意してください。

 

箇条書きの各項目の先頭に表示される黒丸や番号（リストマーカー）はtypeを使って変更できます。たとえば、

 

<ol>

<li type=”A”>箇条書きしたい項目1</li>

<li type=”A”>箇条書きしたい項目2</li>

<li type=”A”>箇条書きしたい項目3</li>

</ol>

 

とすると先頭の文字がA、B、Cと自動で変わっていきます。また、リストマーカーはCSS（Webページの見た目の装飾で使われる言語）のlist-style-typeプロパティでも変更可能です。

 

リストの見た目がわかりやすい方がユーザビリティは上がるため、ページの内容にあわせて必要なら変更すると良いでしょう。

 

tableタグ

tableタグは、表を作成する場合に使うタグです。さまざまな書式がありますが、簡単なものは以下のように記述します。

 

<table>

<tr>

<td>内容1</td>

<td>内容2</td>

</tr>

<tr>

<td>内容3</td>

<td>内容4</td>

</tr>

</table>

 

tableタグで表を作成すれば、情報が整理され複雑なデータもユーザーにとって見やすくなるのが利点です。

 

また、tableタグもlistタグ同様にGoogle検索の強調スニペットに表示される場合があります。そのため、適切に使えばSEO的な効果も期待できるでしょう。

 

しかし、検索エンジンが理解しにくい、読み上げソフトが対応できない場合がある、読み込みが遅い、といったデメリットもあります。多用は避けてlistタグなどと併用するのがおすすめです。

 

tableタグの書き方のポイント

tableタグを書く上でのポイントは以下の通りです。

 

・CSSなどでデザインを整える

・ヘッダ、本体、フッタを使い分ける

 

tableタグで作った表は、そのままでは罫線などが表示されません。何もない場所にテキストだけが並んでいる状態となり、読みにくくなってしまいます。CSSなどを使ってデザインを整えて見やすい表になるよう心がけましょう。

 

また、tableタグの表はthead、tbody、tfootのタグを使うとヘッダ、本体、フッタ部分に分けて記述できます。

 

それぞれに対してCSSでデザインを設定すればユーザーにとって見やすい表となり、検索エンジンに対しても表の構造が理解しやすくなるというメリットがあります。

 

blockquoteタグ

blockquoteタグは、他サイトで掲載されている文章を自サイトに掲載する時、引用文であることを明示するためのタグで、以下のような書式で使います。

 

<blockquote>

<p>ここに引用文を書きます。通常は何文か続けて書きます。</p>

</blockquote>

 

段落であることを明示するため、中の文章はpタグで囲うようにしましょう。

短い引用の場合はqタグが使われることがあります。この場合は、pタグは必要ありません。

 

<q>引用部分</q>

 

短い引用でもblockquoteを使えますが、qタグを使った方が簡潔に記述できます。

SEO対策として他のサイトの文章を利用する時、タグで囲んだ部分が引用だと検索エンジンに明示するために使いましょう。

 

H4:blockquoteタグの書き方のポイント

blockquoteタグで引用する時の注意点は以下の通りです。

 

・引用する時には必ず使う

・引用する部分が多すぎないようにする

・引用元のページを明記し、リンクを設置する

 

他のサイトの文章を引用する時には必ずblockquoteタグを使いましょう。でないと、検索エンジンに重複コンテンツと判断されて評価を下げられるかもしれません。

 

blockquoteタグを使ったとしても、記事の内容が引用ばかりになるとオリジナル記事とは判断されずに低評価を受ける可能性があります。引用は最低限のみにとどめておきましょう。

 

また、引用には出典元を明記するというルールがあります。別サイトのページを引用した時は、そのサイトを記載してリンクを設置するようにしましょう。

 

SEOの観点からcanonicalタグによるURLの指定先には注意が必要

canonicalタグは、内容が極めて似ているページが複数ある場合、その中で評価してほしいURLを検索エンジンに知らせるためのタグです。

 

うまく使えばSEO効果が見込めるタグですが、URLを間違ってしまうと評価してほしいページの順位が下がってしまうため、注意が必要です。

 

たとえば、CMSでの設定を間違って、canonicalタグの指定先URLを全ページで同じにしてしまうと、Googleにとってどのページを評価すればよいのかわからなくなり、正しい評価を得られなくなってしまいます。

 

また、canonicalタグのURLとして相対パスを指定すると、httpやhttps、wwwの有無などが指定できなくなります。

 

canonicalタグを記載する場合、正しいURLが絶対パスで記述されているかを確認するようにしましょう。

 

まとめ

HTMLタグは、サイトの構築だけでなく、SEO対策をする上でも重要な役割を果たします。

 

この記事でご紹介したように、HTMLタグの中でもSEOで重要になるタグは限られます。その使い方を覚えるのは難しくないため、すぐに実行できるSEO対策と言えるでしょう。

 

しかし、HTMLタグは数多くあるSEO施策の一つでしかありません。記事の品質を上げるなどの他の施策も重要です。

 

総合的なSEO対策の一つとしてHTMLタグをうまく利用すれば、サイトが検索エンジンからより評価されやすくなるでしょう。