titleタグ完全ガイド

titleタグとは

<title>タグは、<head>内に置くHTML要素で、ページの名前を示します。ブラウザではタブに表示され、Googleでは検索結果のスニペットでクリックできる見出しに使われ、SNSではリンクプレビューに使われます。オンページ要素の中でも、titleは1行変えるだけで検索での見え方とクリック率の両方が動く数少ない要素です。

よく書けたタイトルは、3つの役割を同時に果たします。ページの内容を検索エンジンに伝え、検索結果でクリックを獲得し、ページを開く前の第一印象をつくります。出来が悪いと、順位が上がらないか、Googleに書き換えられます。

zoom_in

titleのポイント

titleは唯一のランキング要因ではありません。ただし、クリック前の検索エンジンとユーザーの両方に見えるオンページ要素は、titleだけです。両方に届くため、titleを最適化すると順位とCTRの2つで効果が出ます。

titleタグの歴史

titleは、HTMLの最初期から存在する要素です。ウェブのどの時代でも、構文はほとんど変わっていません。一方で、役割と検索エンジンの扱い方は数十年で大きく変わりました。

ここから言えるのは、titleは重要性を失ってはいないが、書き方の論理が変わったということです。1996年はキーワードを多く詰め込めば勝てました。2026年は、クエリに的確に合わせ、クリックしたくなる文にすれば勝てます。

titleタグが表示される場所

titleは隠れたメタタグではありません。ユーザーは3つの画面で目にし、それぞれで役割が違います。これを押さえておくと、どこでも機能するタイトルを書けます。

構文はHTML 1.0から変わっていません。titleは<head>内に置き、中身はプレーンテキストのみで、HTMLタグは入れられません。サイト内のページごとに固有にします。

<head>
  <title>Winter Welders' Workwear — Buy Wholesale | SpecOpt</title>
</head>

Googleはクロールのたびにtitleを読み直します。ページの内容が大きく変わったのにtitleが変わっていないと、ずれが生じます。検索エンジンがスニペットの見出しを書き換えたり、対象クエリに対するページの関連性を下げたりする場合があります。

良いタイトルの書き方

良いタイトルは、キーワードの羅列でもスローガンでもありません。特定のクエリで検索する特定の人に向けて、ページを正確に説明する文です。実務で通用するルールを挙げます。

「無料」「高速」や現在の年のような具体的な語は、事実であれば内容を明確にできます。ただし、ページで裏付けられる場合だけ使います。目的は期待を正確に伝えることで、クリック率の向上を約束することではありません。

サイトのtitleタグを監査する方法

titleのチェックには2種類あります。すぐ直す1ページ単位のチェックと、構造的な問題を探すサイト全体のチェックです。SEO監査には両方が必要です。前者は分かっている問題を直し、後者は気づいていなかったパターンを見つけます。

Screaming Frogでは、3つのレポートに注目します。「Page Titles → Duplicate」「Page Titles → Missing」「Page Titles → Over 60 characters」です。大規模サイトの監査で、ほぼ必ず見つかる3つのtitleの問題をカバーできます。

重複タイトルの原因と対処

重複タイトルは、最も軽視されやすい技術的な問題の1つです。小さなブログなら数件で済みますが、ページネーションとファセットフィルターのあるECサイトでは数千件になることもあります。検索エンジンは重複を低品質のシグナルとみなし、該当ページをまとめて、意図しないページを表示する場合があります。

別の問題として、titleのカニバリゼーションがあります。同じ、またはよく似たtitleを持つ2つの異なるURLが、同じクエリで競合する状態です。Googleは最終的に1つを選んで表示しますが、意図したページとは限りません。

ページタイプ別のタイトルテンプレート

すべてのページに合う型はありません。トップページ、商品ページ、ブログ記事では検索意図が違い、競合するクエリも違います。以下は、実際に使えるテンプレートと例です。

CMSやテンプレートエンジンでは、titleテンプレートに変数を使います。YoastのWordPressでは%%title%%と%%sitename%%、Next.jsではmetadata.titleにテンプレート文字列を指定します。テンプレートは出発点です。トラフィックが多いページや売上に直結するページは、手作業でタイトルを作る価値があります。

// Next.js: title template via generateMetadata
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const product = await getProduct(params.slug);
  return {
    title: `${product.name} ${product.attribute} — SpecOpt`,
  };
}

// Global template in layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | SpecOpt',
    default: 'SpecOpt — workwear wholesale from manufacturer',
  },
};

テンプレートの変数は、フィールドに値が入っていて初めて機能します。大量の重複でよくあるのが、{product.name}のテンプレートにフォールバック値がないケースです。数十件の商品ページが、同一または空のtitleになります。

CTRと検索順位への影響

titleは関連性のシグナルとして順位に影響しますが、順位への直接の効果は、よく言われるほど大きくありません。良いタイトルの本当の価値はCTRです。同じ検索順位でも、クリックする人が増えればトラフィックも増えます。

titleを変えた効果は、Google Search Consoleで測れます。ページをタイプ別に絞り、変更前のCTRを記録し、2〜4週間待って比較します。本格的なA/Bテストではありませんが、多くのサイトで仮説の検証には十分な精度です。

titleとメタディスクリプションは対で働きます。titleは「これは何か」に答え、ディスクリプションは「なぜクリックすべきか」に答えます。ディスクリプションはほぼ常にGoogleに書き換えられます。titleは書き換えられる頻度が低く、ロジックも予測しやすいものです。titleがH1やページの中心的な内容と近いほど、置き換えられる可能性は下がります。

FAQ

titleタグの作業でよく出る質問に答えます。