此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<title> HTML 文档标题元素

基线 广泛可用

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

<title> HTML 元素定义文档的标题,该标题显示在浏览器的标题栏或页面标签页中。它只包含文本;元素内的 HTML 标签(如有)也会被当作纯文本处理。

html
<title>祖母的重金属音乐节日记</title>

属性

该元素仅包含全局属性

使用说明

<title> 元素始终用在页面的 <head> 块内。

页面标题与 SEO

页面标题的内容会对搜索引擎优化(SEO)产生显著影响。一般来说,较长且具有描述性的标题比简短或笼统的标题表现更好。标题内容是搜索引擎算法决定搜索结果中页面排列顺序时所使用的因素之一。此外,标题也是吸引浏览搜索结果页的读者注意力的切入点。

撰写良好标题的几条准则和建议:

  • 避免只有一两个词的标题。使用描述性短语,或对术语表/参考类页面采用“术语—定义”配对。
  • 搜索引擎通常大约只显示页面标题的前 55–60 个字符。超出部分可能会丢失,因此尽量不要让标题超过这个长度。如果必须使用较长标题,请确保重要部分靠前,且标题中可能被截断的部分不包含关键内容。
  • 不要使用“关键词堆砌”。如果标题只是一串词语列表,算法往往会降低你的页面在搜索结果中的排名。
  • 尽量确保站点内各页面的标题尽可能唯一。重复——或近乎重复——的标题可能导致搜索结果不准确。

无障碍

提供准确且简洁的标题来描述页面用途非常重要。

辅助技术用户常用的一种导航技巧是阅读页面标题,并据此推断页面所含内容。这是因为进入页面内部再判断其内容可能既耗时又容易令人困惑。网站中每个页面的标题都应唯一,理想情况下先呈现页面的主要用途,再跟网站名称。遵循这一模式有助于确保屏幕阅读器首先朗读页面的主要用途。这比用户在同一网站中导航每个页面时都要先听完网站名称再听到独特的页面标题,体验要好得多。

示例

html
<title>菜单 - 蓝屋中餐 - FoodYum:即刻下单送达!</title>

如果表单提交包含错误且提交后重新渲染当前页面,可以利用标题帮助用户意识到提交中的错误。例如,更新页面的 title 值以反映重要的页面状态变化(如表单验证问题)。

html
<title>2 个错误 - 你的订单 - 海鲜商店 - Food:即刻下单送达!</title>

备注:目前,动态更新页面标题不会被屏幕阅读器自动朗读。如果你要通过更新页面标题来反映页面状态的重大变化,可能还需要使用 ARIA 实时区域

示例

html
<title>精彩有趣的内容</title>

此示例将页面标题(显示在窗口顶部或窗口标签页中)设为“精彩有趣的内容”。

技术概要

内容分类 元数据内容
允许的内容 非元素间空白字符的文本。
标签省略 开始标签和结束标签都是必需的。请注意,若省略 </title>,浏览器应忽略页面的其余部分。
允许的父元素 不包含其他 <title> 元素的 <head> 元素。
隐式 ARIA 角色 没有对应的角色
允许的 ARIA 角色 没有允许的 role
DOM 接口 HTMLTitleElement

规范

规范
HTML
# the-title-element

浏览器兼容性

参见