title タグの最適な文字数と書き方
title タグは、HTML の head に書くページの題名です。検索結果ではクリックできる青い見出し（タイトルリンク）として表示され、ブラウザのタブ名にもなります。SEO で最も影響の大きい要素の一つで、書き方の基本は「重要な語を前に、サイト名を末尾に、ページごとに固有の題名を付ける」ことです。全角で 30 字前後に収めると、末尾が切れずに表示されやすくなります。
title タグとは何ですか？
title タグは head 内に書くページの題名で、検索結果の見出しとブラウザのタブ名になります。Google はこれを「タイトルリンク」として検索結果の一番上に太字で表示し、利用者がクリックするかどうかを最初に判断する材料になります。ページ本文には表示されないため見落とされがちですが、検索での見え方を決める最重要の要素です。
title は、HTML の <head> の中に 1 つだけ置く要素です。ページ本文には現れないため、 作っている本人には普段見えません。しかし利用者が最初に目にするのは、多くの場合この title です。使われる場面は主に 3 つあります。
- 検索結果の見出し — Google がクリックできる青い「タイトルリンク」として一番上に表示する
- ブラウザのタブ — 複数タブを開いているとき、どのページかを見分ける名前になる
- 共有・ブックマーク — SNS で共有したときやお気に入り登録したときの初期タイトルになる
最適な文字数は何文字ですか？
全角で 30 字前後を目安にします。検索結果に表示できる幅には限りがあり、長すぎると末尾が「…」で省略されて肝心の語が見えなくなります。厳密な文字数上限ではなくピクセル幅で切れるため、30 字は絶対の基準ではありません。重要な語を前半に置いておけば、末尾が切れても意味が伝わります。短すぎて内容が分からないのも避けます。
よく「32 文字まで」と言われますが、Google が省略するかどうかは文字数ではなく表示幅（ピクセル）で決まります。 同じ文字数でも、全角の多い日本語は早く切れ、英数字なら長く入ります。だから「◯文字以内」は目安にすぎません。大事なのは、切れても困らない順番で並べることです。
| 長さの傾向 | 検索結果での見え方 | 評価 |
|---|---|---|
| 全角 30 字前後 | 末尾まで表示されやすい | 読みやすい（目安） |
| 長すぎる | 末尾が … で省略される | 重要語が消えると不利（NG） |
| 短すぎる | 全部表示されるが内容不足 | クリック理由が伝わらない（弱い） |
どう書けばいいですか？
そのページを最もよく表す語を前方に置き、サイト名は末尾に回し、ページごとに固有の題名を付けます。利用者が検索する言葉と、ページの中身が一致していることが第一です。区切りは全角の縦棒やハイフンが一般的で、「ページ名 | サイト名」の形が読みやすくなります。誇張や煽りではなく、中身を正直に要約した題名がクリック後の満足につながります。
原則はシンプルで、「そのページを最もよく表す語 → サイト名」の順に並べることです。利用者が検索する言葉と、 ページの中身が一致していれば、クリック後の満足も高くなります。区切り文字は縦棒（｜）やハイフン（-）が一般的です。
<!-- head 内に 1 つだけ置く。ページの中身を前方に、サイト名を末尾に -->
<head>
<title>title タグの書き方｜サイト総合診断</title>
</head>
<!-- ★ 全ページ同じ title（NG）。どのページも区別がつかない -->
<title>サイト総合診断</title>
<!-- ★ キーワード詰め込み（NG）。Google も避けるよう明記している -->
<title>SEO 対策 東京 格安 ホームページ制作 集客 上位表示</title>このサイトのような Next.js（App Router）では、title を JSX に直接書かず、metadata から出力します。こうすると <head> に title が 1 つだけ入り、二重定義の事故が起きません。 metadata はサーバー側で HTML に書き出されるため、JavaScript を実行しないクローラーにも届きます（JavaScript を実行しないクローラーと SSR）。
// Next.js（App Router）では title を JSX に書かず、metadata で出力する。
// これで <head> に <title> が 1 つだけ入る。
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "title タグの書き方",
// layout 側で template を設定しておくと、末尾に自動でサイト名が付く
// 例: title.template = "%s｜サイト総合診断"
};title と h1 は何が違いますか？
title は検索結果やタブに出る「外向きの題名」、h1 はページを開いた人が最初に読む「本文中の見出し」です。役割が別なので、両方を最適化します。文言は近くても構いませんが、title は検索の文脈、h1 はページ内の文脈に合わせて書き分けると効果的です。h1 が複数あったり欠けていたりする問題は別記事で扱います。
混同されがちですが、title と <h1> は置き場所も役割も別です。 title は検索結果やタブという「ページの外」に出る題名、h1 はページを開いた人が本文の冒頭で読む見出しです。
| title | h1 | |
|---|---|---|
| 書く場所 | <head> | <body> |
| 見える場所 | 検索結果・タブ（ページの外） | ページ本文の先頭 |
| 個数 | 1 ページに 1 つ | 1 ページに 1 つが基本 |
| 主な役割 | 検索でクリックしてもらう | 開いた人に主題を示す |
文言は似ていても構いませんが、title は検索の文脈、h1 はページ内の文脈に合わせて書き分けると効果的です。 h1 の個数や階層の話は 見出しの構造で扱います。
title は検索順位に影響しますか？
影響します。title はページの主題を検索エンジンに伝える主要な要素の一つで、内容と一致した適切な title は評価にプラスに働きます。ただし title だけで順位が決まるわけではなく、本文の質や被リンクなど多くの要素の一部です。キーワードを詰め込めば上がるという単純なものではなく、むしろ詰め込みは逆効果になります。
title はページの主題を検索エンジンに伝える主要な要素の一つですが、これ「だけ」で順位が決まるわけではありません。 本文の内容、利用者の満足、被リンクなど多くの要因の一部です。だからこそ、キーワードを詰めて順位を上げようとする発想はほとんど効かず、むしろ逆効果になります。内容に忠実な title が、遠回りに見えて最短です。
Google が title を書き換えるのはなぜですか？
書かれた title がページをうまく表していないと Google が判断したときです。2021 年 8 月の変更以降、検索クエリに合わせて書き換えることはしていないと Google は説明しています。原因として挙げられているのは、中身の薄い title、古い情報の title、内容と食い違う title、定型文の使い回し、主題が分からない構成、本文と言語が違う title です。最善策は、簡潔で内容に忠実な title を自分で用意することです。
知っておくべき現実として、Google は自分が書いた title を、検索結果で書き換えることがあります。 2021 年 8 月の変更で、Google は検索クエリごとに title を変えることはやめたと説明しています。書き換えが起きるのは、 title そのものがページをうまく表していないと判断されたときです。Google のドキュメントが挙げている主な原因は次のとおりです。
- 中身の薄い title — サイト名だけなど、ページ固有の情報がほとんど無い
- 古い title — 「2024 年版」のまま内容だけ更新したなど、年や情報が古くなっている
- 内容と食い違う title — ページの実際の中身を正しく表していない
- 定型文の使い回し — 同じサイト内の複数ページで、ほぼ同じ title が並んでいる
- 主題が分からない — ページ内に目立つ見出しが複数あり、どれが題名か判別できない
- 言語の不一致 — title と本文で言語や文字体系が違う
このほか、キーワードの詰め込みや不必要に長い title も、Google がベストプラクティスとして避けるよう求めている書き方です。
書き換えを完全に禁止する方法はありません。減らす最善策は、簡潔で内容に忠実な title を自分で用意することです。 Google が h1 や本文から独自の見出しを作らずに済むなら、あなたの意図した題名がそのまま使われます。
よくある失敗は何ですか？
全ページで同じ title を使い回すこと、キーワードを詰め込むこと、長すぎて末尾が切れることの三つが代表的です。特に全ページ同一の title は、どのページも区別がつかず検索での不利が大きくなります。サイト名を先頭に置いてしまい、肝心のページ名が省略で消えるのも失敗です。ページごとに固有で、簡潔な題名を付けることが基本の対策になります。
- 全ページ同一 — テンプレートにサイト名だけを固定し、ページ名を入れ忘れている。最も多い失敗
- キーワード詰め込み（
SEO 対策 東京 格安 …）— 文になっておらず、Google もベストプラクティスで避けるよう求めている - 長すぎ — 末尾の重要語が
…で消える。特にサイト名を先頭に置くと肝心のページ名が切れる - title の未設定 — 出力し忘れると、ブラウザは URL などを代わりに表示し、検索でも不利になる
自分のサイトの title をどう確認しますか？
ブラウザでページを開き、タブに出る文字列を見るのが最も手早い方法です。正確には検証ツールで head 内の title 要素を確認します。複数ページをまとめて調べるなら、各ページの title を機械的に一覧化し、重複や空、長すぎるものを洗い出すのが確実です。本ツールの診断でも title の有無や長さを検出します。中身が適切かは最後に人が判断します。
最も手早いのは、ページを開いてブラウザのタブに出る文字列を見ることです。正確には検証ツールで<head> 内の <title> を確認します。ページ数が多いなら、各ページの title を機械的に一覧化し、重複・空・長すぎを洗い出すのが確実です。
本ツールの診断でも title の有無や長さを検出します。ただし機械にできるのはそこまでで、「その title が中身を正しく表しているか」は、最後に人が読んで判断する必要があります。 関連して、検索結果の説明文づくりは meta description の書き方を参照してください。