<meta> 标签必须放在 <head> 内且紧贴 <title> 后，位置靠后会导致 charset 被忽略（引发乱码）、SEO 抓取失败、viewport 失效；常用 name 值如 description（SEO 摘要）、robots（爬虫控制）、viewport（移动端渲染），而 Open Graph 须用 property，Twitter Card 用 name；易被忽略但关键的有 referrer、theme-color、apple-mobile-web-app-title。
HTML 中 <meta> 标签该写在哪儿？位置错会导致什么
必须放在 <head> 内，且建议紧贴 <title> 后面。位置靠后（比如在 <script> 之后）可能导致浏览器解析延迟、SEO 工具抓取失败，或某些 meta（如 charset）被忽略——尤其是 <meta charset="UTF-8">，若不在 <head> 最开头几行，IE 和旧版 Safari 可能乱码。
常见错误现象：
– 页面中文显示为方块或问号
– 搜索引擎摘要不显示描述
– 移动端页面缩放异常（viewport 生效失败）
name 属性常用值及对应作用场景
不是所有 name 值都通用，不同值面向不同消费方（浏览器、爬虫、社交平台），用途和生效条件差异很大：
-
description：供搜索引擎展示摘要，长度建议 50–160 字符；过长会被截断，过短影响点击率 -
keywords：已基本被主流搜索引擎弃用（Google 自 2009 年起不使用），仅部分内部 CMS 或老旧系统可能读取 -
author：纯信息标注，无实际功能，但部分 CMS 会提取用于内容管理 -
robots：控制爬虫行为，值如index,follow、noindex,nofollow；注意逗号后不能有空格，否则部分解析器视为无效 -
viewport：严格来说它用的是name="viewport"，但实际是content控制移动端渲染，不是语义元数据，别和 SEO 类 meta 混用
Open Graph 和 Twitter Card 的 property vs name
Facebook、LinkedIn 等平台不认 name，必须用 property（属于 Open Graph 协议）；Twitter 则优先读 name 为 twitter:xxx 的标签。两者不能混写，也不能只写一种。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：
– 用 <meta name="og:title" content="...">（错：og 是 property，不是 name）
– 只加 Open Graph 标签，没加 Twitter Card，导致推特分享时图/标题缺失
正确组合示例：
<meta property="og:title" content="页面标题"><br><meta property="og:description" content="摘要文字"><br><meta name="twitter:title" content="页面标题"><br><meta name="twitter:description" content="摘要文字">
哪些 meta name 值容易被忽略但很关键
开发中常漏掉的几个非显眼但影响实际体验的值：
-
referrer：控制跨站请求是否发送 Referer，值如no-referrer-when-downgrade（默认），但若需兼容老系统或调试 API，可能要显式设为always或no-referrer -
theme-color：Chrome/Edge 地址栏、PWA 安装横幅的颜色，仅对支持的安卓 Chrome 生效；值必须是合法十六进制色值（如#4285f4），不能是命名色（blue）或 rgb() -
apple-mobile-web-app-title：iOS 添加到主屏幕后的显示名，默认取<title>，但可单独定制，避免过长被截断
这些值不报错、不警告，但缺失时用户感知明显：PWA 颜色不对、iOS 图标名奇怪、调试接口拿不到 referer —— 很难联想到是 meta 没写对。
