meta description必须服务端静态生成并紧贴title后,长度155–160 unicode字符,前60字符须含动词+具体对象,内容需与h1及首段语义一致,否则google可能弃用。

meta name="description" 必须静态写在里且紧贴后
Googlebot 不执行 JS,只读首次 HTTP 响应的原始 HTML。JS 动态插入 document.querySelector('head').appendChild()、CMS 模板变量未展开、或 SSR 未随路由注入,都会导致 Search Console 报“缺少描述”。meta name="description" 必须是服务端生成的纯文本,且位置要靠前——放在 <title></title> 后、其他 <meta> 前最稳妥,避免被 og:image 或第三方脚本 meta 挤到后面而解析失败。
长度卡在 155–160 个 Unicode 字符,不是“字数”也不是“字节”
中文汉字、全角标点(,。!?)各算 1 字符;英文、空格、半角标点也各算 1;emoji、全角空格同样占位。别信“75 个汉字”这种经验说法——用 str.length 在浏览器控制台测最准。移动端 SERP 实际常只显示前 120 字符,所以前 60 字必须直击核心:含动词 + 具体对象,比如 修复React Router v6 中 <code>useNavigate 在异步回调里报错的 3 种方法,而不是“前端开发教程合集”。CMS 后台要强制前端实时计数 + 后端入库前截断到 160 字符,否则可能混入零宽空格或 XSS 风险字符。
内容必须和 、首段正文语义一致,不能自说自话
Google 不保证使用你写的 description,它会比对搜索词、<h1></h1>、正文前 150 字,选“最相关的一段”作为摘要。常见失效场景:
- description 写“Python 爬虫教程”,正文却是“CSS Grid 布局详解”
-
<h1></h1>后紧跟一句“支持超时重试的 fetch 封装函数”,比 description 更精准匹配搜索词“fetch timeout retry” - 多个页面共用同一段 content,比如所有博客页都套“本文介绍了……”
- 开头是“欢迎访问…”“本公司专业提供…”这类泛化句式,信息密度低
不同框架/生成器里怎么安全注入
静态 HTML:手写即可,但需人工校验每页唯一性;Next.js:必须在 getStaticProps 或 getServerSideProps 中传入 description 字段,通过 next/head 注入;VuePress/VitePress:在 .md 文件 front matter 写 description: "xxx",主题需确认 Head 组件读取了该字段;Hugo/Jekyll:在 front matter 设值,模板中用 {{ .Params.description }} 输出。任何 JS 动态写入、或插件配置覆盖了你的设置,都可能让 description 失效——最终得看浏览器“查看网页源代码”里是否真实存在。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











