meta 标签生成
填好标题、描述、规范链接和分享图，实时拼出一整段可以直接粘进 head 的标签，并顺手检查长度和缺失项。
标题显示宽度约 36，建议区间 50 到 60（中文一个字算 2）。
描述显示宽度约 117，建议区间 120 到 158。
常用 head 标签速查
| 标签 | 用途 | 注意 |
|---|---|---|
| charset | 声明文档编码 | 必须放在 head 的前 1024 字节内，否则浏览器可能按错误编码渲染出一屏乱码后再重新解析 |
| viewport | 移动端视口设置 | 内容一般是 width=device-width, initial-scale=1，缺了它移动浏览器会按 980 像素宽的桌面视口缩放 |
| title（不是 meta，但同属 head） | 页面标题 | 搜索结果里第一行的蓝字，也是浏览器标签页的文字，对排名的影响比 description 大 |
| description | 页面摘要 | 搜索引擎未必采用，但采用了就影响点击率。它不参与排名，别在里面堆关键词 |
| canonical | 声明规范地址 | 用绝对地址。它的作用是告诉爬虫「这一页的正式版本是哪个」，不是重定向 |
| robots | 页面级抓取与收录控制 | noindex 不收录、nofollow 不跟踪链接，和 robots.txt 的 Disallow 是两个层面的事 |
| og:title / og:description / og:image | Open Graph 分享卡片 | 微信、Facebook、LinkedIn 等读取。og:image 建议 1200×630，用绝对地址 |
| og:type / og:locale | Open Graph 的类型和语言 | 类型常见取值 website、article、product；locale 用 zh_CN 这种下划线连接的形式 |
| twitter:card | Twitter 卡片样式 | summary 是左侧缩略图，summary_large_image 是整张大图，后者更适合做封面 |
| theme-color | 移动浏览器地址栏配色 | Android 的 Chrome 会用它给地址栏和状态栏上色，填十六进制颜色值 |
使用说明
这一页生成的是一段可以直接粘进 head 里的标签集合，顺序按浏览器和爬虫的实际读取习惯排：charset 必须在文档的前 1024 字节内出现，否则浏览器可能先按错误的编码渲染一屏乱码再重新解析；viewport 紧随其后，它决定移动端是按 980 像素的桌面视口缩放还是按设备宽度排版；接着是标题和描述，最后才是社交平台用的那几组属性。空着的字段不会输出，避免留下一堆 content 为空字符串的半成品标签。
标题和描述的长度提示按「显示宽度」算，不是字符数。搜索结果的截断发生在像素层面，一个汉字大约顶两个西文字母宽，所以标题的建议区间 50 到 60 对西文就是 50 到 60 个字符，对中文则是 25 到 30 个字；描述的建议区间 120 到 158 对中文是 60 到 79 个字。超出区间的部分很可能被截成省略号，尤其是标题——截断后用户看到的是半句话，点击率掉得比排名还快。这个宽度是估算值，不同设备和字体的实际渲染会有出入，把它当参考而不是硬性指标。
属性的值全部做了转义，这一点看着不起眼但很关键：属性本身用双引号包着，标题里如果直接出现一个双引号，就会把属性提前结束，整段标签变成坏的。所以双引号会被写成实体，尖括号和与号也一并处理。另外要注意 canonical 和 og:url 用的是绝对地址，相对路径在分享平台和部分搜索引擎那里解析结果不可靠。分享图除了要绝对地址，还要放在可被外部抓取的位置，登录墙后面或者带防盗链的图片，卡片是抓不到的。
关于 robots 那两个开关要说得更清楚一点：页面里的 noindex 和 robots.txt 里的 Disallow 不是同一件事。Disallow 管的是「爬虫要不要来抓」，noindex 管的是「抓到了要不要收录」，nofollow 则是「别顺着这一页的链接继续爬」。三者作用在不同环节：如果 Disallow 把这一页挡住了，爬虫就看不到页面里的 noindex，于是可能出现「明明加了 noindex 却还是被收录了标题」的情况。想确认线上的 robots.txt 到底怎么写才生效，用robots.txt 测试；想确认来访的爬虫身份，用User-Agent 解析；要把标题里的特殊字符手动转成实体，用HTML 实体转换。
常见问题
标题和描述为什么按「显示宽度」而不是字符数来提示？
因为搜索结果里的截断是按像素宽度发生的，一个汉字大约顶两个西文字母宽。同样写 60 个字符，全英文的标题刚好铺满，全中文的标题就只有一半。这里把全角字符算 2、其余算 1，于是标题的 50 到 60 对西文是 50 到 60 个字符，对中文就是 25 到 30 个字，一套阈值管两种语言。
描述到底影响搜索排名吗？
不影响排名，但影响点击率，而点击率是间接的排名因素。描述还可能被搜索引擎直接丢弃——当页面内容里有更贴合查询词的片段时，它会自己抓一段来当摘要。所以写的目标不是塞关键词，而是让人在几条结果里扫一眼就知道这一页是不是自己要找的。
canonical 和 og:url 有什么区别？
canonical 是给搜索引擎看的规范地址，告诉它这一页的正式版本是哪个，用来合并重复页面的权重；og:url 是给社交平台看的，用来确认分享卡片对应哪个链接。两者经常填同一个地址，但用途不同，也允许不一致——比如带统计参数的分享链接可以把 canonical 指向干净地址。填 canonical 要用绝对地址，相对路径搜索引擎无法可靠解析。
og:image 有什么硬性要求？
平台一般都要求绝对地址，草率地填相对路径会让抓取器拼错域名。常见建议尺寸是 1200×630，宽高比接近 1.91:1，小于 200×200 通常不会出图。另外图片要允许外部抓取，放在需要登录或有防盗链的地址上，卡片就会退化成纯文字。
twitter:card 的两种类型差在哪？
summary 是左侧一张小缩略图加右侧文字，适合文章列表式的展示；summary_large_image 是顶部一张大图，视觉冲击更强，适合做封面或产品页。Twitter 在没有明确 twitter 标签时会回退去读 og 里的同名字段，所以 og 那几项写上之后，卡片至少不会是空的。
noindex、nofollow 和 robots.txt 的 Disallow 是一回事吗？
不是。robots.txt 管的是「爬虫能不能来抓」，页面里的 noindex 管的是「抓到了要不要收录」，nofollow 是「别顺着这一页的链接继续爬」。三者作用在不同环节：页面上的 noindex 需要爬虫先把页面抓下来才看得到，如果 robots.txt 同时 Disallow 了这一页，爬虫读不到 noindex，反而会出现「明明加了 noindex 却还是被收录了标题」这种自相矛盾的结果。
生成的标签里引号变成了 "，是坏了吗？
没坏，那是必须的转义。属性值是用双引号包起来的，如果标题里本身有一个双引号，不转义就会把属性提前结束，整段 HTML 变成坏的。同理尖括号和 & 也会被实体化。粘进页面源码时保持转义后的样子就行，浏览器渲染时会还原成原字符。
为什么不顺便生成结构化数据？
这一页只负责 head 里的标签，结构化数据（JSON-LD）是页面上单独一段脚本，内容取决于页面类型是文章、产品还是问答，塞进同一个生成器只会让两边都变复杂。想控制爬虫的抓取范围用 robots.txt 测试，想确认来的爬虫是谁用 User-Agent 解析。