标签需严格控制在50–60字符内，优先呈现“主词+实体+差异点”，避免JS渲染失效和CMS硬编码，确保每页唯一且语义清晰。
<title></title> 标签不是“写个名字就行”的装饰项，它直接决定用户在搜索结果里看不看得懂、点不点得进、AI引不引用你。优化不到位，流量损失是实打实的——某电商曾因 3000 个商品页共用同一段标题，搜索流量跌了 65%。
为什么 Google 和用户都只信前 55 个字符
Google 搜索结果页（SERP）对 <title></title> 的显示上限是约 50–60 字符（含空格），超长部分会被截断为省略号。移动端更敏感，常在 50 字符左右就截断。一旦核心信息被砍掉，比如把 <title>Sony WH-1000XM5 无线降噪耳机｜官网旗舰店</title> 写成 <title>Sony 官网旗舰店｜无线蓝牙耳机｜主动降噪｜超长续航｜30 小时｜ANC｜APP 控制｜多点触控｜语音助手支持</title>，用户看到的可能只是 “Sony 官网旗舰店｜无线蓝牙耳机｜主动降噪｜…”，主卖点全丢了。
实操建议：
- 用 Semrush Title Analyzer 或浏览器插件实时预览截断效果，别靠肉眼数
- 优先保「主词 + 实体 + 差异点」结构，例如：
<title>无线蓝牙耳机｜主动降噪｜Sony WH-1000XM5</title>，而不是倒过来 - 避免全大写（
SONY WH-1000XM5）、符号堆砌（» • | »）、冗余后缀（统一加- 官方网站）
SPA 页面的 <title></title> 为什么经常失效
React/Vue 等纯客户端渲染应用，初始 HTML 中的 <title></title> 往往是 <title>Loading</title> 或占位符。旧版 Googlebot 和绝大多数 AI 抓取器（如 Perplexity、Claude Web）不会等 JS 执行完，直接读取初始 HTML——结果就是你的页面在 SERP 或 AI 引用中显示为 “Loading” 或空值。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
实操建议：
- Next.js 用户必须用
generateMetadataAPI，在服务端生成完整<title></title>和<meta name="description"> - Nuxt 3 用户用
useSeoMeta，别在onMounted里改document.title - 若无法服务端渲染，至少 fallback 一个有意义的默认值：路由
/blog/seo-title→<title>SEO title 写法指南 | 博客</title>
CMS 和模板里最容易踩的硬编码坑
很多团队在 CMS 模板里把 <title></title> 写死成 <title>首页 - XX公司</title> 或 <title>关于我们 - XX公司</title>，导致所有页面标题雷同、无区分度。搜索引擎会把它识别为模板化低质内容，降权处理；用户在 SERP 里看到一堆“首页 - XX公司”，根本分不清哪页是产品、哪页是案例。
实操建议：
- 用动态变量替换，例如：
<title>{{ page.title }} | {{ site.name }}</title>，确保每页输出唯一 - 首页别写“首页”，写实质价值，例如：
<title>前端开发工具与实战指南 | CodeCraft</title> - 列表页（如 /blog、/products）需带分类意图，例如：
<title>SEO 教程｜前端工程师必学的 HTML 优化技巧</title>
最常被忽略的一点：验证必须看「查看网页源代码」里的 <title></title>，而不是浏览器标签页上显示的内容——后者可能是 JS 动态改的，对 SEO 完全无效。
