G4.09.4document title should match the in-page heading设计研究

页面标题应与页内主标题一致,避免用户怀疑跳转到错页

别名: 标题与H1一致 · title heading match · 跳转错页怀疑 · H1 document.title

概念解释

标签上的名字和页内最大的那行字说的应是同一对象。document.title 与 H1 不必逐字复印,但概念核心要同一个:都是这张发票、这篇指南、这一步的名字。两者各说各的,人会以为跳错了页,或以为标签还停在上一份文档。一致性保护的是「我到了标签所承诺的那一页」。

机制

跳转是一次预测检验。人从链接文案、标签 title 形成预期,落地后用 H1 验证。预期和 H1 对不上,检验失败,即使 URL 是对的也会后退再点一次。读屏用户更硬:他们用 title 判断进了哪一页,再用第一个标题确认,两套名字会迫使他们听完整页来排除「错页」。SPA 常见的分裂是外壳 title 还是上一路由,H1 已经换成新对象;或 SEO 写了一句营销 title,设计师写了一句产品 H1。

允许的差别是表面的:title 加品牌后缀、H1 省掉「的设置」这类语法。不允许的是对象换了(title 说订单,H1 说退货)、任务换了(title 说编辑,H1 说预览)。人没有一份对照表,他们用「像不像刚才那几个字」来判,不像就怀疑。

怎么研究

做「标题预测 → 看 H1」:只给 document.title 让人写出预期对象,再看页内 H1,记录是否判为错页。

  • 自变量:title 与 H1 的关系(同对象不同措辞 / 不同对象 / 完全相同)、是否有品牌后缀。
  • 因变量:判为错页的比例、后退重进的次数、读屏用户是否在标题层就停住。
  • 方法论注意点:营销味很重的 title 会让人预期一篇广告,H1 若是工具页,失败是对象类别错了,不只是措辞。不要用「两个字符串的编辑距离」当一致——要按对象身份是否同一来打分。深链进入时没有链接文案,title 与 H1 是仅有的一对检验材料,必须包含这条路径。

边界

列表页的 H1 是「全部订单」,title 含当前筛选「未发货的订单」,属于同一对象的限定,不是分裂。多语言站点 title 与 H1 可能各跟一套未同步的翻译,看起来不一致,根子在翻译流程。应用壳把产品名写在 title、把工作区名写在 H1,需要让人学会这两层,不能假装成同一行。

怎么落地

  • 从同一份页面身份生成 title 和 H1:同一对象名、同一任务名;title 只允许加品牌或极短的状态。
  • 路由切换时两处一起改,禁止 title 滞后一拍。
  • 验证:从搜索、从站内链、从深链各进同一页,对比标签名和 H1。未参与设计的人应立刻认为是同一对象。故意把 title 留在上一页的名字上作为反例,落地后应看到后退——那就是怀疑错页。

延伸

  • 同组G4.09.1 页面标题需反映当前具体内容,而非全站统一的站点名 · G4.09.2 标题是标签页、历史记录与收藏夹中识别页面的主要依据 · G4.09.3 多标签页同时打开同站点时,重复标题会让用户无法区分 · G4.09.5 动态更新的标题需避免过于频繁抖动,干扰标签页扫视
  • 相邻T2.02 标题与标签的可预测性 · T2.02.3 标签需与目标页面的标题一致 · G4.02 深链接
  • 站内检索title heading match · document.title · H1

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/G4.09.4