网页元数据优化这件事，说大不大，说小不小，但一两个标签的位置或写法没到位，轻则页面乱码、移动端缩放失效，重则社交分享时直接推送一张空白图。今天要聊的这几个 meta 标签实战技巧，看起来都是基础操作，可实际部署里踩坑的概率远比你想象的高——从字符集到社交分享，每一环都藏着容易忽略的细节。

charset 和 viewport 必须放在 head 最前面

这两个 meta 标签一旦位置靠后，浏览器解析时就可能出乱码或移动端缩放失效。Chrome 124 开始对 document.hasFocus() 的行为做了调整，但不影响这个底层规则。

常见错误是把