Next.js服务端预构建时必须在build time静态生成元数据，因SSG阶段无法执行浏览器JS，document.title等客户端方案失效；需用getStaticProps+metadata对象或Astro frontmatter等方式在构建时确定title、description、canonical、OG等全部元数据，确保SEO有效性和HTML解析正确性。
服务端预构建时如何动态注入和<meta name="description">
静态生成（SSG）阶段无法执行浏览器环境的JS，所以靠document.title或React Helmet这类客户端方案完全失效。必须在构建时（build time）就确定每个页面的元数据内容。
- Next.js 中用
getStaticProps返回title和description，再通过Head或metadata对象注入（Next.js 13.4+ 推荐用export const metadata = { title: ..., description: ... }） - Astro 中在页面 frontmatter 里直接写
title和description字段，构建器自动提取并注入<title></title>和<meta name="description"> - Vite + Vue/React 项目需配合插件（如
vite-plugin-html）在构建时读取路由参数或数据源，模板化生成 HTML 片段 - 错误做法：在
useEffect里改document.title—— 构建产出的 HTML 里仍是默认值，爬虫看到的就是空或通用标题
canonical 标签为什么必须在预构建阶段动态生成
<link rel="canonical"> 不是可选装饰，而是防止重复内容被降权的关键信号。它必须指向当前页面的真实规范 URL，不能写死。
- 举例：/blog?id=123 和 /blog/123 本是同一内容，但若两者都预构建为静态页，且 canonical 都写成
/blog/123，那 /blog?id=123 这个页面就失去存在意义；反之，若都写成/blog?id=123，又违背 SEO 最佳实践（参数 URL 不应为规范地址） - 正确方式：构建时根据当前页面路径逻辑推导出规范 URL，比如将所有带 query 的路径映射为 clean path，并写入该页的 canonical
- 常见坑：用相对路径（如
/blog/123）—— 服务部署在子路径（如<a href="https://www.php.cn/link/9bf7386a84415b80b67c90f0c1c743c7">https://www.php.cn/link/9bf7386a84415b80b67c90f0c1c743c7</a>）时会被解析为<a href="https://www.php.cn/link/ca2417f024ebf900ba3949991f343e78">https://www.php.cn/link/ca2417f024ebf900ba3949991f343e78</a>，而非<a href="https://www.php.cn/link/9bf7386a84415b80b67c90f0c1c743c7blog/123">https://www.php.cn/link/9bf7386a84415b80b67c90f0c1c743c7blog/123</a>；必须用绝对 URL
Open Graph 和 Twitter Card 元数据能否静态补全
能，但必须与页面内容严格一致，否则社交平台分享时会抓取错误摘要或图片。
SEO Keyword Density
下载
SEO关键词密度优化与页面审计技能。使用场景：①提供页面路径与关键词进行SEO优化；②提升页面关键词密度；③提升搜索引擎排名；④进行SEO审计（meta标签、OG、hreflang等）。触发词：关键词密度、SEO优化、关键词优化等。
-
og:title应等于当前页title或其精简变体，不可复用模板字符串 -
og:image必须是可公开访问的绝对 URL，且尺寸符合平台要求（如 Facebook 要求至少 600×315 px）；构建时若图片路径由 CMS 动态提供，需提前下载或生成占位图，避免上线后 404 -
twitter:card类型（summary_large_image等）要匹配实际是否有大图，否则 Twitter 会降级为纯文本卡片 - 错误示例：所有文章页共用同一张封面图的
og:image地址 —— 分享任意文章都显示首页图，用户点击意愿大幅下降
预构建中遗漏 meta charset 或 viewport 的后果
这两个标签不是“锦上添花”，而是解析底线。它们必须出现在 HTML 的 最前部，且不能依赖 JS 注入。
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">若缺失或位置靠后，中文、emoji、代码符号在部分浏览器（尤其旧版 Edge、某些邮件客户端内嵌 WebView）中直接乱码，且可能中断后续脚本解析 -
<meta name="viewport" content="width=device-width, initial-scale=1">若未写入构建产物，移动端访问时页面以 980px 宽度渲染，文字小到无法阅读，iOS Safari 甚至拒绝触发 pinch-to-zoom - 构建工具（如 Next.js、Astro）通常默认注入，但自定义 HTML 模板时容易覆盖或删掉；检查最终生成的
index.html文件头部，确认这两行真实存在且顺序正确（charset在viewport之前）
预构建阶段的元数据不是“填完就跑”，它是一次性写入 HTML 的硬编码事实。任何依赖运行时判断的逻辑（比如“登录后显示不同 description”）在此阶段无法生效，必须提前收敛规则或拆分为不同构建产物。
