修改 document.title 最简单且兼容性最佳，而动态操作 需精准增删、注意属性名与浏览器兼容性，seo 相关元信息须服务端输出才有效。
修改 document.title 最简单但只改标题
很多场景下你以为要动 <meta>，其实只需要改页面标题——比如 SPA 路由切换、SEO 预渲染 fallback。直接赋值 document.title 是最轻量、100% 兼容的方式，不触发重排，也不依赖 DOM 加载时机。
常见错误是等 DOMContentLoaded 才去设，其实随时都能设；但注意：如果服务端已输出 <title></title>，JS 修改只是影响当前视图，不会改变原始 HTML 源码或搜索引擎抓取到的初始标题。
示例：
document.title = "用户详情 - 张三";
动态增删 <meta> 标签必须操作 document.head
不能用 innerHTML 替换整个 head，否则会清掉已加载的样式表、脚本、预加载指令，甚至导致 CSS 闪退或资源重复加载。正确做法是用 appendChild、removeChild 或 querySelector 精准控制。
立即学习“Java免费学习笔记（深入）”；
使用场景包括：单页应用更新 description 和 keywords、PWA 动态设置主题色（theme-color）、调试时注入 viewport 覆盖。
容易踩的坑：
- 没加
name或property属性，导致标签无效（如 Open Graph 要用property，常规 SEO 用name） - 重复插入同名
<meta>，造成多个冗余标签 - 在
head还没 ready 时就操作（极少见，但 SSR + hydration 不稳时可能出问题）
实操建议：
const metaDesc = document.querySelector('meta[name="description"]');<br>if (metaDesc) metaDesc.setAttribute('content', '新的页面描述');<br>else {<br> const el = document.createElement('meta');<br> el.name = 'description';<br> el.content = '新的页面描述';<br> document.head.appendChild(el);<br>}
theme-color 和 viewport 修改后可能不立即生效
这两个 <meta> 标签对浏览器 UI 有直接影响，但不是所有浏览器都支持运行时更新。Chrome on Android 会响应 theme-color 变更（地址栏颜色），但 Safari 完全忽略；viewport 在 iOS 上一旦解析完成就锁定，JS 修改无效。
性能影响小，但兼容性差异大，别把它当通用方案来写。尤其不要靠 JS 修改 viewport 实现“缩放控制”——这既违反移动端适配规范，也大概率不起作用。
关键参数差异：
-
<meta name="theme-color" content="#4285f4">：仅 Chrome/Edge on Android 生效 -
<meta name="viewport" content="width=device-width, initial-scale=1">：仅首次加载时读取，后续 JS 修改无意义
SEO 相关元信息（description / og:title）JS 修改基本无效
搜索引擎爬虫（Googlebot、Bingbot）大多不执行 JS，或只执行有限 JS，且不等待异步逻辑。你用 JS 动态塞进 og:description，很可能被当成空值处理。
真正起作用的只有服务端渲染（SSR）或静态生成（SSG）时写死在 HTML 中的 <meta>。客户端路由跳转后想提升分享卡片质量？得配合服务端做动态路由预渲染，或者用 Next.js / Nuxt 的 getServerSideProps 等机制。
所以别在 useEffect 或 mounted 里狂改 og: 标签——它对 SEO 几乎没用，只对部分客户端分享 SDK（如微信内置浏览器）有点用，但也得看是否主动 re-parse head。
一句话：JS 改 og: 类标签，是给「人看的分享弹窗」擦边球，不是给「搜索引擎」看的。
复杂点在于：你得区分清楚，这个修改到底是给用户交互用，还是真为了 SEO。后者，JS 做不了主；前者，记得清理旧标签、避免重复，不然 head 会越来越胖。
