<title>: 文書題名要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<title> は HTML の要素で、ブラウザーの題名バーやページのタブに表示される文書の題名を定義します。テキストのみを含めることができます。要素内のタグはすべて無視されます。

html
<title>Grandma's Heavy Metal Festival Journal</title>
コンテンツカテゴリー メタデータコンテンツ
許可されている内容 要素間のホワイトスペースではないテキスト。
タグの省略 開始タグと終了タグの両方が必要。なお、 </title> を忘れると、ブラウザーがページの残りの部分を無視することがある。
許可されている親要素 他に <title> 要素を含まない <head> 要素。
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLTitleElement

属性

この要素にはグローバル属性のみがあります。

使用上のメモ

<title> 要素は常にページの <head> ブロックの中で使われます。

ページの題名と SEO

ページの題名の内容は、検索エンジン最適化 (SEO) に著しい影響を与えることがあります。一般的に、長く、説明的な題名は、短く、一般的な題名よりも効果があります。題名の内容は、検索エンジンのアルゴリズムが検索結果にページを列挙する順序を決定するために使用する材料の一つです。また、題名は検索結果ページを眺めている読者の注意を引く最初の「フック」となります。

良い題名を作成するためのガイドラインやコツを示します。

  • 1 ～ 2 語の題名は避けましょう。説明的な文言を使用したり、用語集や参照スタイルのページでは用語と定義の組を使用したりしましょう。
  • 検索エンジンは通常、ページの題名は最初のおよそ 55–60 文字を表示します。それを超えるテキストは失われることがあるので、それよりも長くはしないようにしてください。もっと長い題名を使う必要があるのであれば、重要な部分を前にもってくると、題名の中の重要な部分が落とされにくくなります。
  • 「キーワード BLOB」を使用しないでください。題名が単なるキーワードの羅列であると、アルゴリズムはそのページの検索結果内の順位を落とすことがあります。
  • 題名はできるだけサイト内で固有のものにするようにしてください。複写や複写に近いものは検索結果を不正確にすることがあります。

例

html
<title>素敵で面白いこと</title>

この例ではページの題名全体 (ウィンドウの最上部またはウィンドウのタブに表示されるもの) を「素敵で面白いこと」にします。

アクセシビリティの考慮

正確で簡潔な題名を提供し、ページの目的を記述することが重要です。

支援技術を使用するユーザーのためのナビゲーション技術として、ページの題名を読んで、どのようなコンテンツが含まれるかを推測するというものが良く使われます。これはコンテンツを特定するためにページ間を移動すると、時間を消費したり手順を間違える可能性があったりするからです。題名はウェブサイトのページごとに固有のものであるべきです。ページの主な目的を最初に示し、その後にウェブサイト名が続くのが理想的です。このパターンに従うことで、ページの主な目的が確実にスクリーンリーダーによって最初に告知されるようになります。こうすることで、ユーザーが同じウェブサイト内で移動するすべてのページで、固有のページ題名よりも先にウェブサイトの名前が読み上げられるのを待たなければならないよりも、はるかに優れた使い勝手になります。

例

html
<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>

フォームの送信にエラーが含まれていて、送信すると現在のページが再表示された場合、題名を使用してユーザーに送信のエラーを認識させることができます。例えば、ページ title の値を更新して、重要なページの状態変化（検証状態の問題など）を反映します。

html
<title>
  2 errors - Your order - Sea Food Store - Food: Online takeout today!
</title>

メモ: 現在のところ、ページの題名を動的に更新しても、スクリーンリーダーによって自動的にアナウンスされることはありません。ページの状態の大幅な変更を反映するためにページの題名を更新する場合は、ARIA ライブリージョンを使用する必要があるかもしれません。

仕様書

Specification
HTML Standard
# the-title-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報