HTML Meta Tags Cheatsheet - Meta Tags SEO & Configuration Reference
SEO 优化和社交分享必备的 Meta 标签速查表，从 SEO 到 Open Graph，按场景分类整理，配置网页头部时直接对照。
Back to Web Services文档元信息 5
<meta charset="UTF-8">字符编码（HTML5 推荐写法）
<meta name="viewport" content="width=device-width, initial-scale=1">移动端视口适配
<meta name="description" content="页面描述">SEO 页面描述（建议 150 字以内）
<meta name="keywords" content="关键词1,关键词2">SEO 关键词（现代搜索引擎已忽略）
<meta name="author" content="作者名">页面作者信息
SEO 优化 6
<meta name="robots" content="index, follow">允许索引并跟踪链接
<meta name="robots" content="noindex, nofollow">禁止索引和跟踪链接
<meta name="googlebot" content="noindex">仅禁止 Google 索引
<link rel="canonical" href="https://example.com/page">规范化 URL，避免重复内容惩罚
<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">分享预览图（建议 1200x630）
<meta property="og:url" content="https://example.com">分享页面链接
<meta property="og:type" content="website">内容类型（article/website）
<meta name="twitter:card" content="summary_large_image">推特卡片类型
缓存控制 4
<meta http-equiv="Pragma" content="no-cache">HTTP/1.0 禁用缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">HTTP/1.1 禁用缓存
<meta http-equiv="Expires" content="0">设置过期时间为立即
<meta http-equiv="Cache-Control" content="max-age=3600">缓存 1 小时
移动端适配 6
<meta name="format-detection" content="telephone=no">禁用电话号码自动识别
<meta name="theme-color" content="#6366f1">浏览器地址栏主题色
<meta name="apple-mobile-web-app-capable" content="yes">iOS 全屏模式
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">iOS 状态栏样式
<meta name="mobile-web-app-capable" content="yes">Chrome Android 全屏模式
<meta name="application-name" content="应用名">主屏幕图标名称
安全相关 5
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">CSP 限制资源加载源
<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self'">CSP 防止点击劫持
<meta http-equiv="X-UA-Compatible" content="IE=edge">强制 IE 使用最新渲染引擎
<meta name="referrer" content="no-referrer">不发送 Referer 信息
<meta name="referrer" content="strict-origin-when-cross-origin">跨域仅发送 origin（浏览器默认）
自动刷新与重定向 4
<meta http-equiv="refresh" content="30">每 30 秒自动刷新当前页面
<meta http-equiv="refresh" content="5; url=https://example.com/">5 秒后重定向到新地址
<meta http-equiv="Cache-Control" content="no-cache">实战：配合 refresh 确保每次拉取最新
<meta http-equiv="Pragma" content="no-cache">实战：HTTP/1.0 兼容，与刷新搭配使用
💡 Tips
- viewport meta 是移动端必加的，否则页面会按桌面宽度渲染。
- Open Graph 标签让链接在 Facebook、LinkedIn 等平台显示预览卡片，og:image 建议 1200x630 像素。
- Twitter Card 需要单独设置，与 Open Graph 不通用，建议同时配置两者。
- theme-color 可改变移动端浏览器地址栏颜色，深色模式可用 media 属性单独适配。
- canonical 和 hreflang 是多语言站点的 SEO 关键，能有效避免重复内容惩罚。