收藏时网页名称直接来自HTML的标签内容，浏览器不读取meta标题或结构化数据；无时行为不一致，不可依赖；SPA需及时更新document.title以防错乱。
收藏时网页名称从哪来？<title></title> 是唯一决定因素
浏览器在用户点击“添加到收藏夹”或“保存为书签”时，**直接读取当前页面的 <title></title> 标签文本内容**作为默认名称，不经过任何截断、翻译或 fallback。没有 <title></title>，部分浏览器会回退到 URL 路径名（如 /product?id=123），但行为不一致，不可依赖。
注意：<meta name="title">、<meta property="og:title"> 或 JSON-LD 中的 name 字段，对浏览器原生收藏行为**完全无效**——它们只影响社交媒体分享或搜索引擎结果展示。
<title></title> 写法直接影响收藏体验
用户收藏时往往只扫一眼标题，太长会被截断（Chrome 通常显示前 60 字符左右，Firefox 略多，移动端更短），太泛（如“首页”“欢迎光临”）会导致书签库混乱。
- 优先把核心关键词前置：用
<title>订单详情 - #ORD-7890 - 你的商城</title>，而不是<title>你的商城 - 订单详情 #ORD-7890</title> - 避免动态符号堆砌：少用
|、—、•占位，它们挤占有效信息长度 - 服务端渲染页面，确保
<title></title>在 HTML 初始响应中已存在；SPA 应在路由切换后立即调用document.title = ...，否则收藏可能抓到旧标题或空值
SPA 页面收藏名称错乱的典型原因
单页应用常见问题：用户打开商品页 → 浏览器地址栏更新 → 用户立刻收藏 → 结果存的是“首页”或上一个路由的标题。这是因为 document.title 更新滞后于 URL 变化，或未监听路由事件。
实操建议：
- React（使用
react-router@6）：在路由组件内用useEffect设置document.title，并确保依赖数组包含关键参数（如productId） - Vue（
vue-router）：在组件beforeRouteEnter或setup中调用document.title = ...，避免仅靠<title></title>模板字符串静态渲染 - 通用兜底：监听
popstate和hashchange，延迟 50ms 再设document.title，防止被路由中间态覆盖
SEO 与收藏标题可以不同吗？
不能物理分离——浏览器收藏只认 <title></title>，而搜索引擎也主要依赖它。但可通过合理设计兼顾两者：
- 搜索友好型写法：
<title>无线降噪耳机 | 支持空间音频 | 品牌旗舰店</title>（含关键词 + 差异点 + 品牌） - 避免堆砌：不要写成
<title>耳机 降噪 耳机排行榜 2024 无线蓝牙 入耳式 高音质</title>，既伤害可读性，也可能被搜索引擎视为 spam - 动态页面务必服务端注入真实内容：比如 CMS 文章页，
<title>{{ post.title }} | {{ site.name }}</title>，而非统一写死“文章详情”
真正容易被忽略的是：很多团队用 JavaScript 动态改 document.title 后，忘了同步更新 <title></title> 的 SSR 输出，导致首屏 HTML 里的 <title></title> 仍是“加载中”，被爬虫或预渲染服务捕获——这不仅影响 SEO，也会让首次访问用户收藏到错误名称。
