页面标题

要求内容

文档头部的 <title> 元素必须描述页面的主题内容。屏幕阅读器用户在页面加载的瞬间即会听到它——这是他们获得的第一个方向性提示。视觉用户则在浏览器标签页、浏览历史、书签以及搜索引擎结果页中看到它。标题不符合本成功准则，会让所有这些用户对自己所访问的页面产生困惑。

标题不必追求文采，但必须具体。“首页”不符合要求，“定价——Acme CRM”符合要求。

如何满足要求

• 标题应先写页面名称，再写网站名称："柏林无障碍酒店——残障世界"。
• 在单页应用（SPA）路由切换时，同步更新客户端标题。Next.js、React Router 和 Vue Router 均需要显式设置 document.title，或使用框架专属的辅助方法。
• 在标题中反映表单错误和搜索结果状态："3 个错误——账户设置" 或 "搜索：慢性疲劳——47 条结果"。
• 将最具辨识度的信息置于标题开头。在 30 个字符宽的标签栏中，“残障世界——如何申请 SSDI”会将主题内容隐藏在后端。
• 对于多步骤表单，在标题中注明当前步骤："第 2 步，共 4 步：地址——申请福利"。

常见失败案例

• 整站统一使用相同标题：每个页面都显示 "Acme Inc."，因为模板从未覆盖默认值。
• 空 <title></title>——当 CMS 模板假设编辑者必然会填写标题时，这种情况出人意料地常见。
• SPA 路由无标题：初始 HTML 使用通用标题，路由切换时从不更新。
• 标题仅为品牌名称，不含页面主题（联系页、定价页和产品页均显示 "Acme"）。
• 所见即所得编辑器导出时遗留的”未命名文档”。

为何重要

对于屏幕阅读器用户而言，页面标题相当于视觉用户查看浏览器窗口顶部——它告诉用户是否到达了目的页面。没有它，每个页面在加载时听起来都一样。它也是 SEO 和链接预览的基础，因此修复本成功准则往往能同时赢得产品、市场和内容团队的认可，推动成本极低。