HTML meta 标签大全
HTML meta标签深入：charset字符集、name属性（description/keywords/author/viewport/robots/theme-color/color-scheme）、http-equiv属性（refresh重定向/X-UA-Compatible/content-security-policy） · 难度：入门 · +10XP
HTML meta 标签大全 —— 网页的配置中心
meta标签都在head里，用户看不到，但浏览器、搜索引擎、社交平台都在读取它们。
必选的meta标签
<meta charset="UTF-8"> <!-- 字符编码，必须放最前面 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">SEO相关
<meta name="description" content="页面描述，120-155字符最佳">
<meta name="keywords" content="关键词1,关键词2">
<meta name="robots" content="index, follow">社交分享 Open Graph
<meta property="og:title" content="分享标题">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="https://yoursite.com/thumb.jpg">
<meta property="og:url" content="https://yoursite.com/page">加上OG标签后，分享到微信/微博/Twitter时会自动显示标题、描述和缩略图。
动手练习
- 基础练习：创建完整head区域，包含charset、viewport、description。
- 进阶应用：给页面添加OG标签，用微信分享调试工具查看预览效果。
- 项目实战：给网站每个页面配置完整meta标签（SEO+社交分享+PWA）。