HTML头部元信息是浏览器解析、移动端渲染和搜索引擎识别的起点，配错位置、漏关键标签或用过时写法会导致乱码、缩放异常、降权甚至拒索引；meta charset必须置于最前且唯一，viewport需设为width=device-width, initial-scale=1，title与description须每页唯一精准，keywords可删，robots按需配置。
HTML模板里元数据不是“填满就行”的装饰项，而是浏览器解析、移动端渲染、搜索引擎识别的起点。配错位置、漏关键标签、用过时写法，轻则乱码/缩放异常，重则被降权或拒索引。
meta charset必须放在
最前面
浏览器是流式解析HTML的，遇到中文、emoji等非ASCII字符时，如果还没读到meta charset="UTF-8"，就会按默认编码（如ISO-8859-1）解码——直接导致乱码，甚至让后续<script></script>报Uncaught SyntaxError: Invalid or unexpected token。
常见错误包括：
- 把
meta charset写在 - 写成旧式
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" - 服务端已返回
Content-Type: text/html; charset=UTF-8就删掉该标签（规范要求双保险） - 重复声明多个charset，部分浏览器会忽略全部
正确位置：紧随之后，且必须是内第一个或第二个标签（仅可排在
viewport不设等于放弃移动流量
不加meta name="viewport"，iOS Safari 和多数 Android 浏览器会以 980px 宽度渲染页面，再整体缩放显示——结果就是文字小得看不清、按钮点不准、意外出现横向滚动条。
标准写法只有这一行：
必须避开的坑：
- 加
maximum-scale或user-scalable=no：违反 WCAG，iOS 10+ 已部分忽略，且损害可访问性 - 写死
width=375或width=750：破坏响应式逻辑，不同设备尺寸下直接失效 - 用
minimal-ui（已废弃）：仅老版 UC/QQ 浏览器需兜底，现代项目不必加
description和title必须每页唯一且精准
meta name="description"不参与排名，但 Google、Bing 等引擎会直接把它当搜索结果摘要展示。写空洞（如“欢迎访问XXX官网”）、超长（>155字符被截断）、或全站复用同一段，等于把点击率主动让给别人。
实操要点：
-
title控制在50–60字符内，前部放核心关键词（用户扫一眼就能判断是否相关） -
description严格控制在120–155字符，含1–2个目标关键词，且与正文强相关 - 静态站点生成器（如Hugo/Jekyll）中，确保模板从页面 front matter 动态注入，而非硬编码
- CMS 或 SSR 项目中，
title和description必须走服务端逻辑生成，不能靠 JS 运行时改（爬虫看不到）
author、keywords、robots这些标签怎么取舍
meta name="author"仍可保留，content 填真实姓名或团队名（如"前端技术组"），对内部协作和内容溯源有帮助；但别指望它提升SEO。
meta name="keywords"基本可删：Google 自2009年起明确表示不使用该字段，Bing 也早已弱化其权重，留着反而可能因堆砌关键词被质疑低质。
meta name="robots"要按需配置：
- 测试页、登录页、重复内容页：用
content="noindex, nofollow" - 不想被缓存但允许索引：用
content="noarchive" - 默认行为就是
index, follow，不写即可，不必补全
最容易被忽略的一点：所有meta标签都必须在内完成，且不能嵌套在<script></script>或里——哪怕你用document.write动态插入，浏览器也不会识别为有效元数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
