この記事でわかること

  • ページのタイトルについて、W3CのWCAGが決めている基準
  • title要素でタイトルを付ける書き方
  • 分かりやすいタイトルの条件と、避けたいタイトルの例
  • ブラウザのタブとソースで、タイトルを確かめる手順

ブラウザでいくつものタブを開いたとき、どのタブにも同じサイト名だけが出ていて、目当てのページが見つからなかったことはないでしょうか。ページのタイトルは、タブや履歴、画面の読み上げで最初に伝わる、そのページの名前です。この記事では、ページごとに内容が分かるタイトルを付ける方法を、W3Cのアクセシビリティの基準WCAGに沿って紹介します。

この記事は、W3CのWCAG 2.2の本文と、達成基準2.4.2の解説、タイトルに関わる4つの技法のページを、2026年10月24日に読んだ内容にもとづいて書いています。検索の順位への効果と、特定のツールやスクールの紹介は扱いません。ページの中の見出しの付け方は、Webデザインで見出しの階層を正しく付ける方法にまとめています。

先に結論: 何のページかを先に、短く書く

先に結論を書くと、ページのタイトルは、そのページの話題を先に、短く書き、サイトの中のほかのページと同じにしないようにします。 見るところを表にすると、次のようになります。

確かめること 目安
何のページか 最初に書く
長さ 短くする
ほかのページ 同じにしない
サイト名 後ろに添える
内容が変わる 題も変える

ページのタイトルに関わるWCAGの基準

ページのタイトルに関わるのは、WCAG 2.2の達成基準2.4.2「ページタイトル」です。いちばん基本のレベルAの基準で、Webページには、話題か目的を表すタイトルを付けることを求めています。W3Cの解説では、この基準の目的を、どのページにも意味のあるタイトルを付けることだとまとめています。

W3Cの解説では、タイトルがあると、ページの中身を読まなくても、今どこにいるかが分かるとしています。ブラウザなどは、ページのタイトルを、ウィンドウの上の帯や、ページを開いているタブの名前として表示することがあります。サイトの地図や検索の結果の一覧にタイトルが出るときも、必要なページを早く見つけられます。

タイトルが役に立つ人

W3Cの解説では、この基準は、すべての人が、そのページの情報が自分に必要かを早く見分けるのに役立つとしています。そのうえで、次のような人にとって、特に役立つと書いています。

  • 目の不自由な人: いくつものページを開いているときに、ページを見分けられます
  • 短い時間のことを覚えておくのが苦手な人や、読むことが苦手な人: タイトルで中身を見分けられます
  • 音声に頼ってページを移る人: 体を動かすことに重い障害があり、音声でページを行き来する人にも役立ちます

title要素でタイトルを付ける

HTMLのページでは、タイトルをtitle要素で付けます。W3Cの技法H25では、HTMLの文書には、head(文書の情報を書く部分)の中に、文書の目的を簡単なことばで表すtitle要素を置くとしています。そうすると、ページの本文で手がかりを探さなくても、サイトの中のどこにいるかがすぐに分かります。

技法H25は、title要素は文書の中に1度だけ書く必須の要素で、ほとんどの要素に付けられるtitle属性とは別のものだとも注意しています。名前が似ているので、取り違えないようにします。

次のHTMLは、架空のサイト「サンプル工房」のお問い合わせのページに、タイトルを付ける見本です。書き方を示すためのもので、実行するコマンドではありません。サイトのファイルを書き換えるときは、直す前のファイルを写して残しておきます。

<!doctype html>
<html lang="ja">
  <head>
    <!-- ページの話題を先に、サイトの名前を後ろに書く -->
    <title>お問い合わせ | サンプル工房</title>
  </head>
  <body>
    ...
  </body>
</html>

分かりやすいタイトルの条件

W3Cの技法G88では、どのページのタイトルも、次の3つを満たすべきだとしています。

  1. ページの話題が分かる: そのページが何について書いているかが分かります
  2. 前後が無くても意味が通る: 画面の読み上げや、サイトの地図、検索の結果の一覧で、タイトルだけを読んでも分かります
  3. 短い: 長くしすぎません

