title タグの最適な文字数と書き方

title タグは、HTML の head に書くページの題名です。検索結果ではクリックできる青い見出し（タイトルリンク）として表示され、ブラウザのタブ名にもなります。SEO で最も影響の大きい要素の一つで、書き方の基本は「重要な語を前に、サイト名を末尾に、ページごとに固有の題名を付ける」ことです。全角で 30 字前後に収めると、末尾が切れずに表示されやすくなります。

執筆: JIT株式会社公開: 2026年7月17日

title タグとは何ですか？

title タグは head 内に書くページの題名で、検索結果の見出しとブラウザのタブ名になります。Google はこれを「タイトルリンク」として検索結果の一番上に太字で表示し、利用者がクリックするかどうかを最初に判断する材料になります。ページ本文には表示されないため見落とされがちですが、検索での見え方を決める最重要の要素です。

title は、HTML の <head> の中に 1 つだけ置く要素です。ページ本文には現れないため、作っている本人には普段見えません。しかし利用者が最初に目にするのは、多くの場合この title です。使われる場面は主に 3 つあります。

検索結果の見出し — Google がクリックできる青い「タイトルリンク」として一番上に表示する
ブラウザのタブ — 複数タブを開いているとき、どのページかを見分ける名前になる
共有・ブックマーク — SNS で共有したときやお気に入り登録したときの初期タイトルになる

最適な文字数は何文字ですか？

全角で 30 字前後を目安にします。検索結果に表示できる幅には限りがあり、長すぎると末尾が「…」で省略されて肝心の語が見えなくなります。厳密な文字数上限ではなくピクセル幅で切れるため、30 字は絶対の基準ではありません。重要な語を前半に置いておけば、末尾が切れても意味が伝わります。短すぎて内容が分からないのも避けます。

よく「32 文字まで」と言われますが、Google が省略するかどうかは文字数ではなく表示幅（ピクセル）で決まります。同じ文字数でも、全角の多い日本語は早く切れ、英数字なら長く入ります。だから「◯文字以内」は目安にすぎません。大事なのは、切れても困らない順番で並べることです。

title の長さと、検索結果での見え方
長さの傾向	検索結果での見え方	評価
全角 30 字前後	末尾まで表示されやすい	読みやすい（目安）
長すぎる	末尾が `…` で省略される	重要語が消えると不利（NG）
短すぎる	全部表示されるが内容不足	クリック理由が伝わらない（弱い）

どう書けばいいですか？

そのページを最もよく表す語を前方に置き、サイト名は末尾に回し、ページごとに固有の題名を付けます。利用者が検索する言葉と、ページの中身が一致していることが第一です。区切りは全角の縦棒やハイフンが一般的で、「ページ名 | サイト名」の形が読みやすくなります。誇張や煽りではなく、中身を正直に要約した題名がクリック後の満足につながります。

原則はシンプルで、「そのページを最もよく表す語 → サイト名」の順に並べることです。利用者が検索する言葉と、ページの中身が一致していれば、クリック後の満足も高くなります。区切り文字は縦棒（｜）やハイフン（-）が一般的です。

良い title / NG な title

<!-- 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 つだけ入り、二重定義の事故が起きません。

Next.js の metadata で title を出す

// 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 の違い
	title	h1
書く場所	`<head>`	`<body>`
見える場所	検索結果・タブ（ページの外）	ページ本文の先頭
個数	1 ページに 1 つ	1 ページに 1 つが基本
主な役割	検索でクリックしてもらう	開いた人に主題を示す

文言は似ていても構いませんが、title は検索の文脈、h1 はページ内の文脈に合わせて書き分けると効果的です。 h1 の個数や階層の話は見出しの構造で扱います。

title は検索順位に影響しますか？

影響します。title はページの主題を検索エンジンに伝える主要な要素の一つで、内容と一致した適切な title は評価にプラスに働きます。ただし title だけで順位が決まるわけではなく、本文の質や被リンクなど多くの要素の一部です。キーワードを詰め込めば上がるという単純なものではなく、むしろ詰め込みは逆効果になります。

title はページの主題を検索エンジンに伝える主要な要素の一つですが、これ「だけ」で順位が決まるわけではありません。本文の内容、利用者の満足、被リンクなど多くの要因の一部です。だからこそ、キーワードを詰めて順位を上げようとする発想はほとんど効かず、むしろ逆効果になります。内容に忠実な title が、遠回りに見えて最短です。

Google が title を書き換えるのはなぜですか？

検索クエリや本文に対して、書かれた title が不適切だと Google が判断したときに書き換えます。全ページ同じ題名、キーワードの羅列、極端に長い・短い、中身と食い違うといった title は、Google が h1 や本文から独自の見出しを生成して差し替えることがあります。書き換えを減らす最善策は、簡潔で内容に忠実な title を自分で用意することです。

知っておくべき現実として、Google は自分が書いた title を、検索結果で書き換えることがあります。 Google の説明によれば、書き換えは title が検索クエリや本文に対して適切でないと判断されたときに起きます。次のような title は差し替えられやすくなります。

全ページ同一 — どのページも同じ題名で、内容を区別できない
キーワードの羅列 — 語を詰め込んだだけで文になっていない
極端に長い・短い — 情報が多すぎる、または少なすぎる
中身と食い違う — title の語がページ本文に見当たらない

書き換えを完全に禁止する方法はありません。減らす最善策は、簡潔で内容に忠実な title を自分で用意することです。 Google が h1 や本文から独自の見出しを作らずに済むなら、あなたの意図した題名がそのまま使われます。

よくある失敗は何ですか？

全ページで同じ title を使い回すこと、キーワードを詰め込むこと、長すぎて末尾が切れることの三つが代表的です。特に全ページ同一の title は、どのページも区別がつかず検索での不利が大きくなります。サイト名を先頭に置いてしまい、肝心のページ名が省略で消えるのも失敗です。ページごとに固有で、簡潔な題名を付けることが基本の対策になります。

全ページ同一 — テンプレートにサイト名だけを固定し、ページ名を入れ忘れている。最も多い失敗
キーワード詰め込み（SEO 対策東京格安 …）— 文になっておらず、書き換えの主因になる
長すぎ — 末尾の重要語が … で消える。特にサイト名を先頭に置くと肝心のページ名が切れる
title の未設定 — 出力し忘れると、ブラウザは URL などを代わりに表示し、検索でも不利になる

自分のサイトの title をどう確認しますか？

ブラウザでページを開き、タブに出る文字列を見るのが最も手早い方法です。正確には検証ツールで head 内の title 要素を確認します。複数ページをまとめて調べるなら、各ページの title を機械的に一覧化し、重複や空、長すぎるものを洗い出すのが確実です。本ツールの診断でも title の有無や長さを検出します。中身が適切かは最後に人が判断します。

最も手早いのは、ページを開いてブラウザのタブに出る文字列を見ることです。正確には検証ツールで<head> 内の <title> を確認します。ページ数が多いなら、各ページの title を機械的に一覧化し、重複・空・長すぎを洗い出すのが確実です。

本ツールの診断でも title の有無や長さを検出します。ただし機械にできるのはそこまでで、「その title が中身を正しく表しているか」は、最後に人が読んで判断する必要があります。関連して、検索結果の説明文づくりは meta description の書き方を参照してください。