meta description 应严格控制在155–160字符（含空格），中文按Unicode计，超长会被截断；核心信息须前置60字，避免无效开头，且必须真实存在于首屏HTML源码中。

写了不一定显示，但不写基本没机会被点——关键不在“有没有”，而在“前60字能不能让用户一眼判断这页能解决他问题”。

meta description 长度怎么卡准 155–160 字符

Google 实际截断点浮动在 155–160 字符（含空格），不是像素宽度，也不是字节数；中文按 Unicode 字符计，一个汉字算 1 字符。超长必被砍成“…”且常在语义断裂处截断。

• 用 str.length 在浏览器控制台快速验长度："用fetch()替代XMLHttpRequest的3种安全写法".length → 返回 28（不是字节数）
• 别信编辑器右下角“字数统计”，它可能把全角空格、换行符都算进去；推荐用在线工具如 metatags.io 或直接粘贴到记事本再查长度
• 移动端 SERP 常只展示约 120 字符，所以核心信息（动词+对象+关键限制条件）必须塞进前 60 字，例如：修复 React Router v6 中 useNavigate 在异步回调里报错的 3 种方法
• 避免开头用“本网站”“欢迎访问”“提供……服务”——这些占位置、无信息量，第一眼就降低可信度

为什么 Google 没有显示你写的 description

不是代码错了，而是搜索引擎主动弃用了它。常见触发原因比语法错误更常见：

• 页面正文
  或首段里有一句更短、更匹配用户搜索词的话（比如用户搜 JSON.parse 注释，而你 description 写的是“前端数据处理指南”，但正文第一行就是 // 支持注释的 JSON 解析器）
• content 值和 URL 实际内容严重偏离：商品页 description 写“限时折扣”，但商品已下架或价格未变
• description 里塞了电话、邮箱、促销倒计时等非主题信息，被判定为干扰性内容
• 页面被标记 ，或 robots.txt 屏蔽了爬虫，description 根本没进索引队列

动态页面（Next.js / VuePress / CMS）中 description 容易漏掉的坑

静态 HTML 手写没问题，但一上框架，meta 很容易变成“模板默认值”或“JS 注入失败”：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• Next.js 中若只在客户端用 useEffect 改 ，旧版 Googlebot 可能抓到空值或占位文本；必须在 getStaticProps 或 getServerSideProps 中通过 next/head 注入
• VuePress / VitePress 的 description: "xxx" 前置数据，仅当主题明确读取该字段才生效；自定义主题需检查 Head 组件是否调用 page.frontmatter.description
• CMS 后台编辑器若不限制输入长度，运营可能填 300 字还带 emoji；后端渲染时必须强制截断至 160 字符，并移除 "、、> 等破坏 HTML 结构的字符
• 多语言站点不能靠 JS 切换 content 值——Googlebot 不执行 JS，每个语言版本的 HTML 必须原生包含对应语言的 meta name="description"

要不要加 name="keywords"？和其他 meta 标签的关系

不用。Google、Bing、Yandex 全部忽略 ，部分安全扫描工具甚至把它当过时信号标红。

• 和 是两套东西：前者面向搜索引擎，后者面向 Facebook、LinkedIn 等社交平台；不能互相替代
• 比 description 更影响排名，但 description 决定用户点不点；两者关键词可呼应，但不要照抄 title
• 真正影响 SEO 的是正文质量、语义标签（
  ~
  ）、、加载速度——description 只负责“最后一米”的点击决策

最常被忽略的一点：很多人花半小时写 description，却没确认它是否真实出现在首屏 HTML 源码里。用 curl -s YOUR_URL | grep description 或直接 View Source 查看，确保不是 JS 渲染后才插入的——那对 SEO 来说，等于没写。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！