<title>: 文件標題元素

基線 廣泛可用

此功能已完善,可在許多裝置和瀏覽器版本中使用。它在瀏覽器中可用,自 2015 年 7 月.

<title> 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 即時區域

示例

html
<title>Awesome interesting stuff</title>

此示例建立一個頁面,其標題(如視窗頂部或視窗標籤中顯示)為“很棒的有趣內容”。

技術摘要

內容類別 元資料內容.
允許內容 不是元素間空白的文字。
標籤省略 需要開啟和關閉標籤。請注意,省略</title>會導致瀏覽器忽略頁面的其餘部分。
允許父元素 包含其他<title>元素的<head>元素。
隱式 ARIA 角色 沒有對應的角色
允許的 ARIA 角色 不允許使用role
DOM 介面 HTMLTitleElement

規範

規範
HTML 標準
# the-title-element

瀏覽器相容性

BCD 表僅在瀏覽器中載入

另請參閱