<title>: 文件標題元素

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<title> HTML 元素定義了文件的標題,該標題會顯示在 瀏覽器 的標題欄或頁面的選項卡中。它只包含文字;元素內的 HTML 標籤(如果有的話)也會被視為純文字。

html
<title>Grandma's Heavy Metal Festival Journal</title>

屬性

此元素僅包含全域性屬性

用法說明

<title> 元素始終用在頁面的 <head> 塊內。

頁面標題和 SEO

頁面標題的內容對搜尋引擎最佳化(SEO)可能產生重大影響。總的來說,一個更長、更具描述性的標題比簡短或通用的標題表現更好。標題的內容是搜尋引擎演算法用來決定在搜尋結果中列出頁面順序的組成部分之一。此外,標題是你吸引那些在搜尋結果頁面上快速瀏覽的讀者的第一個“鉤子”。

撰寫優秀標題的一些指南和技巧

  • 避免使用一兩個詞的標題。對於詞彙表或參考風格的頁面,請使用描述性的短語或術語定義配對。
  • 搜尋引擎通常會顯示頁面標題的前 55-60 個字元。超出此範圍的文字可能會丟失,因此請儘量不要讓標題太長。如果您必須使用較長的標題,請確保重要部分靠前,並且標題中可能被截斷的部分不包含任何關鍵資訊。
  • 不要使用“關鍵詞堆砌”。如果您的標題只是一個單詞列表,演算法通常會降低您的頁面在搜尋結果中的排名。
  • 儘量確保您的標題在您自己的網站內儘可能獨特。重複或近似重複的標題可能會導致搜尋結果不準確。

無障礙

提供一個準確簡潔的標題來描述頁面的目的非常重要。

輔助技術使用者常用的導航技巧是讀取頁面標題並推斷頁面包含的內容。這是因為進入頁面來確定其內容可能是一個耗時且可能令人困惑的過程。標題應使網站的每個頁面都獨一無二,最好首先顯示頁面的主要目的,然後是網站名稱。遵循此模式將有助於確保螢幕閱讀器首先播報頁面的主要目的。這比使用者在同一網站中導航的每個頁面都要先聽網站名稱,然後再聽獨特的頁面標題,能提供更好的體驗。

示例

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 Live Regions

示例

html
<title>Awesome interesting stuff</title>

此示例建立一個頁面,其標題(顯示在視窗頂部或視窗選項卡中)為“Awesome interesting stuff”。

技術摘要

內容類別 元資料內容.
允許內容 非元素間 空白字元 的文字。
標籤省略 必須同時包含開始和結束標籤。請注意,省略 </title> 應該會導致瀏覽器忽略頁面的其餘部分。
允許父級 一個不包含其他 <title> 元素的 <head> 元素。
隱式 ARIA 角色 沒有對應的角色
允許的 ARIA 角色 不允許使用 role
DOM 介面 HTMLTitleElement

規範

規範
HTML
# the-title-element

瀏覽器相容性

另見