ページタイトル　［ページ設定］

ページタイトルは、<title>要素を用いて、そのウェブページの内容が分かるように記述する

解説

ページタイトルは、どのようなコンテンツが提供されているのかが分かるように、そのWebページの主題を具体的かつ簡潔に記述します。HTMLのWebページの場合は、<title>要素を用いてページタイトルを提供します。

<title>要素を用いたページタイトルは、次のようにさまざまなところで使われています。

  • ブラウザのタイトルバー
  • ブラウザのタブ
  • ブラウザの「お気に入り/ブックマーク」一覧
  • ブラウザの「履歴」一覧
  • 検索結果ページの「検索結果」一覧

また、例えばスクリーンリーダーは、そのWebページを読み込んだ時に最初にこのページタイトルを読み上げます。

さらに、Webページを検索エンジンに最適化すること（SEO）を考慮すれば、そのWebページにあるコンテンツをユーザーがどのようなキーワードで検索するかを考えて、そのキーワードを含めることができればなおよいでしょう。

『Techniques for WCAG 2.0』の「G88: ウェブページに対して、コンテンツの内容が分かるページタイトルを提供する」では、さらに次のようなページタイトルを推奨しています。

  • どのサイト又は他のどのリソースに属しているかを特定している。
  • ウェブページが属するサイト又はその他のリソースの中において、他に同じものがない。

これらもふまえて、ページタイトルは「ページタイトル｜Webサイト名」のように、ページタイトルの後にWebサイト名を明記するようにします。そして、ページタイトルの表示は後半部分が省略されることが少なくないため、冒頭部分をできるかぎり固有の文言で記述するとよいでしょう。

事例 1. Webページの主題

悪い例


<title>方針</title>

<title>要素を用いて記述されたページタイトルが、Webページの主題を特定していない。

良い例


<title>ウェブアクセシビリティ方針｜エー イレブン ワイ</title>

<title>要素を用いて記述されたページタイトルが、Webページの主題を特定している。あわせて、ウェブサイト名も併記されている。
注記：ページタイトルとサイト名（サービス名）を区切る記号は、任意のものでよい。

事例 2. ページタイトルの位置（推奨）

悪い例


<title>エー イレブン ワイ｜ウェブアクセシビリティ方針</title>

ページタイトルだけでなく、Webサイト名も併記しているのはよいが、ページタイトルの前にWebサイト名を記述しているため、例えばブラウザのタブで表示された際などのように、後半部分の表示が省略されるとページタイトルがほとんど表示されなくなってしまうことがある。

良い例


<title>ウェブアクセシビリティ方針｜エー イレブン ワイ</title>

ページタイトルを前、Webサイト名を後ろに記述している。後半部分の表示が省略されてしまっても、ページタイトルを確認することができる。

『JIS X 8341-3:2016 / WCAG 2.0』の達成基準

2.4.2 ページタイトルの達成基準（レベル A）
ウェブページには、主題又は目的を説明したタイトルがある。

JIS X 8341-3:2016 / WCAG 2.0「2.4 ナビゲーション可能のガイドライン」

参考