ページタイトルが設定されているとは？title要素の付け方・確認方法・診断基準

ページタイトルが設定されているとは

ページタイトルとは、HTMLの <title> 要素に書く「ページの名前」です。ブラウザのタブ、ブックマーク、履歴、検索結果、SNSでの共有時などに表示されます。ページタイトルが設定されているとは、<head> 部分に、そのページの主題や目的を説明する空でない <title> 要素があることを指します。

<head>
  <meta charset="utf-8">
  <title>○○市公式ホームページ</title>
</head>

ページタイトルには、2つの観点で役割があります。

• セキュリティの観点：利用者が「いま自分は本物の自治体サイトのどのページを見ているか」を確認する手がかりになります。
• アクセシビリティの観点：スクリーンリーダー利用者がページを識別するための最初の情報になります。

セキュリティAIチェッカーのこの項目は、トップページのHTMLの <head> 部分（<body> より前）に、空でない <title> 要素があるかを確認します。直接の脆弱性を判定する項目ではなく、公式サイトとして最低限そろえるべき「HTMLの基本衛生」の1つとして、重み1で評価します。セキュリティ標準（ASVS、CWE）に直接対応する要件はありません。

ページタイトルはなぜ必要か（HTML仕様・WCAG・公的機関の基準）

HTML Living Standardでの位置付け

HTML Living Standardでは、title 要素は文書のタイトルを表し、1つの文書に2つ以上あってはならないとされています。内容はテキストのみで、子要素を持てません。ブラウザの document.title は、title 要素の文字列から前後の空白を除き、連続する空白を1つにまとめた値を返します。

WCAG 2.2 達成基準2.4.2「ページタイトル」

WCAG 2.2の達成基準2.4.2（レベルA）は「ウェブページには、主題又は目的を説明するタイトルがある」ことを求めています。W3Cの解説では、次の点が意義として挙げられています。

• 複数のタブを開いたときにページを区別できること
• スクリーンリーダー利用者が本文を読まなくてもページを識別できること
• 検索結果で目的のページを見つけやすくなること

日本の公的機関に求められる水準

日本の公的機関については、総務省の「みんなの公共サイト運用ガイドライン（2024年版）」が、JIS X 8341-3:2016の適合レベルAAへの準拠を目標として示しています。JIS X 8341-3:2016は、WCAG 2.0と同じ内容のISO/IEC 40500:2012の一致規格です。また、WCAG 2.2と同じ内容のISO/IEC 40500:2025に合わせた改正作業が進行中です。達成基準2.4.2はレベルAなので、AA準拠の前提条件に含まれます。

セキュリティとの関係

• なりすましの見分け：フィッシングサイトは本物のタイトルをそのまま複製できるため、タイトルだけで本物と判断することはできません。しかし、本物のサイトのタイトルが空や「無題」「Untitled」だと、利用者はタブやブックマークで正規のページを識別できず、URLを確認する習慣も身に付きにくくなります。
• 公開状態の確認：「テストページ」「（仮）」「new_template」のような作業用のタイトルが残っている場合、検証用ページが誤って公開されている兆候になります。
• 出力の安全性：タイトルに検索語などの入力値を含める場合は、HTMLエスケープが必要です。<title> の中身はテキストとして扱われますが、</title> を含む入力が来るとタイトル要素が閉じられ、後続がHTMLとして解釈されます。

良いタイトルと避けたいタイトル

タイトルは、OGP（og:title）やパンくずリスト、見出し（<h1>）と整合させると、検索結果やSNS共有時の表示と実際のページ内容が一致し、利用者が「このリンクは本物の案内か」を判断しやすくなります。

SPA（シングルページアプリケーション）の場合

画面遷移をJavaScriptで行う申請ポータルなどでは、初期HTMLのタイトルに加えて、画面が切り替わるたびに document.title を更新する必要があります。W3Cの解説も、動的なアプリケーションでは現在の表示に合わせてタイトルを更新すべきとしています。本項目は初期HTMLのみを確認するため、画面遷移後のタイトルは手動で確認します。

ページタイトルについてよくある誤解

• 「SVGアイコン内の <title> があればよい」：インラインSVGの <title> はその図形の説明であり、ページのタイトルではありません。
• 「JavaScriptで後から document.title を設定するので不要」：初期表示時やJavaScriptが動かない環境、多くの検索エンジン・SNSのプレビューでは、サーバーから返されたHTMLのタイトルが使われます。
• 「全ページ同じタイトルでもよい」：トップページ以外も「○○市」だけでは、達成基準2.4.2の趣旨（主題・目的の説明）を満たしません。

同じ「HTML基本衛生」の項目として、文字コードの指定は「文字コードが明示されている」、ページの言語は「html要素に言語が設定されている」で確認します。

ページタイトルが設定されているの診断基準（セキュリティAIチェッカー）

取得対象

• 診断URLへのGETで取得したトップページ（最終URL）のHTML本文（最大2MB）。
• 判定範囲は、最初の <body タグより前の部分です（<body> タグが無いHTMLでは全体）。本文中のインラインSVGに含まれる <title> はページタイトルとして扱いません。
• JavaScriptの実行後に設定されるタイトルは対象外です。

判定方法

判定範囲の中で最初に現れる <title ...> 開始タグ（大文字小文字を区別しない）を探し、その後ろの最初の </title> までを中身とします。中身が「空白を除いた先頭の文字が < 以外」で始まり、閉じタグ </title> があればタイトルありとします。2つ目以降のtitle要素は見ません。

