◀ 4.

HTML title 要素完全ガイド (SEO 観点)

▶
編集
この記事の要点
  • <title> は <head> 内に必須で 1 個のみ
  • ブラウザタブ表示 / ブックマーク名 / 検索結果のリンクテキストに使われる
  • SEO で最も重要なタグの 1 つ。推奨長は 50-60 字 (日本語は 30 字前後)
  • OGP og:title は SNS シェア用、meta description はスニペット用 → 役割が違う
  • SPA では JS で document.title = "..." や Vue Router / Next.js Head で動的に

title 要素とは

<title> は HTML 文書のタイトルを表すメタデータ要素。ブラウザのタブ、履歴、ブックマーク、そして検索エンジンの結果ページで見出しとして使われます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS セレクタ完全ガイド | サンプルサイト</title>
  <meta name="description" content="CSS セレクタの基本から疑似クラスまで体系的に解説。">
</head>
<body>
  ...
</body>
</html>

仕様上のルール

項目仕様
配置場所<head> 内
個数1 ドキュメント 1 個 (必須)
子要素テキストのみ (タグは入れられない)
属性グローバル属性のみ (lang, dir 等)
文字数仕様上の上限なし。実用上は SEO 観点で 50-60 字 (英) / 28-32 字 (和)
HTML 仕様HTML 4.01 以降必須要素

SEO 観点での書き方

  • 主要キーワードを前方に: 「セレクタ完全ガイド | サイト名」のように冒頭にトピック
  • サイト名はパイプ | や ハイフン - で区切る: 「ページタイトル | サイト名」
  • ページごとに固有: 全ページ同じタイトルは SEO 大幅減点
  • 30 字前後 (日本語): Google 検索結果での表示が切れない
  • クリック誘導語を含める: 「完全ガイド」「2026 年版」「徹底比較」
  • タイトル詐欺 NG: 中身と無関係なキーワード羅列はペナルティ

title と description / OGP の役割分担

タグ用途推奨長
<title>タブ / 検索結果リンクテキスト28-32 字 (和)
<meta name="description">検索結果のスニペット (本文要約)120 字前後
<meta property="og:title">SNS シェア時 (Twitter/Facebook)40 字程度
<meta property="og:description">SNS シェア時の説明80 字程度
<h1>本文中の見出しtitle と同じか短く
 
<head>
  <title>CSS セレクタ完全ガイド | MyWiki</title>

  <meta name="description"
    content="CSS セレクタの基本構文、疑似クラス、優先度を 30 分で習得。サンプルコード付き。">

  <!-- OGP (Facebook / LINE / Slack) -->
  <meta property="og:title" content="CSS セレクタ完全ガイド">
  <meta property="og:description" content="疑似クラス :has() まで網羅。">
  <meta property="og:image" content="https://example.com/og.png">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="CSS セレクタ完全ガイド">
</head>

JavaScript で動的にタイトル変更

// 単純な書き換え
document.title = '新しいタイトル';

// 未読件数を表示
let unread = 5;
document.title = `(${unread}) Inbox | MyApp`;

// 可視性に応じた切替
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    document.title = '★ 戻ってきてね | MyApp';
  } else {
    document.title = 'MyApp';
  }
});

SPA でのタイトル管理

Vue Router

const routes = [
  { path: '/', component: Home, meta: { title: 'ホーム | MyApp' } },
  { path: '/about', component: About, meta: { title: 'About | MyApp' } },
];

router.afterEach((to) => {
  if (to.meta.title) document.title = to.meta.title;
});

Next.js (App Router)

// app/page.tsx
export const metadata = {
  title: 'ホーム | MyApp',
  description: '...',
};

// 動的タイトル
// app/posts/[id]/page.tsx
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.id);
  return { title: `${post.title} | MyApp` };
}

// テンプレート (子から見て共通の接尾辞)
// app/layout.tsx
export const metadata = {
  title: { default: 'MyApp', template: '%s | MyApp' }
};

React (react-helmet-async)

import { Helmet } from 'react-helmet-async';

function Page() {
  return (
    <>
      <Helmet>
        <title>記事ページ | MyApp</title>
        <meta name="description" content="..." />
      </Helmet>
      ...
    </>
  );
}

多言語サイトでの title

<!-- 日本語ページ -->
<html lang="ja">
<head>
  <title>CSS セレクタ完全ガイド | MyWiki</title>
  <link rel="alternate" hreflang="en" href="https://example.com/en/css-selectors">
  <link rel="alternate" hreflang="ja" href="https://example.com/ja/css-selectors">
</head>

<!-- 英語ページ -->
<html lang="en">
<head>
  <title>Complete CSS Selectors Guide | MyWiki</title>
  ...
</head>

絵文字や記号を入れるべきか

検索結果で目立つので CTR が上がるという報告もありますが、ジャンルを選びます:

  • ○ 通販・キャンペーン: 「【セール中】iPhone 15 Pro 最安値 ⭐」
  • × 法人・士業・医療: 信頼性を損なうので避ける
  • Google の表示制御: 絵文字が黒丸 (●) に置換されたり消されるケースあり

よくあるミス

ミス影響対処
全ページ同じタイトルSEO 大幅減点ページごとに固有に
「無題ドキュメント」CMS デフォルトのまま放置必ず編集
キーワード羅列スパム判定自然な文に
長すぎる (60 字超)後ろが「...」で切れる30 字前後に
SPA でタイトル未更新全ページ同じ扱いルーター連動
JS 描画 = Googlebot に届かないクロール時 title 空SSR or プリレンダリング

確認方法

# curl で title を取得
curl -s https://example.com | grep -oP '<title>[^<]+'

# Google Search Console
# → URL検査 → ライブテスト → レンダリング後の HTML で title を確認

# ブラウザ DevTools
# → Console: document.title

FAQ

Q: Google が勝手にタイトルを書き換える
A: 2021 年から Google は title を h1 やリンクテキストに書き換えることがあります。書き換えを減らすには「ページ内容と一致した簡潔なタイトル」が有効。

Q: title と h1 は同じにすべき？
A: 完全一致は冗長。title はサイト名込み「記事タイトル | サイト名」、h1 は記事本文の見出し、と役割分担するのが定石。

Q: title 内に HTML タグは書ける？
A: 仕様上 NG。書いてもリテラル表示になります。実体参照 (&amp;amp; 等) は使えます。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
  11. main要素
  12. address要素
2026-06-11 07:10:02 guest 278

人気ページ

最近更新/作成されたページ