HTML文档在服务端预构建环节的SEO元数据动态生成技术

SEO元数据必须在服务端预构建时动态生成并注入HTML，硬编码或客户端修改将导致搜索引擎降权；Next.js需在getStaticProps中计算，VuePress/VitePress用frontmatter声明，PHP站点须前置变量声明并转义输出。

服务端预构建（SSG/SSR）时，title 和 meta name="description" 必须从页面上下文动态计算并注入，硬编码或全局 fallback 会导致全站标题雷同、描述缺失，Google 直接降权或截断展示。

Next.js 中 getStaticProps 里生成唯一 title 和 description

静态生成阶段无法访问 URL 参数以外的运行时状态，所以元数据必须在 getStaticProps 或 getServerSideProps 中完成计算。不能等到组件内用 useEffect 再改——那只是改了客户端 DOM，搜索引擎抓取的是服务端吐出的初始 HTML。

• 必须把内容数据（如文章标题、摘要）和元信息逻辑写在 getStaticProps 返回的 props 里，例如：props.pageTitle = data.title + " | 官方文档"
• title 字符数控制在 50–60，核心词靠前；description 控制在 120–155 字符，开头带主词，用自然语句，别堆关键词
• 避免在 getStaticProps 里调用未序列化的函数（如 new Date().toISOString()），否则构建失败；时间类字段应转为字符串再传入

VuePress / VitePress 的 frontmatter 是最轻量的动态元数据源

这类工具直接把 YAML frontmatter 解析为页面上下文，title 和 description 可原生映射到 <title> 和 <meta name="description">，无需额外配置。

• 每个 .md 文件顶部声明：---ntitle: HTML SEO 元数据实战ndescription: 详解如何在静态站点中正确生成可被 Google 抓取的 title 与 description 标签n---
• 不要在 frontmatter 里写 JS 表达式（如 title: ${siteName} - ${pageName}），这些不会被解析，只会当字符串输出
• 如果需要跨页面复用描述模板，应通过主题插件或自定义 enhanceApp 注入逻辑，而不是在 frontmatter 里拼接

PHP 静态化站点中变量前置声明是唯一可靠方式

无数据库的 PHP 站点没法走路由中间件，只能靠执行顺序保证变量在 include head.php 前已存在。任何“先 include 头部再赋值”的写法都会导致 $page_title 为空或 undefined。

立即学习“前端免费学习笔记（深入）”；

• 页面第一行必须是 <?php $page_title = "产品页 - 高性能静态方案"; $page_description = "无需数据库的 PHP 静态站点，支持动态元数据注入与 SEO 友好渲染。"; ?>
• inc/head.php 里直接 echo：<title><?= htmlspecialchars($page_title) ?></title>，注意必须做 htmlspecialchars 防 XSS
• 不要用 define() 或 global，作用域混乱且易被覆盖；也不要依赖 $_SERVER['REQUEST_URI'] 手动解析路径生成 title——URL 规则一变，全站元数据就崩

真正关键的不是“怎么写”，而是“谁负责写”：SEO 元数据永远不该由前端组件 runtime 拼接，也不该靠 JS 注入后补；它必须是服务端输出 HTML 时就确定的、不可变的一段字符串。漏掉这个前提，所有动态逻辑都只是障眼法。