Google未展示description标签内容，是因为其算法判定该描述与用户搜索意图不匹配而弃用，转从正文抽取摘要；常见原因包括超长（>155字符）、开头无真实搜索短语、正文前150字有更相关句子，或含全角空格、emoji等干扰字符。
为什么写了 meta name="description"> 却没出现在搜索结果里
不是代码没生效，而是 Google 或 Bing 判断你写的描述不匹配当前搜索意图，直接弃用，转而从正文抽一段拼凑摘要。常见现象包括：SERP 里出现带省略号的截断句、含 HTML 标签的乱码、或突然冒出页面底部的版权声明。
触发替换的核心条件有四个：
• content 超过 155 字符（含空格），移动端实际常在 120 字左右就截断
• 开头没嵌入用户真实会搜的短语，比如页面讲 useNavigate 报错，但描述以“欢迎访问前端技术博客”起头
• 正文前 150 字有一句更紧凑的总结（如 <h1> 后紧跟的说明），算法认为它更相关
• content 里混入全角空格、零宽字符、emoji 或广告式感叹号（如“?限时优惠！！！”）
怎么写才大概率被采用且提升点击率
本质是写一句“用户扫一眼就知道这页能解决他问题”的自然句子，不是堆关键词。关键动作：
• 前 60 字必须含动词 + 具体对象，例如：content="修复 React Router v6 中 <code>useNavigate</code> 在异步回调里报错的 3 种方法"
• 长度严格控制在 75–80 个汉字内（预留标点与空格），别信编辑器字数统计，用记事本「显示所有字符」手动数
• 禁止泛化主语：“本网站提供…”“本页面介绍…”——直接说“能做什么”
• 每页唯一，列表页强调筛选维度（如“2024 年 CSS 新特性按发布时间倒序汇总”），详情页聚焦具体问题（如“contain-intrinsic-size 在 Safari 15.4 失效的绕过方案”）
SPA 和动态页的 meta name="description" 为什么总失效
纯客户端渲染（React/Vue）时，初始 HTML 的 meta name="description" 往往为空或写死成“首页描述”，等 JS 加载完才更新——而旧版 Googlebot 只读首屏静态 HTML 就走了。
立即学习“前端免费学习笔记（深入）”；
解决方案分两层：
• 服务端：Next.js 用 getStaticProps + Head，Nuxt 用 head() 函数，在构建时注入真实值
• 客户端：若必须 CSR，至少保证初始 content 不为空，哪怕填 "加载中…请稍候"，也比留空强
• 验证方式：用 Google Search Console 的「URL 检查工具」→「实时查看已编入索引的版本」，确认抓取到的是更新后的 HTML
容易被忽略但决定成败的底层细节
很多人只改 content 值，却漏掉配套约束：
• <meta charset="UTF-8"> 必须是 <head> 内第一个标签，否则中文变乱码，爬虫直接放弃解析
• CMS 后台若允许编辑 description，前端要实时计数 + 后端强制截断到 160 字符，否则可能入库溢出或引入 XSS 风险
• 多语言站点必须为每个语言版本单独配置，JS 动态写入的 meta 标签 Googlebot 不执行
• 中文页面注意全角/半角空格混用会导致字符数误判，建议用 str.length 或在线工具校验实际 Unicode 字符数
