このページの本文へ移動

H25:title要素を用いて、ページタイトルを提供する

出典:WAIC. “ H25: title 要素を用いて、ページタイトルを提供する新しいウィンドウを開きます ” WCAG 2.0 達成方法集(参照2024年7月1日)

概要

H25は、HTMLのtitle要素を使用してページタイトルを提供することを推奨しています。この方法により、各ページの内容を正確に反映したタイトルを設定し、ブラウザのタブや検索エンジンの結果ページで適切に表示されるようにします。これにより、ユーザーはページの内容を迅速に理解し、ナビゲーションが容易になります。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用(対象)

こちらは、次の達成基準に関連する達成方法です。

実践的な方法

title要素を正しく配置する

title要素は、必ずheadセクション内に配置します。
これにより、ブラウザや検索エンジンが適切にタイトルを認識できます。

<html>
<head>
  <title>ウェブアクセシビリティ診断 | 株式会社プルーヴェ</title>
</head>
<body>
  ...
</body>
</html>

ページ内容に応じたタイトルを設定する

title要素内のテキストは、そのページの内容を正確に反映したものである必要があります。ユーザーがページを訪れた際に期待する内容を示し、ページの目的や主題を簡潔に表現します。例えば、製品ページであれば「製品紹介 | 株式会社プルーヴェ」といったタイトルを設定します。

ページごとに一意のタイトルを提供する

各ページに固有のタイトルを設定し、サイト内でのタイトルの重複を避けます。これにより、ユーザーは異なるページ間でのナビゲーションが容易になり、検索エンジンも異なるページを正確にインデックス化できます。

具体例

悪い例

<title>ホーム</title>

内容が不明瞭であり、ユーザーに何のページか伝わりません。

良い例

<title>株式会社プルーヴェ - ホームページ制作とウェブアクセシビリティ</title>

内容が明確で、ユーザーが求める情報を示しています。

悪い例

<title>サービス</title>

一般的すぎて具体性がありません。

良い例

<title>ウェブアクセシビリティ診断サービス | 株式会社プルーヴェ</title>

具体的で、ユーザーが期待する内容を正確に反映しています。

まとめ

H25の実践により、ユーザーにとってわかりやすく、検索エンジンにも適切に対応したページタイトルを提供することができます。これにより、ページの内容が明確になり、ナビゲーションが容易になるとともに、検索エンジンの視認性も向上します。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