HTML REFERENCE

メタデータ・スクリプト

<title> 要素

ー ブラウザのタブ・ブックマーク・検索結果に表示されるページタイトルを定義する要素

POINT !

<title> 要素のポイント！

  • <title> はすべての HTML ページに必須の要素で、<head> 内に1つだけ配置する。省略するとブラウザはファイル名をタイトルとして使用し、SEO・アクセシビリティ両面で大きな問題になる。
  • タイトルはページごとに固有の内容にする。「トップページ | サイト名」「記事タイトル | サイト名」のように、固有情報を前に・サイト名を後ろに置く構成が SEO 的にも推奨される形式。
  • スクリーンリーダーはページ読み込み時に <title> を最初に読み上げる。複数タブを開いているユーザーがページを識別する主要な手がかりになるため、内容を明確に示すタイトルはアクセシビリティに直結する。
  • <title> には HTML タグを含めることができない（テキストノードのみ）。タグを書いても文字列として表示されるだけなので注意。文字数は SEO の観点から 30〜60 文字程度が推奨される。

概要

<title> 要素は HTML ドキュメントのタイトルを定義するメタデータ要素で、<head> 内に必ず1つ配置します。

その内容は次の3つの場所で使われます。
・ブラウザのタブ・ウィンドウのタイトルバー
・ブックマーク保存時のデフォルト名
・検索エンジンの検索結果ページ（SERP）のリンクテキスト

検索エンジンのランキング要因の中でも <title> は重要度が高く、ページの内容を正確に表すキーワードを含んだタイトルは検索流入に直接影響します。
Google では 30〜60 文字程度のタイトルが検索結果上で適切に表示されるとされており、長すぎると末尾が「…」で切れます。

アクセシビリティの観点でも <title> は非常に重要です。
スクリーンリーダーはページを開いた瞬間に <title> を読み上げるため、複数タブを開いているユーザーが「今どのページにいるか」を把握するための主要な手がかりになります。
「ページタイトル ― サイト名」のパターンで固有情報を先頭に置くことで、読み上げの冒頭でページ内容を把握できます。

具体的な役割

全ページに必須。「固有のページ内容 | サイト名」の形式で記述するのが基本。動的サイトでは CMS やテンプレートエンジンを使い、各ページに合ったタイトルが自動生成されるよう設計する。

アクセシビリティ

♿ スクリーンリーダーはページ読み込み完了時に <title> を自動で読み上げます。

良いタイトルの条件は以下の通りです。
・各ページで固有であること（「お問い合わせ | サイト名」など）
・ページの内容を冒頭で明示すること（サイト名を前に置かない）
・エラーページでは「エラー：〇〇 | サイト名」のようにエラーの種類を明示する

フォームのバリデーションエラー後にページを再描画する場合、タイトルを「2件のエラーがあります | お問い合わせ | サイト名」のように動的に変更すると、スクリーンリーダーがエラーをすぐに通知できます。

ネスト（入れ子）のルール

📦 <title> はテキストコンテンツのみを含められます。
<b>・<strong>・<span> などの HTML タグは使用できず、記述してもタグ文字列がそのまま表示されます。

改行や複数のスペースはタイトルとして1つのスペースに正規化されます。
<title> 要素自体は <head> 内に1つのみ配置できます（複数書いた場合は最初のものだけが有効）。

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)
かつては「サイト名 | ページ名」のようにサイト名を前に置くパターンが多かった。また、SEO を意識してキーワードを詰め込んだ長すぎるタイトルや、全ページ同じタイトルを使い回すことも珍しくなかった。
MODERN (今)
「ページ固有の情報 | サイト名」の順番が標準。SPA（Single Page Application）では画面遷移のたびに JavaScript で document.title を更新し、スクリーンリーダーがページ変更を認識できるよう配慮する。Core Web Vitals やアクセシビリティ監査（Lighthouse）でも title の有無・一意性がチェックされる。

主要な属性

属性名 説明
HTMLカテゴリ メタデータコンテンツ
配置可能な要素 テキストノードのみ（HTMLタグ不可）
親要素の制限 <head> 内にのみ配置可能。1ページに1つだけ
ARIAロール なし（非表示要素のため対象外）

利用例

ページ種別ごとのタイトル記述パターン

トップページ・一覧ページ・詳細ページ・エラーページのタイトル設計の違いを示した実例。

CSS Style
body { font-family: sans-serif; background: #f8fafc; padding: 24px; } .card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; } .card-label { font-size: 11px; color: #94a3b8; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; } .card-title { font-size: 15px; color: #1a56db; font-weight: 600; }
HTML Structure
<!-- トップページ：サイト名だけでも可 -->
<title>WebDictionary | Web制作リファレンス辞典</title>

<!-- 一覧ページ：カテゴリ名 + サイト名 -->
<title>HTML リファレンス一覧 | WebDictionary</title>

<!-- 詳細ページ：要素名 + サイト名 -->
<title><title> 要素の使い方と解説 | WebDictionary</title>

<!-- 検索結果ページ：検索語 + サイト名 -->
<title>「flexbox」の検索結果 | WebDictionary</title>

<!-- エラーページ：エラー内容を明示 -->
<title>404 ページが見つかりません | WebDictionary</title>

<!-- フォームエラー後（スクリーンリーダー向け動的更新） -->
<title>2件の入力エラー | お問い合わせ | WebDictionary</title>

よくある誤用・注意点

全ページで同じタイトルを使い回したり、タイトルを省略したりするのは SEO・アクセシビリティ双方に悪影響。また HTML タグの埋め込みも無効。

CSS
HTML (Incorrect)
<!-- ❌ 悪い例 -->
<title>ホームページ</title><!-- 内容が不明確 -->
<title>サイト名</title><!-- 全ページ同じ -->
<title><b>太字タイトル</b></title><!-- タグは無効、文字列になる -->
<title>WebDictionary HTML CSS JavaScript リファレンス 辞典 初心者 プロ 完全版 2024</title><!-- キーワード詰め込みすぎ -->

<!-- ✅ 良い例 -->
<title><article> 要素の使い方 | WebDictionary</title>

Try it Live: <title>

×

リアルタイムで結果が反映されます。