meta description 应直接写在 中，用 name="description" 和纯文本 content 属性，长度控制在155–160字符，需唯一、自然、行动导向；常见错误包括堆砌关键词、留空、重复、超长、JS动态注入失效及CDN缓存未更新。
meta description 的正确写法和常见错误
直接写在 里，用 name="description" + content 属性，不支持嵌套、不认换行、不解析 HTML 标签。
-
content值必须是纯文本，写<strong>爆款</strong>会被原样显示，搜索引擎不会加粗 - 长度建议控制在 155–160 个字符（含空格），超长部分多数情况下被截断，且可能触发搜索引擎重写
- 不要堆砌关键词，例如
content="html html教程 html标签 html meta html描述"—— 这类写法已被 Google 多年忽略，还可能降低可信度 - 每个页面必须唯一，首页、文章页、分类页的
content值不能相同
为什么写了 description 却没出现在搜索结果里
Google 和 Bing 都不强制使用 meta name="description"，它只是建议项。是否展示、展示哪段文字，完全由搜索引擎根据用户查询词和页面内容动态决定。
- 如果当前搜索词在页面正文中高频出现，且位置靠前，引擎可能直接截取那段作为摘要，无视
meta description - 页面加载后通过 JS 动态注入
meta标签（比如 SPA 路由切换时）—— 搜索引擎爬虫通常不执行 JS，此时该标签无效 - 页面返回 HTTP 状态码不是
200（如301、404、503），或robots.txt禁止抓取，meta description根本不会被读取
SEO 场景下 content 值怎么写才有效
目标不是“让搜索引擎收录”，而是“让用户愿意点进来”。描述要像一句完整的话，包含主谓宾，暗示价值或答案。
- 避免泛泛而谈：“这是一个关于 HTML 的网页” → 改成：“HTML 中
meta name="description"的写法、生效条件与常见失效原因，附真实案例验证” - 带具体动作或结果：“教你手动验证
meta description是否被爬虫识别”、“检查content长度是否超出 160 字符的两种命令行方法” - 如果是 CMS 或静态站生成器，确保模板中
content是动态输出的，例如 Jekyll 用{{ page.excerpt }}，Next.js 用useRouter().query.slug拼接上下文
调试和验证 meta description 是否生效
别只看源码里有没有写，关键看搜索引擎是否能拿到、是否愿意用。
- 用
curl -s URL | grep 'name="description"'确认响应体中确实存在且未被 JS 覆盖 - 在 Google 搜索
site:yourdomain.com "关键词"，观察结果摘要是否匹配你写的content值 - 提交 URL 到 Google Search Console，进 “URL 检查” 工具，查看“已编入索引”后的“页面资源”卡片里是否提取到 description
- 注意：本地预览时右键“查看页面源代码”看到的
meta，和爬虫实际获取的可能不同（比如服务端渲染 vs 客户端渲染差异）
实际项目中最容易被忽略的是：改完 meta description 后没清 CDN 缓存，或者 Next.js / Nuxt 等框架的 getStaticProps 没重新构建，导致线上始终是旧值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
