meta标签不是装饰品，它直接决定页面能否被正确解析、是否被搜索引擎收录、在移动端会不会错位；charset必须置于head最前防乱码，viewport必设以保障移动端可用，description需120–155字符且含核心关键词，keywords基本可删除。
Meta 标签不是装饰品，它直接决定页面能否被正确解析、是否被搜索引擎收录、在移动端会不会错位——漏写或写错 <meta charset="UTF-8">，中文立刻乱码；<meta name="viewport"> 缺失，手机端页面会缩成一团。
charset 必须放在 head 最开头
浏览器从上到下解析 HTML，一旦遇到非 ASCII 字符（比如中文），而此时还没读到 <meta charset="UTF-8">，就会按默认编码（通常是 ISO-8859-1）解码，导致乱码。哪怕只差一行位置，都可能让整个页面标题、描述、内文显示异常。
-
<meta charset="UTF-8">必须是里的第一个标签，不能被<title></title>或其他<meta>挡在后面 - 不要用
http-equiv="Content-Type"这种老写法，HTML5 只认charset属性 - 如果服务端已通过 HTTP Header 发送了
Content-Type: text/html; charset=UTF-8，<meta charset>仍是必要冗余——因为部分代理或离线缓存场景下 Header 可能丢失
viewport 设置不等于“适配完成”
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是响应式起点，但不是终点。它只告诉浏览器“按设备宽度渲染”，不解决布局塌陷、字体过小、点击目标太小等实际问题。
-
user-scalable=no在 iOS 上已被 Safari 忽略，强制禁用缩放既不合规也不实用 -
maximum-scale=1.0会导致残障用户无法放大页面，WCAG 2.1 明确反对 - 真正起作用的是 CSS 媒体查询 + 弹性单位（
rem、vw）+ 图片srcset，<meta name="viewport">只是让这些能力生效的前提
description 和 robots 仍影响真实流量
虽然 keywords 已被主流搜索引擎废弃，但 <meta name="description"> 仍被 Google、Bing 用作搜索结果摘要；<meta name="robots"> 则直接影响爬虫行为，错误设置会让整站消失在搜索中。
-
content值长度建议控制在 155 字符内，超长会被截断，且关键词靠前更易被匹配 -
noindex和nofollow不要混用：单独noindex表示“别收录本页，但可顺着链接爬其他页”；noindex, nofollow才是“本页别收，链接也别跟” - 动态生成页面时，务必为每页输出唯一、准确的
description，堆砌关键词或复用模板内容会被判定为低质
Open Graph 和 Twitter Cards 不是可选附加项
当链接被分享到微信、钉钉、微博、Twitter 等平台时，它们不读 <title></title> 或 <meta name="description">，而是优先抓取 og:title、og:description、og:image 等 Open Graph 标签。没设这些，分享出去就是一串 URL 加默认截取文本。
-
og:image必须是绝对路径，且尺寸建议 ≥ 1200×630 px，否则微信会降质或拒绝显示 -
twitter:card类型选错会导致卡片不展示图片：summary_large_image才支持大图，summary只有小图标 - 调试时用 Facebook Sharing Debugger 或 Twitter Card Validator 直接抓取，比人工分享测试快得多
Meta 标签里没有“看起来差不多就行”的选项——charset 位置错一位、viewport 少一个逗号、og:image 路径 404，对应的功能就彻底失效。它不像 CSS 那样容错，也不像 JS 那样能 fallback，写进去就得准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
