必须置于最前端（理想为首个子元素），否则浏览器在解析前1024字节未读到该声明时，将按默认编码（如iso-8859-1或gbk）解码，导致中文、emoji显示为方块或报错；需确保无bom、空格、注释前置，且仅保留一个标准写法。
meta charset必须放在最前面，否则会乱码
浏览器是流式解析 HTML 的，遇到中文、emoji 或其他非 ASCII 字符时，如果还没读到 <meta charset="UTF-8">，就会按默认编码（通常是 ISO-8859-1）解码——直接显示为方块、问号或控制台报 Uncaught SyntaxError: Invalid or unexpected token。
常见错误写法包括：
- 把
<meta charset="UTF-8">放在<title></title>后面 - 重复写多个 charset（如同时写了
<meta charset="UTF-8">和<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">），部分浏览器会忽略全部 - 依赖服务端响应头而省略该标签——即使
Content-Type: text/html; charset=UTF-8已存在，HTML 规范仍要求双保险
正确位置：它是 中第一个标签，或紧随 <title></title> 之后（但不能在 <title></title> 前）。
viewport不配等于移动端不可用
<meta name="viewport" content="width=device-width, initial-scale=1"> 不是“锦上添花”，而是保底配置。没它，iOS Safari 和多数 Android 浏览器会以 980px 宽度渲染页面，再整体缩放——结果是文字极小、按钮点不准、横向滚动条意外出现。
典型现象：
- 手机上页面整体缩小，必须双指放大才能阅读
-
position: fixed元素错位或消失 - Lighthouse 报
Document doesn’t have a viewport meta tag
注意：width=375 或 initial-scale=1.5 这类固定值会破坏响应式逻辑，除非有特殊兼容需求（如老版 UC 浏览器），否则不要用；maximum-scale=1.0, user-scalable=no 仅在 iframe 嵌入或微信/钉钉 WebView 场景下谨慎启用，否则影响可访问性。
description不是装饰，是搜索点击率的开关
<meta name="description" content=""> 不参与排名，但 Google、Bing 等引擎会直接把它当搜索结果摘要展示。写得模糊、重复或空着，等于把点击率让给别人。
关键约束：
- 长度控制在 120–155 个 Unicode 字符（含中文、emoji、空格），Chrome 实际截断约 155 字，超长会被省略为 …
- 前 60 字最关键——搜索引擎通常只显示开头部分，且移动端更短
- 每页必须唯一，且精准匹配页面核心内容（例如商品页写 “iPhone 15 Pro 256GB 深空黑｜A17 Pro 芯片｜Pro 级摄像头｜官网正品”）
- CMS 或 SSR 模板中避免 fallback 到通用文案（如 “欢迎来到 XXX 网站”），应绑定
{{ page.description }}类变量
别写 keywords：Google 已不使用该字段，Bing 也基本忽略，留着反而占用体积。
robots 和 canonical 必须按场景配，不是一劳永逸
<meta name="robots" content="noindex"> 是告诉搜索引擎“别收录这页”，但它不等于 HTTP 状态码 404 或 410，也不替代 robots.txt。误用会导致页面被索引后又突然消失，引发流量波动。
真实场景判断要点：
- Staging 环境全站加
noindex, nofollow，防止被误抓 - 分页列表页（如
/blog?page=2）建议noindex, follow，保留链接权重但不单独索引 - 重复内容页（如带 UTM 参数的分享链接）应配
canonical指向主 URL，而非靠 robots 控制 - Open Graph 和 Twitter Card 标签（
og:title、twitter:card等）必须和<title></title>、description对齐，否则微信、微博分享时 fallback 不可控
最易被忽略的一点：og:image 必须是绝对 URL，且图片需支持 CORS，否则社交平台加载失败，只显示空白或默认图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