さらに技法G88では、ページが属するサイトなどの名前が分かること、そのサイトの中でほかのページと同じでないことも、役に立つことがあるとしています。技法G88の例では、ページの話題を先に書き、そのあとに部署の名前、さらに組織の名前を続けています。大事な手がかりを先に置く書き方です。

W3Cの技法G127でも、ページのタイトルに、サイトの中の小さな区分の名前や、サイトを作っている組織の名前を入れる例を挙げています。オンラインの教科書なら、章の番号と章の題、教科書の題をタイトルに入れる例です。

避けたいタイトル

W3Cの失敗例F25では、タイトルはあっても、ページの内容や目的が分からない場合を、基準を満たさない例としています。たとえば、次のようなタイトルです。

  • 作成ツールの初期のままの題: 「無題のドキュメント」のように、作成ツールが最初に入れる題を変えていないもの
  • それだけでは意味の分からないファイル名: 中身を表さない、ファイル名のままのもの
  • 空の題や、仮の文字: 何も書いていないもの、あとで直すつもりの仮の文字を置いたままのもの
  • どのページも同じ題: テンプレートで作ったサイトで、すべてのページに同じタイトルが付き、ページを見分けられないもの

画面が切り替わるページとリンクの文言

W3Cの解説では、同じURLのまま中身が切り替わるシングルページアプリケーションでは、今の画面の内容や話題に合わせて、ページのタイトルも切り替えるべきだとしています。最初に開いたときのタイトルのままにしないようにします。

W3Cの解説では、リンクの文言と、リンク先のページのタイトルを合わせるか、とても近くすることを、望ましいやり方としています。押したリンクと、たどり着いたページのつながりが分かるからです。リンクの文言の書き方は、Webデザインでリンクの文言を分かりやすくする方法で紹介しています。

手順: タブとソースでタイトルを確かめる

W3Cの技法H25・G88の確かめ方をもとに、次の順で見ます。

  1. タブの表示を見る: ページをブラウザで開き、タブに出るタイトルを読みます
  2. ソースを見る: ページのソースで、headの中に空でないtitle要素があるかを確かめます
  3. 内容と合っているかを見る: タイトルが、そのページの中身と合っているかを確かめます
  4. ほかのページと並べる: サイトのいくつかのページをタブで開き、タイトルだけでページを見分けられるかを確かめます

タブを順に切り替えながら確かめるときに、キーボードだけで操作できるかも一緒に見ておくと、手間が省けます。キーボードの確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法で紹介しています。

自分で直すか、相談するかの判断

判断の目安は、「ページごとにタイトルを書き換えられる場所があるか」です。ページを1枚ずつ作っているサイトや、記事ごとにタイトルを入れる欄がある仕組みなら、自分で書き直して、もう一度タブで確かめます。

テンプレートがどのページにも同じタイトルを入れている場合や、画面が切り替わるアプリでタイトルが変わらない場合は、作りそのものを直すことになります。タブとソースで見た結果を控えて、サイトを作った人や、Webデザインの先生に、タイトルをどこで決めているかを聞きます。

つまずきやすいところ

  • サイト名だけをタイトルにする: どのページもサイト名だけだと、タブや履歴で見分けられません。ページの話題を先に書きます
  • title属性で付けたつもりになる: 要素に付けるtitle属性は、ページのタイトルではありません。headの中のtitle要素で付けます
  • 長いタイトルにする: 技法G88では、タイトルは短くするべきだとしています。技法G88の例のように、ページを見分けるのにいちばん大事な手がかりを先に置きます
  • ページの見出しとかけ離れた題にする: タイトルとページの中身が合っているかを確かめます。ページの中の見出しの付け方は、Webデザインで見出しの階層を正しく付ける方法で紹介しています

まとめ

  • WCAGの達成基準2.4.2は、Webページに、話題か目的を表すタイトルを付けることを求めています
  • HTMLでは、headの中のtitle要素で、ページのタイトルを1つだけ付けます
  • タイトルは、ページの話題が分かり、前後が無くても意味が通り、短いものにします。サイト名は後ろに添えます
  • 初期のままの題、空の題、どのページも同じ題は避け、タブとソースで確かめます