HTML Meta 标签速查表
Meta 标签对 SEO 和社交分享至关重要，整理常用标签和最佳实践，快速配置网页头部。
返回 Web 服务基础 Meta 5
<meta charset="UTF-8">字符编码
<meta name="viewport" content="width=device-width, initial-scale=1">移动端适配
<meta name="description" content="页面描述">SEO 描述
<meta name="keywords" content="关键词1,关键词2">SEO 关键词（已不常用）
<meta name="author" content="作者名">作者信息
Open Graph（社交分享） 5
<meta property="og:title" content="标题">分享标题
<meta property="og:description" content="描述">分享描述
<meta property="og:image" content="图片URL">分享图片
<meta property="og:url" content="页面URL">页面链接
<meta property="og:type" content="website">内容类型
Twitter Card 4
<meta name="twitter:card" content="summary_large_image">卡片类型
<meta name="twitter:title" content="标题">推文标题
<meta name="twitter:description" content="描述">推文描述
<meta name="twitter:image" content="图片URL">推文图片
PWA 与图标 4
<meta name="theme-color" content="#6366f1">浏览器主题色
<link rel="manifest" href="/manifest.json">PWA 清单文件
<link rel="apple-touch-icon" href="/icon.png">iOS 主屏幕图标
<meta name="apple-mobile-web-app-capable" content="yes">iOS 全屏模式
💡 提示
- viewport meta 是移动端必加的，否则页面会按桌面宽度渲染。
- Open Graph 标签让链接在 Facebook、LinkedIn 等平台显示预览卡片。
- Twitter Card 需要单独设置，与 Open Graph 不通用。
- theme-color 可以改变移动端浏览器地址栏的颜色。