50–60字符（含空格）是最稳妥的网页标题长度，因搜索引擎按像素截断（移动端常限400px），大写字母、中文、符号占位更宽，超长易被截断且损害关键词识别与语义完整性。
50–60 字符（含空格）是最稳妥的长度，超了大概率被截断，尤其在移动端搜索结果里。
为什么不是“越长越好”或“统一60字符”
搜索引擎不强制长度上限，但会按像素宽度截断标题——大写字母、中文、符号（如|、&）占位不同，纯小写英文能塞更多字，全大写或中文多的标题可能 50 字就溢出。Google 和 Bing 在桌面端通常显示约 580–600 像素，移动端更窄（常400px）。实测发现：无线蓝牙耳机|主动降噪|Sony WH-1000XM5（48 字符）在多数设备完整显示；而Sony 官方网站｜WH-1000XM5 无线降噪耳机购买指南（59 字符）在 iPhone Safari 搜索结果里被砍成“Sony 官方网站｜WH-1000XM5 无线降噪耳…”。
常见错误现象：<title>SEO优化|HTML教程|前端入门|网站建设|免费学习</title>——堆砌导致语义断裂，且第 3 个竖线后内容基本看不到。
- 用 Semrush Google SERP Simulator 输入你的标题，切换单独看 desktop / mobile 效果
- 避免全大写：例如
HOW TO WRITE TITLE TAGS比How to write title tags多占 30% 像素 - 优先用
|或:分隔，别用—或•，后者渲染宽且部分爬虫解析异常 - 品牌名放末尾，除非品牌是核心搜索词（如“苹果官网”用户真搜这个）
动态页面中长度失控的典型场景
服务端没做截断逻辑，或 CMS 模板直接拼接长字段（如文章摘要、用户昵称、分类路径），导致生成的<title></title>动辄 80+ 字符。Nuxt 3 的useSeoMeta、Next.js 的generateMetadata都支持传入函数做截断，但默认不启用。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
- Next.js 中用
generateMetadata时，对title字段手动处理：title: truncate(product.name, 40) + ' | BrandName' - Nuxt 3 中在
useSeoMeta前先const safeTitle = title.length > 55 ? title.slice(0, 52) + '...' : title - PHP/CMS 场景下，模板里别直接
{{ post.title }} | {{ site.name }}，改用{{ truncate(post.title, 42) }} | {{ site.name }} - 注意中文标点：一个中文顿号
、比英文逗号,宽一倍，能不用就不用
SPA 页面里“看似正常”的长度陷阱
客户端 JS 更新document.title后，开发者肉眼看到浏览器标签页显示完整，就以为 OK —— 但 Googlebot（尤其旧版）、Bingbot、AI 抓取器（如 Perplexity、Claude Web）往往只读初始 HTML，而初始<title>Loading...</title>或<title>App</title>只有 10 字符，根本没机会执行 JS 截断逻辑。
关键点在于：长度合规的前提是「服务端输出即达标」，不是「JS 运行后达标」。
- React/Vue SPA 若无法 SSR，至少 fallback 一个按路由生成的合理值：
/product/abc-123 → 'ABC-123 产品详情 | Store' - 检查真实返回 HTML：右键 →「查看网页源代码」→ 搜索
<title></title>，确认内容不是空、不是Loading、不是被 JS 插入的 - 不要依赖
useEffect(() => { document.title = ... })，它对 SEO 无效
真正难的不是算字符，而是让每个 URL 对应的<title></title>在服务端就满足「关键词前置 + 长度可控 + 语义完整」三个条件——这要求 CMS 字段校验、模板层截断、路由映射规则全部协同，漏一环，移动端 SERP 就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
