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></title> 和 <meta name="description">，无需额外配置。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每个
.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 时就确定的、不可变的一段字符串。漏掉这个前提，所有动态逻辑都只是障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
