SEO meta标签必须动态生成并严格校验：description需每页独立且≤155字符，charset与viewport须置于head最前，canonical须为绝对URL，OG/Twitter标签需HTTPS图片；否则导致收录失败、乱码、重复内容或点击率暴跌。
HTML 模板里的 SEO <meta> 标签不是“加了就行”，而是必须按页面动态生成、严格校验长度与位置，否则搜索引擎可能跳过收录，或展示出错摘要。
为什么静态模板写死 <meta name="description"> 会失效
很多 CMS 或静态站点生成器（如 Hugo、Jekyll）用统一模板渲染所有页面，<meta name="description"> 被硬编码成一句通用文案，比如“欢迎访问技术博客”。这会导致：
- 搜索引擎判定为低信息量页面，降低抓取优先级
- 多个页面共用同一 description，触发重复内容警告
- 实际内容与摘要严重不符（例如一篇讲
torch.compile()的教程，摘要却是“Python 入门指南”），用户点击率暴跌
实操建议：description 必须每页单独提取或生成。若用 Markdown 写文，可在 front matter 中定义 description: 字段；若用 Next.js，应在 getStaticProps 或 generateMetadata 中动态注入，而非写在 layout 的固定 里。
<meta charset="UTF-8"> 和 <meta name="viewport"> 必须前置且不可省略
这两行不是“装饰”，是解析前提。如果它们没出现在 最开头（甚至晚于 <title></title> 或某个 <script></script>），后果很直接：
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">晚于<title></title>：中文标题显示为乱码（如PyTorch教程），爬虫无法识别主题词 -
<meta name="viewport">缺失或写错：Google 移动端索引直接打低分，LCP（最大内容绘制）延迟升高，收录变慢甚至拒收
正确写法（顺序不可调）：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>...</title> ... </head>
<link rel="canonical"> 不是可选项，而是防重复收录的刚需
模板一旦支持 URL 参数（如 /post?id=123）、HTTP/HTTPS 混用、或带跟踪参数（?utm_source=twitter），就极易产生多套 URL 指向同一内容。搜索引擎会把它们当不同页面处理，稀释权重。
关键点：
-
href必须是**绝对 URL**，不能是/article/123或./article/123 - 模板中需动态拼接协议 + 域名，例如
https://{{ site.url }}/article/{{ page.slug }} - 服务端渲染（SSR）场景下，Next.js 的
generateMetadata、Nuxt 的useHead都支持运行时计算 canonical，别用静态字符串硬写
Open Graph 和 Twitter Card meta 标签影响的是“被转发时的第一印象”
这些标签不参与 Google 排名，但决定你的 PyTorch 教程被分享到微信、Discord 或 Twitter 时，是否显示标题、缩略图和摘要。缺了它，链接常变成纯文字+默认图标，点击率折损明显。
最小可用组合：
<meta property="og:title" content="torch.compile() 实战详解：加速模型训练的三步配置"> <meta property="og:description" content="本文手把手演示如何用 torch.compile() 提升训练速度 30%~50%，涵盖环境检查、编译模式选择与常见报错修复。"> <meta property="og:image" content="https://example.com/img/compile-benchmark.png"> <meta name="twitter:card" content="summary_large_image">
注意：og:image 必须是可公开访问的 HTTPS 地址，尺寸建议 ≥ 1200×630px；本地路径或相对路径在社交平台抓取时会失败。
真正卡住收录节奏的，往往不是内容深度，而是模板里那几行被复制粘贴却从未校验的 <meta>。尤其是 description 长度超 155 字符、canonical 用了相对路径、或 charset 被 JS 动态插入——这些细节不会报错，但会让爬虫默默降权或跳过。
