必须写的<meta>标签包括：<meta charset="UTF-8">（须置于<head>最前）、<meta name="viewport" content="width=device-width,initial-scale=1">、<meta name="description" content="...">和<meta name="robots" content="index,follow">；keywords已无SEO价值，不应使用。
<meta> 标签是唯一合法且被广泛支持的 HTML 元数据定义方式，<title> 和 <link rel="canonical"> 等也属于元数据链路，但关键词（keywords）已无实际 SEO 价值，现代页面应聚焦于 description、viewport、charset 和结构化数据。
哪些 <meta> 是必须写的
不是所有 <meta> 都等价。浏览器和爬虫只认特定 name 或 http-equiv 属性值，其余会被忽略：
-
<meta charset="utf-8">—— 必须放在<head>最前，否则可能触发字符重解析，导致中文乱码或样式错位 -
<meta name="viewport" content="width=device-width, initial-scale=1">—— 没它，移动端页面默认按 980px 渲染，文字小到无法点击 -
<meta name="description" content="...">—— 搜索结果摘要唯一可控字段，长度建议 50–160 字符，避免堆砌 -
<meta name="robots" content="index,follow">—— 明确告诉爬虫是否索引/跟随链接；生产环境禁用noindex时务必检查是否误留
keywords 还要不要写
不要写。Google 自 2009 年起完全忽略 name="keywords"，Bing 也早已弃用。实测添加该标签对排名、点击率、收录均无正向影响，反而可能暴露配置疏漏（如过期词、拼写错误）。若团队有历史遗留要求，可保留但内容设为空或占位符，例如：<meta name="keywords" content="">。
容易被忽略但关键的元数据配置
这些字段不显眼，但直接影响渲染行为、安全策略与跨域协作：
立即学习“前端免费学习笔记（深入）”；
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">—— 仅 IE 有效，现代项目可删；若需兼容旧内网系统，必须紧贴<meta charset>后，顺序错位会导致 IE 强制文档模式降级 -
<meta name="theme-color" content="#4285f4">—— Chrome/Edge 地址栏、PWA 启动屏配色，Android 上生效明显；不支持透明色，HEX 或 RGB 均可 -
<meta property="og:title" content="...">—— Open Graph 协议字段，Facebook、微信等分享时读取；必须配合<meta property="og:url">和<meta property="og:type">才完整，缺一不可 -
<link rel="canonical" href="https://example.com/page">—— 解决重复内容问题，尤其适用于带参数的 URL（如?ref=abc），href 值必须是绝对路径且可访问
结构化数据该放哪儿
JSON-LD 是当前最推荐的结构化数据嵌入方式，必须用 <script type="application/ld+json"> 写在 <head> 或 <body> 顶部，不能包裹在 HTML 注释里，也不能用 document.write 动态注入。Google 不解析 <script> 外部引用的 JSON-LD，也不支持 itemscope + itemtype 的旧式微数据写法。示例：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "HTML 页面元数据配置",
"description": "如何正确设置 meta 标签与结构化数据"
}</script>
验证工具用 Google Rich Results Test，别依赖浏览器开发者工具的 Elements 面板——它不显示解析后的结构化数据。
