跳到正文

页面标题

Title Tag

中级网页

页面标题(Title Tag)是写在网页文档头部信息里的页面名称,浏览器标签页通常会显示它,搜索结果也可能采用它。它帮助用户在多个标签页或搜索结果中认出要找的页面。

你可能会说:「我做的网站有好几个页面,想让浏览器标签页显示各自的名字,该怎么让 AI 改?」

读之前建议先了解

动手看看

手冲咖啡入门指南|慢生活
今日食谱
manlife.example/coffee
第一次手冲,怎么开始?
正文标题保持不变
文档头部 · head
<title>手冲咖啡入门指南|慢生活</title>
搜索结果预览 · 示意
慢生活 · manlife.example › coffee
手冲咖啡入门指南|慢生活
第一次手冲,怎么开始?|慢生活
从器具准备到粉水比例,用一份指南开始你的第一杯手冲咖啡。
文档中的页面标题
模拟搜索引擎改写标题

切换页面标题,对照文档头部、浏览器标签页和搜索结果预览。也可以悬停或用 Tab 聚焦标题;这里是界面示意,不会真的跳转。

主题放在前面、网站名放在后面,用户更容易认出这页讲什么。注意正文标题没变:页面标题和正文里的大标题不是同一个东西。

要点

  1. 1

    它属于网页的头部信息

    页面标题写在网页文档的头部信息里,不是页面正文中的一行大字。你让 AI 修改时,可以明确说“改浏览器标签页显示的标题”,这样它更容易找到该改的位置。

  2. 2

    显示位置不只浏览器标签页

    浏览器标签页通常显示页面标题,收藏网页时也可能用到它。搜索引擎可能把它用作结果标题,但也可能自行调整,所以改好页面标题不等于能控制搜索结果的最终文字。

  3. 3

    不同页面要有可辨认的名字

    如果产品首页、价格页和帮助页都叫“我的网站”,用户开着多个标签页时就很难区分。我们可以把页面内容和产品名组合起来,例如“价格方案|云图笔记”。

容易混淆的地方

页面标题和页面上的主标题不是一回事:主标题是用户进入页面后看到的内容,页面标题主要供浏览器等读取,两者可以相近,却不必完全相同。它也不等于分享卡片标题;如果你关心链接发到社交平台后的预览,还得检查 Open Graph 等分享信息。

什么时候用

适合用

  • 做一个有首页、价格页和帮助页的网站,想让用户打开多个标签页时,能从标题认出每一页。
  • 给后台的项目详情页加上项目名称,让用户收藏页面后,能更容易辨认这条收藏记录。
  • 做单页应用时,路由切换到了新页面,也想让浏览器标签页的名称跟着当前页面变化。

不适合用

  • 只是想给页面里的一张卡片起名,用卡片上的可见文字更直接,页面标题管不到单张卡片。
  • 只是想给网页内的标签页写名称,用标签页组件的文字;切换组件选项不一定是在切换网页。
  • 只是想改变链接分享到社交平台时的预览标题,先检查 Open Graph 信息,而不是只改页面标题。

练一练

你做了一个项目管理网站。用户从项目列表进入不同项目后,浏览器标签页始终显示“项目管理”。你会请 AI 怎么改?

让 AI 帮你做

请检查网站各页面的页面标题:让首页、价格页、帮助页能从浏览器标签页区分;项目详情页的标题包含当前项目名,并在项目切换后更新。请说明你修改了哪些位置,以及如何验证结果。

接下来学什么