怎么加 <meta name="description"> 才有效
搜索引擎只认 <meta name="description" content="..."> 这一种写法，放在 里，且必须是纯文本内容。不是所有 <meta> 都能被收录，只有这个 name 值为 description 的才起作用。
常见错误现象：<meta property="og:description"> 或 <meta name="keywords"> 被误当成页面描述；或者把 content 写成变量名（如 content="{pageDesc}"）但没实际渲染出值，结果搜索引擎抓到的是空字符串或模板代码。
- 长度控制在 50–160 字符之间，过短可能被截断，过长会被截断且影响点击率
- 不要堆砌关键词，用自然语言说明页面核心内容，比如“用
fetch()实现带超时的 API 请求，附取消机制和错误重试示例” - 每个页面的
content必须唯一，首页、文章页、分类页不能共用同一段描述
Vue/React 等框架里怎么动态设置
静态 HTML 直接写死就行，但 SPA 页面需要在路由切换后更新 <meta name="description">，否则搜索引擎或分享时抓取的还是初始页面的描述。
使用场景：用户访问 /post/123，要读取该文章标题和摘要，拼成新的 content 并替换 DOM 中已有的 <meta name="description"> 标签。
立即学习“前端免费学习笔记（深入）”；
- Vue 项目推荐用
vue-meta或useHead（Vue 3 + Nuxt 3），避免手动操作 DOM - React 可用
react-helmet或next/head（Next.js），createRoot渲染的纯客户端应用需用document.querySelector('meta[name="description"]')手动 setAttribute - 注意 SSR 场景：服务端渲染时必须同步生成正确的
<meta>，否则首屏 HTML 里就是错的，爬虫直接抓错
为什么加了还是不显示在搜索结果里
加了标签 ≠ 立刻生效，也不等于一定会被展示。Google 和 Bing 有自主判断权，会根据用户查询意图、页面内容匹配度、甚至移动端适配情况决定是否采用你写的 description。
性能 / 兼容性影响：这个标签本身无加载成本，但若内容与页面主体严重不符（比如页面讲 Python 而描述写“Java 教程”），可能被降权；另外，如果页面被设为 <meta name="robots" content="noindex">，那再好的描述也没人看。
- 检查是否被其他
<meta>覆盖：同一个name出现多次，浏览器通常只认第一个，后加的无效 - 确认没有拼写错误：
name="descripton"或name="Description"（大小写敏感）都无效 - 用 Google Search Console 的 URL 检查工具，看它实际抓取到的 HTML 中有没有这个标签，以及是否解析出内容
要不要同时加 og:description
要，但目的不同：<meta name="description"> 主要服务搜索引擎，<meta property="og:description"> 是 Open Graph 协议，专供微信、微博、Discord 等平台分享时提取摘要。
两者可以一样，也可以不一样——比如搜索描述偏信息密度，而社交分享描述可稍带语气或行动引导（如“点击查看完整实现”）。但别漏掉后者，否则分享链接时容易出现空白或截断的默认文本。
-
og:description同样要放在，且必须有property属性，不能用name - 长度建议控制在 200 字符内，微信对 Open Graph 解析较宽松，但 Twitter（X）已弃用
og:，转而依赖twitter:description - 如果用了 SSR 框架，确保这两个 meta 标签都在首次 HTML 中输出，而不是等 JS 加载完才插入
