meta name="description" 必须静态写在内且仅出现一次，长度155–160 unicode字符，内容需与及首段正文强匹配，ssr/ssg需服务端注入，动态js修改无效。
meta name="description" 必须静态写在 里
它不会被浏览器渲染，但 Googlebot 和 Bingbot 只读取首屏 HTML 中的原始内容，不执行 JS。动态注入（比如用 document.querySelector('head').appendChild()）等于没写。
常见错误：<meta name="description"> 被塞进 ；CMS 模板里硬编码成全局值；多个页面共用同一段 content；或者靠前端路由切换时用 JS 改 content 属性——这些全无效。
- 必须放在
内，且只出现一次 - 推荐紧贴
<title></title>后面，避免被其他</meta>挤到靠后位置 - SSR/SSG 场景下，得靠服务端逻辑注入，例如 Next.js 的
getStaticProps或getServerSideProps传入 description 字段
长度控制在 155–160 个 Unicode 字符
不是“150 字”，也不是字节数。中文、英文、空格、标点（包括全角逗号、句号、emoji）各算 1 个字符。用 str.length 在浏览器控制台测最准，别信编辑器右下角的字数统计。
移动端 SERP 实际显示常压缩到 120 左右，所以前 60 字必须直击用户问题核心。开头别写“欢迎访问”“本网站提供…”——要像一句回答：“用 JSON.parse() 安全解析带注释的 JSON 字符串，支持跳过单行/多行注释”。
- 全角空格、中文标点、emoji 都计入长度，但部分爬虫会解析异常甚至弃用整段
- 双引号
"、尖括号会破坏 HTML 结构，必须转义或删掉 - CMS 后台要限制输入框最大长度为 160，并前端实时计数 + 后端强制截断
内容必须和 及首段正文强匹配
Google 不保证用你写的 meta name="description"。它会比对搜索词、<h1></h1>、首段正文、结构化数据，选它认为“最相关的一段”。如果你的 description 里写了“fetch timeout retry”，但 <h1></h1> 是“前端网络请求入门”，正文第一句也没出现这两个词，大概率被替换。
- 确保至少一个核心关键词在
<h1></h1>和首段正文中原样出现 - 电商页优先用
product_name + 核心参数（如 “Beats Studio Pro 降噪耳机，USB-C 接口，支持空间音频”） - 博客页建议取首段前 80 字，但要过滤掉“本文将介绍…”这类套话
- 工具类页面直接对应用户动作，比如 “React.memo 性能陷阱：依赖数组漏写
props.callback会导致无效缓存”
别和 Open Graph 混用，也别堆关键词
meta name="description" 是给搜索引擎看的，property="og:description" 是给 Facebook、LinkedIn 等社交平台用的。二者不互通，不能互相替代。
堆砌关键词（如 “HTML 教程 HTML 入门 HTML 怎么学 HTML 视频”）会被判定为低质内容，轻则忽略，重则影响页面信任度。
- 每页 description 必须唯一，首页、分类页、详情页不能共用一段
- 避免促销话术（“限时抢购！”）、联系方式、特殊符号（» ❗️ •）
- 不用 “本站”“本网站” 这类无意义主语，动词开头更抓人（“提取 PDF 表单字段” 比 “PDF 表单字段提取工具” 更有效）
meta name="description"，只要 JS 加载后替换了 <h1></h1> 或首段文本，Google 仍可能弃用它——它的快照基于服务端吐出的第一版 HTML。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
