使用方法
用 Meta 标签分析做上线前自检只要两步。第一步，打开你网页的源码，把 <head> 到 </head> 之间那段粘进上面的文本框——页面已经放好一份示例，直接改也行。第二步，按 Ctrl 或 Cmd 加 Enter，或点「开始分析」，工具会用浏览器的 DOMParser 把 title、各 meta、link 标签逐个抽出来，列出内容和按 Unicode 码点统计的长度，再和推荐区间比对给出「正常 / 偏短 / 偏长」。发现偏短的 description 或缺失的 viewport，就地改源码再粘回来复测即可，全程不离开浏览器。
能解决什么
写页面的人常踩的坑是：title 写太长被 Google 截断、description 太短不吸引点击、移动端忘了 viewport、重复页面没 canonical。这些问题肉眼难发现，尤其中文全角字符按半角经验值估会严重低估宽度。Meta 标签分析把每个标签的长度量化出来，并用码点计数（避免 emoji 把 .length 翻倍误判），让你在上线前就知道哪些标签需要改。对代运营、SEO 外包、模板批量检查，它能把「凭感觉」变成「看数字」。
原理和变量
这一节只讲 Meta 标签分析自己的技术内核六问。
① 调用什么算法：解析用 DOMParser.parseFromString(html, 'text/html')，再从生成的 doc.head 里 querySelectorAll('title, meta, link') 抽取节点；长度用 Array.from(str).length 按 Unicode 码点计数，而不是字符串的 .length 属性。
② 参数为什么取这个值：长度必须按码点而不是 UTF-16 单元，因为像「😀」这样的辅助平面字符 .length 是 2、码点才是 1，用错会把含表情的标题误判成翻倍长。阈值按 Google 搜索结果展示宽度（标题约 600px、描述约 920px）反推成字符经验值：title 10–60、description 50–160。
③ 遵循什么标准：展示宽度来自 Google 搜索外观的公开经验值（官方没有硬字符上限，只说会被截断）；字符计数遵循 Unicode 码点模型（Unicode 15 的辅助平面）。中文全角约占两个半角宽度，所以中文标题建议更短。
④ 输入怎么变成输出：粘贴的 HTML 经 DOMParser 成文档树 → 遍历 head 子节点 → 对 meta 取 name / property / http-equiv / charset 区分类型、对 link 取 rel 与 href → 记录内容字符串 → Array.from 算码点长度 → 查阈值表得出状态。
⑤ 边界与阈值：title 推荐 10–60 码点，低于 10 偏短、高于 60 偏长；description 推荐 50–160 码点；keywords 若存在建议 ≤120；viewport 必须存在（移动适配）；空输入或没有 <title> 会明确报错，而不是静默给 0。
⑥ 常见误用：以为 meta name="keywords" 还有排名权重（Google 自 1999 年起就不再用它排序）；以为 description 长度直接影响排名（它只影响展示与点击率）；用半角字符数估算中文 title（全角宽度约为半角两倍，会严重低估被截风险）；用 .length 而非码点计数导致含 emoji 标题误判。
完整示例
把上面文本框里的示例 head 粘进来分析，会检出 7 个标签。其中 title「柳泉工具 - 免费在线实用工具集合」码点长度 17，落在 10–60 正常区间；description 码点长度 49，略低于推荐的 50 下限，提示偏短，建议补一个字或一句价值主张；og:title 只有 4 码点、og:description 只有 8 码点，都偏短，社交分享卡片会显得空。下面是这份示例的逐项结果。
| 标签 | 内容 | 码点长度 | 状态 |
|---|---|---|---|
| title | 柳泉工具 - 免费在线实用工具集合 | 17 | 正常 |
| name=description | 柳泉工具提供上百个免费在线工具，涵盖计算、生成、文本、图片、颜色与 SEO，全部在浏览器本地运行。 | 49 | 偏短 |
| name=keywords | 在线工具,实用工具,柳泉工具 | 14 | 正常 |
| property=og:title | 柳泉工具 | 4 | 偏短 |
| property=og:description | 免费在线工具集合 | 8 | 偏短 |
| name=viewport | width=device-width, initial-scale=1 | 35 | 正常 |
| link rel=canonical | https://liuquan.net/ | 20 | — |
输入范围与对照表
下表列出常见 Meta 标签、推荐长度与容易踩的坑，共 13 项。前 12 项直接展示，点「加载更多」看第 13 项；需要外发请用工具区的 CSV / JSON / 复制对照表。
| 标签 | 推荐长度 | 作用 / 常见误用 |
|---|---|---|
| title | 10–60 码点 | 搜索结果标题；过长被截断，中文按全角计更短 |
| name=description | 50–160 码点 | 搜索摘要；只影响点击率不影响排名 |
| name=keywords | ≤120 码点 | Google 已停用其排序权重，可省略 |
| name=viewport | 必须存在 | 移动端适配，缺失则手机排版错乱 |
| link rel=canonical | — | 指向规范网址，避免重复内容 |
| name=robots | — | 控制抓取与索引，写错会误屏蔽 |
| property=og:title | 10–60 码点 | 社交分享标题，缺失则用 title |
| property=og:description | 50–160 码点 | 社交分享摘要 |
| property=og:image | — | 分享卡片配图，建议 1200×630 |
| property=og:url | — | 分享归一的网址 |
| property=og:type | — | 页面类型，如 website/article |
| name=twitter:card | — | Twitter 卡片类型，如 summary_large_image |
| name=twitter:title | 10–60 码点 | Twitter 专属标题，缺失回退 og:title |
边界与精度
Meta 标签分析的精度卡在两处：字符计数和缺失判定。字符计数用码点而非 UTF-16 单元，所以「a😀b」在 JS 里 .length 是 4、码点是 3，工具报 3，避免表情把标题长度虚高。阈值本身不是硬标准——Google 没有公布字符上限，只按像素宽度截断，因此 60 / 160 是经验值，中文全角约占两倍宽度，中文标题建议更保守（25 个汉字左右就接近展示上限）。缺失判定上，没有 <title> 会被标记为致命缺失（搜索引擎无法生成结果标题），没有 viewport 标记移动端不适配，没有 canonical 则易出现重复内容收录，三者都会在分析里明确提示。
常见问题
description 写多长最好？
经验上 50 到 160 个码点最稳。太短（如示例的 49）搜索可能自行截取正文补全，太长会被截断。中文按全角算，约 30–70 个汉字是舒适区。description 不直接影响排名，主要影响用户是否点进来。
为什么我的 title 明明不长却被判偏长？
如果你用了含 emoji 或生僻符号的标题，且代码用普通 .length 计数会被翻倍；本工具按码点计数不会。另一种可能是中文全角占两倍宽度，按 Google 600px 展示宽度反推，中文标题 25 字左右就接近上限，并非真的字符数超 60。
meta keywords 还需要写吗？
对 Google 不需要，它 1999 年就声明不再用 keywords 排序。百度等部分引擎也基本忽略。写了无害，但不必为它纠结长度；本工具仍会检查，只是状态仅供参考。
粘贴整页 HTML 可以吗？
可以。DOMParser 会忽略 body，只从 head 抽标签。但粘整页更长、解析更慢，建议只粘 head 片段更清爽。
viewport 缺失真的有关系吗？
有。没有 viewport 的页面在手机上会被当成桌面宽度缩放，排版错乱、体验差，移动搜索也会受影响。本工具把它标为必须存在，缺失即提示。
canonical 写错会怎样？
canonical 指向规范网址，写错可能把权重引到错误页面或引发重复内容。本工具只检查它是否存在与长度，正确性需你对照真实网址确认。
分析结果是存在本地还是上传了？
全程在浏览器本地用 DOMParser 解析，不联网、不上传你的源码。关掉页面数据即消失，重要报告请导出 CSV 或 JSON 留存。
为什么长度用码点而不是字符数？
JavaScript 字符串按 UTF-16 单元存储，辅助平面字符（如很多 emoji）占两个单元，.length 会虚高。Array.from 按码点展开，得到的才是用户真正看到的字符数，避免误判。示例「a😀b」.length 为 4、码点为 3 正是这个差别。