タイトル: title要素
SEOタイトル: HTML title 要素完全ガイド (SEO 観点)
| この記事の要点 |
|
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.titleFAQ
Q: Google が勝手にタイトルを書き換える
A: 2021 年から Google は title を h1 やリンクテキストに書き換えることがあります。書き換えを減らすには「ページ内容と一致した簡潔なタイトル」が有効。
Q: title と h1 は同じにすべき？
A: 完全一致は冗長。title はサイト名込み「記事タイトル | サイト名」、h1 は記事本文の見出し、と役割分担するのが定石。
Q: title 内に HTML タグは書ける？
A: 仕様上 NG。書いてもリテラル表示になります。実体参照 (& 等) は使えます。