单页应用中需用标准DOM API动态更新<head>，保留语义结构（title、meta charset、viewport等），精准替换而非清空，为动态标签添加data-id便于管理，路由离开时清理，兼容SSR需对齐服务端初始状态。
单页应用（SPA）中，<head> 的内容不能靠服务端每次渲染，需用 JavaScript 动态更新，并保持语义正确、SEO 友好、无障碍可用。核心是用标准 DOM API 操作 document.head，同时遵循 HTML5 语义规范，避免硬编码或破坏已有结构。
语义化 head 的基础结构必须保留
一个合规的 <head> 至少应包含 <title>、<meta charset>、<meta name="viewport"> 和可选的 <link rel="canonical">。动态替换时不能清空整个 <head>，而应精准更新特定元素：
- 用
document.querySelector('title')获取并修改文本内容，而非创建新<title>标签 - 修改
<meta name="description">时，先查是否存在，存在则改content属性；不存在则用document.createElement('meta')创建并插入到合适位置（通常在<title>后） -
<link rel="canonical">应随路由变化同步更新href，且只保留一个，重复时需移除旧节点
按路由动态注入结构化数据与 Open Graph 标签
不同页面需对应不同的 <script type="application/ld+json"> 和 <meta property="og:...">。推荐封装为纯函数，接收页面元数据后生成并挂载：
- 用
JSON.stringify()生成合法的 JSON-LD 字符串，再赋值给textContent（不是innerHTML） - Open Graph 标签统一用
name或property属性区分，插入前先用querySelector清理同名旧标签 - 确保
og:url始终为当前完整 URL（含协议和路径），避免相对路径导致分享异常
避免重复、冲突与内存泄漏
频繁切换路由时，未清理的 <meta> 或 <link> 会堆积，影响 SEO 和性能：
立即学习“前端免费学习笔记（深入）”；
- 为每个动态插入的标签添加唯一
data-id属性（如data-id="og-title"），便于后续精准定位和替换 - 在路由离开前（如 Vue 的
beforeUnmount、React 的useEffect cleanup）移除本页注入的自定义标签，保留全局必需标签（如 viewport） - 不要用
document.write()或 innerHTML 替换整个 head —— 会销毁已绑定事件、重置样式表加载状态
兼容 SSR 与爬虫的关键细节
若项目支持服务端渲染（如 Nuxt、Next），客户端 head 更新必须与服务端初始状态对齐：
- 服务端生成的
<title>和 meta 标签需带data-server-rendered属性，客户端仅更新无该属性的节点 - 使用
document.title设置标题时，它会自动同步到<title>元素，但反向操作（改 title 元素）不一定触发document.title更新，建议双向同步 - Googlebot 等现代爬虫能执行 JS，但仍建议服务端提供基础语义，客户端增强——不依赖 JS 即可读取关键信息
