HTML怎么设置meta标签_HTML头部信息教程【SEO】

2次阅读

标准写法才能被搜索引擎正确识别:meta charset必须为head中首个标签,viewport需在css前,robots仅限当前页,description影响摘要显示但需与正文强相关且静态存在于首屏html中。

HTML怎么设置meta标签_HTML头部信息教程【SEO】

怎么写才不被搜索引擎忽略

浏览器和搜索引擎只认标准写法,非标准写法哪怕看着像,也大概率被跳过。比如用 name="keywords" 却没填内容,或把 charset 放在 <title></title> 后面——这些都会导致解析失败或降权。

  • <meta charset="UTF-8"> 必须是 中第一个标签(或紧随 <title></title> 之后),否则可能触发文档重载或乱码
  • <meta name="viewport" content="width=device-width, initial-scale=1"> 要放在所有 CSS 加载前,否则移动端缩放会失效
  • <meta name="robots" content="noindex, nofollow"> 只对当前页生效,不会影响子路径;想全站屏蔽得靠 robots.txt
  • seo 相关的 descriptionkeywords 已基本被主流引擎忽略,但 description 仍会影响搜索结果摘要显示,建议控制在 155 字以内

content 属性里哪些值会被截断或误解

搜索引擎和浏览器对 content 值有隐式处理逻辑:空格、换行、特殊符号都可能被裁剪或转义,尤其在服务端模板渲染时容易出错。

  • content 中的双引号必须用 " 或单引号包裹,否则 HTML 解析中断:<meta name="twitter:title" content="他说:" hello> 是非法的
  • 中文冒号、全角空格、emoji 会导致部分爬虫截断,建议统一用半角标点 + 英文空格
  • og:image 的 URL 必须是绝对地址(含 https://),相对路径会被忽略;图片尺寸建议 ≥ 1200×630px,否则微信/微博分享时压缩严重
  • http-equiv 类型如 refreshset-cookie 已被现代浏览器限制或废弃,别指望它还能跳转或设 Cookie

为什么加了但 Google Search console 还报“缺少描述”

不是写了就有效——Google 会实际抓取页面后提取内容,再比对 meta name="description" 是否与正文强相关。如果匹配度低,它宁可自己生成摘要。

  • 检查是否用了多个 description 标签(常见于 CMS 模板嵌套重复输出),浏览器只取第一个,但 Google 可能直接判定为异常
  • 确保 description 文本在页面首次 HTML 响应中就存在,不要靠 js 动态注入(Googlebot 默认不执行 JS 渲染)
  • 避免砌关键词,例如 content="html html教程 html标签 meta标签 seo SEO",这类会被识别为垃圾信号
  • 动态页面(如 Next.js、Vue SSR)要注意服务端渲染时 meta 是否随路由正确更新,客户端 hydration 不会重写

React/Vue 项目里怎么安全更新 meta

单页应用(SPA)的 不会随路由自动刷新,硬写死在 HTML 模板里肯定不行,得靠框架机制或库干预。

立即学习前端免费学习笔记(深入)”;

  • React 推荐用 react-helmetnext/head(Next.js 内置),注意 helmetdefer 行为可能导致首屏未及时写入
  • Vue 3 + Vue router 应配合 useHead 组合式 API,不要在 onMounted 里操作 document.head,那会晚于搜索引擎抓取时机
  • 所有框架方案都要验证最终 HTML 输出:打开页面 → 右键「查看网页源代码」→ 确认 <meta> 真实存在于源码中,而非仅在 DevTools 的 Elements 面板里
  • 服务端渲染(SSR)场景下,meta 必须在 renderToStringrenderToNodeStream 前完成注入,否则首屏无 SEO 信息

最常被漏掉的是:本地开发时一切正常,部署后 CDN 缓存了旧 HTML,或者构建工具把 index.html 压缩时删掉了空格导致 content 值错位。上线前务必用 curl 或 Fetch 查原始响应体,别只信浏览器预览。

text=ZqhQzanResources