判定条件

タイトルの内容（自治体名が含まれるか、ページの目的を説明しているか）や、title要素が複数ないかは自動判定していません。

得点の読み方

重み1のlow項目のため、△でも総合スコアへの影響は小さく抑えられています。一方で修正の手間は小さく、テンプレート1か所の修正で全ページが改善することも多いため、優先して解消しやすい項目です。

自治体サイトでの判定例

ページタイトルが無い・不適切だとどんなリスクがあるか

1. 公式ページの識別困難：タブやブックマークに名前が表示されず、住民が正規のページへ戻る手段を見失い、検索結果や広告経由で偽サイトにたどり着く余地が生まれます。
2. アクセシビリティ要件の不適合：スクリーンリーダーで最初に読み上げられる情報が無く、JIS X 8341-3:2016の試験で不適合と判定されます。ウェブアクセシビリティ方針で準拠を表明している場合、表明内容と実態が食い違います。
3. 検証ページ公開の見落とし：作業用タイトルのまま公開されたページは、内容自体も未確認である可能性があります。
4. 入力値の反映による不具合：検索語をタイトルに入れる実装でエスケープが漏れていると、XSSの入口になります（この点は本項目ではなく、別途の脆弱性診断で確認が必要です）。

ページタイトルの付け方と設定方法（HTML・CMS・WordPress・Next.js）

1. タイトルの付け方

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>○○市公式ホームページ</title>
  ...
</head>

下層ページは「ページ名｜分類名｜○○市」のように、固有の情報を先頭に置くとタブ幅が狭くても識別しやすくなります。

<title>住民票の写しの請求｜戸籍・住民票｜○○市</title>

2. CMS・フレームワーク別の設定

• 一般的なCMS：テンプレートの <head> にページ名変数とサイト名を出力する設定があります。記事のタイトル欄を必須入力にし、未入力で公開できないようにします。
• WordPress：テーマの functions.php で add_theme_support('title-tag'); を有効にすると、WordPressがtitle要素を出力します。
• Next.js（App Router）：app/layout.tsx でテンプレートを定義し、各ページで固有のタイトルを設定します。

// app/layout.tsx
export const metadata = {
  title: { default: '○○市公式ホームページ', template: '%s｜○○市' },
};
// app/procedures/juminhyo/page.tsx
export const metadata = { title: '住民票の写しの請求' };

3. 入力値をタイトルに含める場合

検索語などをタイトルに入れるときは、必ずHTMLエスケープします（PHPの例）。

<title><?= htmlspecialchars($keyword, ENT_QUOTES, 'UTF-8') ?>の検索結果｜○○市</title>

4. エラーページ・特殊なページ

見落とされやすいのが、404／500などのエラーページ、検索結果ページ、メンテナンス中ページ、外部委託のフォームページです。エラーページのタイトルが空だと、利用者は「サイトが改ざんされたのか、ページが無いだけなのか」を判断しにくくなります。

<title>お探しのページが見つかりません｜○○市</title>
<title>「ごみ 分別」の検索結果｜○○市</title>
<title>ただいまメンテナンス中です｜○○市</title>

独自エラーページは、Apacheでは ErrorDocument 404 /error/404.html、nginxでは error_page 404 /error/404.html;、IISでは web.config の <httpErrors> で指定し、そのHTMLにもタイトルを設定します。外部委託のフォームやイベント申込ページは、仕様書に「タイトルに自治体名とページ名を含めること」を明記しておくと、受入時に確認できます。

5. 確認方法

# トップページのタイトル
curl -s https://www.city.example.lg.jp/ | grep -oiE '<title[^>]*>[^<]*</title>' | head -1
# サイトマップに載っている全ページで空タイトルを探す（例）
for u in $(curl -s https://www.city.example.lg.jp/sitemap.xml | grep -oE '<loc>[^<]+' | sed 's/<loc>//' | head -50); do
  t=$(curl -s "$u" | grep -oiE '<title[^>]*>[^<]*</title>' | head -1)
  [ -z "$(echo "$t" | sed -E 's/<[^>]+>//g' | tr -d '[:space:]')" ] && echo "空: $u"
done

ブラウザでは、タブに表示される名前と、開発者ツールのコンソールで document.title を確認します。

サイトを壊さないための注意点

• 共通テンプレートのtitle出力を変更すると全ページに影響します。検証環境で、トップ、一覧、記事、検索結果、エラーページの各テンプレートを確認してから反映します。
• タイトルの変更は検索エンジンの表示にも影響します。大規模な変更は、リニューアル時など計画的に実施します。
• 文字化けを防ぐため、<meta charset="utf-8"> を <title> より前に置きます。

よくある質問（FAQ）

参考資料

• W3C Understanding SC 2.4.2: Page Titled（WCAG 2.2）
• HTML Living Standard「Document metadata」（title要素）
• HTML Living Standard「Semantics, structure, and APIs of HTML documents」（document.title）
• WAIC「WCAG 2.2 日本語訳」
• W3C News「WCAG 2.2 approved as ISO/IEC international standard」
• 総務省「みんなの公共サイト運用ガイドライン」

「ページタイトルが設定されている」と関連する診断項目

• 文字コードが明示されているlow
• html要素に言語が設定されているlow
• 過大な初期HTMLを配信していないlow
• Content-Typeが明示されているmedium
• canonicalが安全なURLを指しているmedium
• Content-Typeと文字コードを全テキスト応答へ明示medium