HTML Meta 标签速查表 - Meta 标签 SEO 优化与配置大全
面向希望页面能排好名、分享出去干净、并且安全的开发者。Meta 标签藏在幕后，却决定搜索引擎索引什么、微信/推特上的链接预览长什么样、浏览器如何对待页面源。读完能配置 title/description 与 Open Graph 生成富链接预览，设置 viewport 适配移动端，配置 theme-color 与 PWA manifest，并加上基础 Content-Security-Policy 手法。
文档元信息 5
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="页面描述"><meta name="keywords" content="关键词1,关键词2"><meta name="author" content="作者名">SEO 优化 6
<meta name="robots" content="index, follow"><meta name="robots" content="noindex, nofollow"><meta name="googlebot" content="noindex"><link rel="canonical" href="https://example.com/page"><link rel="alternate" hreflang="en" href="https://example.com/en/"><link rel="alternate" hreflang="x-default" href="https://example.com/">社交分享（Open Graph + Twitter） 6
<meta property="og:title" content="标题"><meta property="og:description" content="描述"><meta property="og:image" content="https://example.com/img.jpg"><meta property="og:url" content="https://example.com"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image">缓存控制 4
<meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Expires" content="0"><meta http-equiv="Cache-Control" content="max-age=3600">移动端适配 6
<meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#6366f1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="mobile-web-app-capable" content="yes"><meta name="application-name" content="应用名">安全相关 5
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"><meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self'"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="referrer" content="no-referrer"><meta name="referrer" content="strict-origin-when-cross-origin">自动刷新与重定向 4
<meta http-equiv="refresh" content="30"><meta http-equiv="refresh" content="5; url=https://example.com/"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Pragma" content="no-cache">命令示例
一份能通过 SEO 与社交分享双检的最小 meta 组合
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="页面描述">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="标题">
<meta property="og:description" content="描述">
<meta property="og:image" content="https://example.com/img.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">charset 必须放在文档最前面，否则已下载字节的解码可能出错出现乱码。og:image 用绝对 URL 且按 1200x630 出图，尺寸不足时平台会裁切或留白。
多语言页面：canonical 与 hreflang 各管一件事
<link rel="canonical" href="https://example.com/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">canonical 收敛同内容的重复地址，hreflang 建立语言版本之间的对应关系。x-default 是没有任何语言匹配时回退到的版本，缺失会让部分用户落到不合适的页面上。
临时页面：5 秒后跳转，配合 no-cache 保证拿到新地址
<meta http-equiv="refresh" content="5; url=https://example.com/">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">适用于域名迁移或维护页，Pragma 那行是为只认 HTTP/1.0 缓存指令的旧客户端保留的。上线后务必移除，否则维护页本身会被搜索引擎长期收录。
深浅双主题：theme-color 跟着媒体查询切换
<meta name="theme-color" content="#6366f1" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">深色值要接近页面背景色，否则状态栏与页面之间会出现一条明显的色带。iOS 全屏模式下状态栏会压在内容上，布局需要预留安全区域。
常见坑与注意事项
- <meta http-equiv="Content-Security-Policy"> 只对出现在响应头之前的内容生效，且多个实例不会合并而是取其一；frame-ancestors 与 default-src 建议由服务端响应头下发，而不是靠 meta。
- keywords meta 现代搜索引擎已忽略，写一堆关键词既无收益又显得可疑，别把它当作密度优化手段。
- format-detection 关闭电话自动识别会影响移动端表单体验，客服热线类页面确认不再需要一键拨号再关。
- X-UA-Compatible 是给 IE 的遗留标签，现代浏览器完全不解析，保留无害但也别指望它解决任何渲染问题。
- referrer 选 no-referrer 会连带让自家站点丢失来源信息，含统计与回调的站点改用 strict-origin-when-cross-origin。
提示
- viewport meta 是移动端必加的，否则页面会按桌面宽度渲染。
- Open Graph 标签让链接在 Facebook、LinkedIn 等平台显示预览卡片，og:image 建议 1200x630 像素。
- Twitter Card 需要单独设置，与 Open Graph 不通用，建议同时配置两者。
- theme-color 可改变移动端浏览器地址栏颜色，深色模式可用 media 属性单独适配。
- canonical 和 hreflang 是多语言站点的 SEO 关键，能有效避免重复内容惩罚。
常见问题
title 和 og:title 需要写成两遍吗？重复写会不会被判为冗余？
需要写两遍，因为它们服务于不同消费者。title 是搜索引擎与浏览器标签页用的，og:title 是社交平台抓取分享卡片时读的，平台爬虫只认 Open Graph 与 Twitter Card 的属性。两套都写不构成内容重复判定，因为它们不在同一个渲染位置；真正需要注意的是别让两者文案完全冲突——og:title 与页面可见标题差得太远会让分享出去的卡片和落地页观感不符。
robots 与 googlebot 两个标签同时写会怎样？
会以后写的为准，而且分工不同。robots meta 面向所有遵循通用规则的爬虫，googlebot 只针对 Google。两者的 content 值独立判断，googlebot 单独写 noindex 就足以让 Google 不收录该页，而其它搜索引擎仍会收录——这正是需要区别对待时的用法。如果两个标签给出相反指令，行为在不同爬虫间就会分裂，排查收录问题时这类分叉最难解释，实践中要么统一、要么彻底只用其中一个。
canonical 标签该指向带参数的 URL 还是不带参数的？
指向不带参数的规范地址。带 UTM、排序、筛选参数的 URL 往往能生成大量等价页面，canonical 的作用是把它们全部收敛到一个权威地址上，避免重复内容分散权重。hreflang 则是另一层：多语言站用 alternate hreflang 声明各语言版本的位置，再用 x-default 指定回退版本；canonical 解决「同一内容多个地址」，hreflang 解决「不同语言不同地址」，两者可以并存且各自独立。
用 meta http-equiv 设置 Cache-Control，在现代站点还有意义吗？
作用很有限，缓存主要还是由响应头控制。meta http-equiv 的 Cache-Control 只在部分场景被采纳，而且必须出现在文档头部才可能被识别，位置靠后会被忽略。它的实际价值在于静态导出或本地文件预览这类没有真实响应头的场景，做临时调试和强制拉取新版本时很好用；正式站点应当由服务端返回 Cache-Control 响应头，把 meta 版本当作辅助手段而不是主要手段。
theme-color 能不能同时配深色和浅色两套？
可以，但浅色值需要放在 media 属性里以匹配用户偏好，深色值作为不带 media 的兜底。深色模式用户的判断依据是系统设置，用 prefers-color-scheme 在同一组里写两条即可覆盖两种情况。地址栏配色属于纯装饰，改错不会影响功能，但用亮色配深色背景会造成对比度刺眼，所以在做深浅双主题时这条要跟着主题一起切换，而不是全局写死一个色值。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。