静态页面的title和description必须在构建时写死于html源码中，搜索引擎不执行js；next.js需通过getstaticprops返回元数据并在head或generatemetadata中使用，禁止动态设置或非序列化操作。
静态发布工具生成的 HTML 页面，title 和 meta name="description" 必须在构建时就写死进 HTML 源码里，而不是靠 JS 在浏览器里改——搜索引擎只看初始 HTML，JS 修改无效。
Next.js 静态导出时 getStaticProps 是唯一可信入口
你不能在组件里用 useEffect + document.title 动态设标题；也不能在 getStaticPaths 里漏掉 props 透出元数据。所有页面级元信息必须从 getStaticProps 返回的 props 中来，并在 Head 组件或 generateMetadata（App Router）中消费。
-
getStaticProps中禁止调用new Date()、Math.random()等非序列化函数，否则构建失败；时间类字段要提前转成字符串，如lastModified: new Date().toISOString().split('T')[0] - 若页面依赖 CMS 数据，确保该数据已 fetch 完并结构化传入
props，不要留到客户端再请求 - 字符数要硬性约束：
title控制在 50–60 字符，description120–155 字符；核心关键词必须前置，避免堆砌
VuePress / VitePress 的 frontmatter 是最简方案
这类工具把 YAML frontmatter 当作元数据源，天然支持 per-page title 和 description，无需额外插件或逻辑。但容易踩坑的是：它不解析 JS 表达式，也不支持变量引用。
- 正确写法：
title: "VuePress 入门指南"、description: "从零开始搭建文档站点，支持主题定制与 SEO 优化" - 错误写法：
title: ${siteConfig.name} - ${page.title}或description: require('./utils').genDesc(page)—— 这些只会被当纯字符串输出，不会执行 - 如需复用模板（例如统一加后缀），应通过主题配置或
enhanceApp注入逻辑，而不是塞进 frontmatter
PHP 静态站必须前置声明变量且严格顺序执行
没有路由中间件、没有构建流程的 PHP 静态站，$page_title 和 $page_description 必须在 include 'inc/head.php' 前定义完毕，且必须做 htmlspecialchars() 转义。
- 第一行就得是
<?php $page_title = "产品页 - 高性能静态方案"; $page_description = "无需数据库的 PHP 静态站点..."; ?> - 绝对不要用
define()或全局变量，作用域不可控，多页面 include 时极易覆盖 - 禁用基于
$_SERVER['REQUEST_URI']解析路径生成 title 的做法——URL 规则一变，全站元数据就崩，维护成本爆炸
最容易被忽略的点是：所有静态工具都默认把元数据当作“构建期常量”，一旦漏掉某一页的显式声明，就会 fallback 到空值或通用文案，而这种缺失在本地开发时几乎无法察觉，只有上线后被爬虫抓取才发现标题雷同、描述截断——问题暴露时往往已影响收录数周。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
