HTML5 meta标签应精简聚焦三类核心：基础渲染控制（charset、viewport、description须按序置于head最前）、SEO有效信息（keywords已无效，robots仅特殊场景使用）、移动端体验增强（theme-color、apple-mobile-web-app等）及社交分享必备OG/Twitter标签。
HTML5 中 meta 标签配置不是堆砌越多越好，而是抓住三类核心：基础渲染控制、SEO 有效信息、移动端体验增强。配错顺序、重复写入或滥用参数，反而导致视口失效、爬虫忽略或可访问性受损。
必须写且只能写一次的基础三项
这三项要放在 最前面，顺序建议为：<meta charset="UTF-8"> → <meta name="viewport" content="width=device-width, initial-scale=1"> → <title></title> → <meta name="description">。
-
charset：必须是
<meta charset="UTF-8">，且为 第一个标签。它决定整个文档的字符解析方式，放错位置（如在后）可能导致中文乱码、JS 字符串解析失败，尤其在旧版 WebView 或 IE 兼容模式下。 -
viewport：只用
width=device-width, initial-scale=1。不要写死像素值（如 width=375），不要加maximum-scale=1或user-scalable=no—— 这些会破坏双指缩放，违反 WCAG 2.1 可访问性标准，iOS 13+ 也已弱化支持。 - description：每页唯一，120–155 个 Unicode 字符（含中文、标点、空格），前 60 字必须直击页面核心价值。例如产品页写“iPhone 15 Pro 256GB 暗紫色｜A17 Pro 芯片｜Pro 级摄像头｜官网直发”，不写“欢迎选购…”。
SEO 有用、但别白费力气的标签
Google 明确表示：keywords 自 2009 年起完全不参与排序；robots 的 index,follow 是默认行为，显式声明无意义；真正影响搜索呈现的是
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
、）。
- 删掉
<meta name="keywords">，节省字节，避免误导团队以为“堆词有用”。
- 仅在特殊场景用
robots：测试环境加 noindex,nofollow；分页列表（如 /blog?page=2）设 noindex,follow；规范页（canonical）确保可索引。
- description 不生效？先查渲染后 HTML 源码 —— Next.js、Nuxt 等框架可能自动生成 viewport 或 description，你写的会被静默覆盖。
增强移动端体验的实用扩展项
这些非必需，但对用户感知提升明显，尤其在 iOS 和 Chrome 上：
-
<meta name="theme-color" content="#2563eb">：控制 Chrome/Edge 地址栏颜色，推荐用主品牌色，十六进制格式。
-
<meta name="apple-mobile-web-app-capable" content="yes">：配合 Web App Manifest，让用户“添加到主屏幕”后全屏运行（隐藏 Safari UI）。
-
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">：设置 iOS 状态栏背景与文字颜色，值可选 default、black、black-translucent。
-
<meta name="format-detection" content="telephone=no">：禁用 iOS 自动识别手机号并转成可点击链接，避免误触拨号。
社交分享与结构化传播必备
当网页被分享到微信、微博、Twitter、Facebook 时，它们不读 description，而是优先抓取 Open Graph（OG）和 Twitter Card 标签：
- 必加 OG 三项：
og:title（不超过 60 字）、og:description（90 字内，比 description 更精炼）、og:image（推荐 1200×630 px，JPG/PNG，绝对路径）。
- Twitter 卡片补上：
twitter:card（设为 summary_large_image）、twitter:title、twitter:description、twitter:image。
- 所有 OG 和 Twitter 标签都需用
property 属性，不是 name，例如：<meta property="og:title" content="响应式布局实战">。
- 删掉
<meta name="keywords">，节省字节，避免误导团队以为“堆词有用”。 - 仅在特殊场景用
robots：测试环境加noindex,nofollow；分页列表（如 /blog?page=2）设noindex,follow；规范页（canonical）确保可索引。 - description 不生效？先查渲染后 HTML 源码 —— Next.js、Nuxt 等框架可能自动生成 viewport 或 description，你写的会被静默覆盖。
增强移动端体验的实用扩展项
这些非必需，但对用户感知提升明显，尤其在 iOS 和 Chrome 上：
-
<meta name="theme-color" content="#2563eb">：控制 Chrome/Edge 地址栏颜色，推荐用主品牌色，十六进制格式。 -
<meta name="apple-mobile-web-app-capable" content="yes">：配合 Web App Manifest，让用户“添加到主屏幕”后全屏运行（隐藏 Safari UI）。 -
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">：设置 iOS 状态栏背景与文字颜色，值可选default、black、black-translucent。 -
<meta name="format-detection" content="telephone=no">：禁用 iOS 自动识别手机号并转成可点击链接，避免误触拨号。
社交分享与结构化传播必备
当网页被分享到微信、微博、Twitter、Facebook 时，它们不读 description，而是优先抓取 Open Graph（OG）和 Twitter Card 标签：
- 必加 OG 三项：
og:title（不超过 60 字）、og:description（90 字内，比 description 更精炼）、og:image（推荐 1200×630 px，JPG/PNG，绝对路径）。 - Twitter 卡片补上：
twitter:card（设为summary_large_image）、twitter:title、twitter:description、twitter:image。 - 所有 OG 和 Twitter 标签都需用
property属性，不是name，例如：<meta property="og:title" content="响应式布局实战">。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
