<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

浏览器兼容性

另见