HTML中meta描述信息 HTML中meta标签name="description"写法

作者：袖梨 2026-06-16

meta description 应直接写在 <head> 中，用 name="description" 和纯文本 content 属性，长度控制在155–160字符，需唯一、自然、行动导向；常见错误包括堆砌关键词、留空、重复、超长、JS动态注入失效及CDN缓存未更新。

直接写在 <head> 里，用 name="description" + content 属性，不支持嵌套、不认换行、不解析 HTML 标签。

content 值必须是纯文本，写 <strong>爆款</strong> 会被原样显示，搜索引擎不会加粗
长度建议控制在 155–160 个字符（含空格），超长部分多数情况下被截断，且可能触发搜索引擎重写
不要堆砌关键词，例如 content="html html教程 html标签 html meta html描述" —— 这类写法已被 Google 多年忽略，还可能降低可信度
每个页面必须唯一，首页、文章页、分类页的 content 值不能相同

Google 和 Bing 都不强制使用 meta name="description"，它只是建议项。是否展示、展示哪段文字，完全由搜索引擎根据用户查询词和页面内容动态决定。

如果当前搜索词在页面正文中高频出现，且位置靠前，引擎可能直接截取那段作为摘要，无视 meta description
页面加载后通过 JS 动态注入 meta 标签（比如 SPA 路由切换时）—— 搜索引擎爬虫通常不执行 JS，此时该标签无效
页面返回 HTTP 状态码不是 200（如 301、404、503），或 robots.txt 禁止抓取，meta description 根本不会被读取

目标不是“让搜索引擎收录”，而是“让用户愿意点进来”。描述要像一句完整的话，包含主谓宾，暗示价值或答案。

避免泛泛而谈：“这是一个关于 HTML 的网页” → 改成：“HTML 中 meta name="description" 的写法、生效条件与常见失效原因，附真实案例验证”
带具体动作或结果：“教你手动验证 meta description 是否被爬虫识别”、“检查 content 长度是否超出 160 字符的两种命令行方法”
如果是 CMS 或静态站生成器，确保模板中 content 是动态输出的，例如 Jekyll 用 {{ page.excerpt }}，Next.js 用 useRouter().query.slug 拼接上下文

别只看源码里有没有写，关键看搜索引擎是否能拿到、是否愿意用。

立即学习“前端免费学习笔记（深入）”；

用 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 没重新构建，导致线上始终是旧值。