HTMLのheadによるSEO対策

Webページのタイトルや説明は、検索した時の順位に大きく影響します。

本ページでは、HTMLのheadによるSEO対策について説明します。

HTMLのheadとは

HTMLのheadには、以下のような内容を記述します。

【HTMLのhead】
<head>
<meta charset="utf-8">
<meta name="description" content="ページの説明">
<link rel="stylesheet" href="css/style.css">
<title>ページのタイトル</title>
</head>

各記述の詳細は、HTMLのhead作成をご参照ください。

この中で、ページのタイトル部分に記述する内容と、ページの説明部分に記述する内容は、検索順位に大きく影響します。次からは、この2つの要素の記述方法について説明します。

ページのタイトル

ページのタイトルは、検索した時に以下のように大きく表示されます。

検索結果に表示されたタイトル

また、ブラウザで表示した時のタブ上に表示されますし、お気に入り(ブックマーク)に登録した際にタイトルで登録されます。このため、ページのタイトルはSEO対策にとって非常に重要です。

次からは、タイトルの付け方や、留意点などを説明します。

タイトルの付け方

トップページでは、一般的に以下のようなタイトルが付けられます。

  • サイト名 - サブタイトル
  • サイト名 | サブタイトル

サイト名に続けて、ハイフン(-)か縦棒(|)で区切って、サブタイトルを記述します。例えば、「キャンプ入門サイト - 初心者向けにわかりやすく解説！」などです。キャンプ入門サイトがサイト名、初心者向けにわかりやすく解説！がサブタイトルです。

トップページ以外では、一般的に以下のようなタイトルが付けられます。

  • ページタイトル - サイト名
  • ページタイトル | サイト名

例えば、テントの使い方を説明したページでは、「テントの使い方 - キャンプ入門サイト」になります。テントの使い方がページタイトルで、キャンプ入門サイトがサイト名です。

このタイトルの付け方は、多くのサイトで採用されています。

タイトルを付ける時の推奨と留意点

検索エンジン最適化（SEO）スターター ガイドでは、タイトルを付ける際は以下を推奨しています。

  • ページのコンテンツについて正確に記述する
  • 各ページに固有のタイトルを付ける
  • 簡潔でわかりやすいタイトルを使用する

避けるべき方法として、以下を挙げています。

  • ページのコンテンツと関連のないタイトルを選ぶ
  • 「無題」や「新しいページ 1」など、デフォルトのタイトルやあいまいなタイトルを使用する
  • サイトのすべてのページや多数のページにわたって 1 つのタイトルを使用する
  • ユーザーにとって役立たない極端に長いタイトルを使用する
  • titleタグで不要なキーワードを乱用する

検索した時のキーワードが、ページのタイトルに含まれていないと、上位表示は難しいと言えます。それだからと言って、ページの内容と合ってないタイトルを付けたりするのは、Needs Metの観点からも逆効果です。

検索した時に表示されるタイトルが違う

HTMLのtitleタグで記述したタイトルと、検索結果で表示される時のタイトルが異なることがあります。例えば、ページの内容の一部を抜き出して、タイトルとして表示することがあります。

また、「サイト名 - ページのタイトル」で記述した場合、「ページタイトル - サイト名」と修正して表示されることもあります。

このように、自動で変更してくれることもありますが確実ではないため、基本に沿ったタイトルを付けることが推奨されます。

タイトルの文字数制限

タイトルに文字数制限は明記されていませんが、検索した時には30文字程度で切られてしまいます。

このため、少なくとも重要な部分は30文字以内の部分に記述した方が良いと言えます。

ページの説明

ページの説明は、検索した時に以下のようにタイトル下に表示されることがあります。

検索結果に表示されたページの説明

これは、スニペットと呼ばれるもので、必ずしもmeta name="description"で記述した内容が表示される訳ではありませんが、ページの内容をうまく要約している場合はそのまま表示される可能性は高いと言えます。

次からは、ページの説明の書き方について説明します。

ページの説明を書く時の推奨と留意点

検索エンジン最適化（SEO）スターター ガイドでは、ページの説明を書く際は以下を推奨しています。

  • ページの内容を正確に要約する
  • ページごとに固有の説明を使用する

避けるべき方法として、以下を挙げています。

  • ページの内容と関連のないdescriptionメタタグを記述する
  • 「これはウェブページです」や「野球カードについてのページ」のような一般的な説明を使用する
  • キーワードだけを羅列する
  • サイトのドキュメントの内容をそのままdescriptionメタタグにコピー＆ペーストする
  • サイトのすべてのページや多数のページにわたって1つのdescriptionメタタグを使用する

検索した時のキーワードがページの説明に含まれていた方が、上位表示されやすくなります。それだからと言って、ページの内容と合ってないキーワードを羅列したりするのは逆効果です。

ページの説明のメリット

descriptionメタタグがなくても、検索結果にはページの内容から一部を抜粋してスニペットに表示してくれます。また、descriptionメタタグがあると検索順位で優位かと言えば、そうではありません。

しかし、ページの内容を正確に検索エンジンに伝えるというメリットはあります。

例えば、テントの使い方を説明したページで、テントのポールの立て方を説明していたとします。この時、文章の途中で「ランタンのポールは、テントから少し離れた所に立てます。」と説明していたとします。

この場合、「テント ポール」で検索するとこの文章がスニペットに表示される可能性があります。これを見た人は、テントのポールではなく、ランタンのポールについて説明していると思って、クリックしないかもしれません。

もし、descriptionメタタグで「テントの使い方を説明しています。ポールの扱い方なども写真入りで解説しています。」などと書いていれば、これがスニペットで表示される可能性が高くなります。つまり、ページの内容を正確に検索エンジンに伝えることで、検索した人にも正確な情報を提供できて、訪問者増加にもつながります。

descriptionメタタグの文字数制限

descriptionメタタグのテキストで、文字数の上限や下限はないと説明されていますが、検索結果で説明が完全に表示される程度の長さにすることが推奨されています。

パソコンで検索したときは130文字程度、スマートフォンで検索したときは80文字程度で切られます。このため、少なくとも重要な部分は80文字以内の部分に記述した方が良いと言えます。

その他の情報

head要素には、スマートフォンに対応させるためのビューポート設定、ファビコンを設置するための記述、SNSのためのOGP設定などもあります。それぞれについては、以下をご参照ください。