Meta标签生成器_一次输出规范head元信息

使用方法

在「页面标题」里填 在线 Meta 标签生成器_一键拼 head元信息 - 柳泉工具（页面默认值），它正好是 32 个字符、17 个汉字，刚好卡在「标题上限 32」这条线上。把上限改小（例如 28）会立刻被拒绝并告诉你超了几个字符，而不是悄悄截断。
「描述」框里预置了一段 139 个字符、82 个汉字的文字，落在建议的 70～100 个汉字区间内。里面故意放了 &、双引号和 <head>，生成后可以看到它们分别变成 &、" 与 <head>，转义后长度由 139 涨到 154，多出的 15 个字符就是溢出的实体。
填「canonical 地址」，必须以 http:// 或 https:// 开头；示例值长 64 个字符。填 www.liuquan.net 这种没有协议的写法会被明确拒绝。
「robots」「viewport」「referrer」三项下拉选的是标准里的常用取值：示例分别取 index,follow（12 字符）、width=device-width, initial-scale=1（35 字符）与 strict-origin-when-cross-origin（31 字符）。
点「生成 head 片段」输出 10 行代码，右上角同时给出行数、字符数、UTF-8 字节数与描述汉字数；「复制片段」一次带走，下面的对照表还能导出 CSV。

这个 Meta 标签生成器能解决什么问题

一是把「写法」从记忆里搬出来。字符集、视口、机器人指令、 canonical 这几件事各自都有规范写法，靠记忆写容易漏参数或者把双引号提前闭合。这个 Meta标签生成器把它变成一张表单，填完就整段生成，不需要回想 viewport 后半句是 initial-scale=1 还是 initial-scale=1.0。

二是挡住最伤人的那一类错误：标题里带引号。属性是用双引号包起来的，一旦 content 里有未转义的 "，从一个双引号开始解析器就认为属性结束了，后面的内容会当成新的属性名。本工具先把四个字符 & < > " 转成实体再拼字符串，从源头掐掉这条路径。

三是在提交之前知道「长度合不合格」。UTF-8 下一个汉字占 3 字节，一个 ASCII 字符占 1 字节，所以同一段话的「字符数」和「字节数」能差出一倍多——示例片段 671 个字符对应 923 字节，比值 1.376。这两边都给出来，就不用自己再去换算。

本页不做：社交分享卡片那一套 og: / twitter: 前缀的完整参数请使用「Open Graph Meta标签生成器」；站点级的抓取规则写在 robots.txt 里，请用「Robots.txt生成器」；也不会替你抓取线上页面去分析已有的标签。

生成原理：转义顺序、void 元素写法与「标准名」清单

第一件事：转义，且顺序不能变。实现里是一个链式替换：s.replace(/&/g,'&') 必须排在 < 之前——如果先转 < 得到 <，再转 & 就会把刚生成的那个 & 又吃掉一层，变成 &lt;，页面上显示的就不再是尖括号而是字面的 <。四个字符按 & → < → > → " 依次处理，这才是唯一正确的处理顺序。

第二件事：<meta> 是 void element。按 WHATWG HTML 标准，meta、link、base、br、input 这类空元素只有开始标签，不允许写结束标签，也不需要写自闭合的斜杠。所以本工具输出的是 <meta name="robots" content="index,follow">，而不是 <meta ... />——后者在 HTML 里被当作一个无意义的斜杠忽略，在 XHTML 里才是必须。写成 </meta> 则是实打实的语法错误。

第三件事：名字只能取「标准名」。HTML 标准 4.2.5.1 维护了一份 standard metadata names 清单，application-name、author、description、generator、keywords、referrer、theme-color、color-scheme 都在里面；name 之外的另一套机制是 4.2.5.4 的 pragma directive（http-equiv），允许的值是 content-language、content-type、default-style、refresh、x-ua-compatible、content-security-policy 这几个。清单以外的名字不是不能用，但属于自定义名，没有规范的语义保证。对照表里标了「私有名」的那几行就属于这一类。

第四件事：字符集必须出现在文档前 1024 字节。这是 charset 的特殊性——浏览器必须从开头起的一段字节里读到它才能正确解码后续内容。示例片段整体只有 923 字节，就算 head 前面还压着若干行 CSS 引用也绰绰有余；真正会翻车的是把 <meta charset> 塞在几百行注释或内联脚本之后。

第五件事：空白先归一。标题与描述进入生成器之前会先 replace(/\s+/g,' ') 再 trim()，换行、制表符、连续空格统一折叠成一个半角空格。这一步不是洁癖：粘贴时混进来的换行会原样写进 content，属性里出现真实换行虽然在 HTML 里合法，但复制进 JSON 或 YAML 配置时会直接破坏结构。

完整示例（数值仅作演示）

示例条件就是页面打开时的默认值：标题 32 字符、描述 139 字符（82 个汉字）、关键词 23 字符、作者 4 字符、canonical 64 字符、theme-color 取 #315fe8。逐项核对生成结果：

整段共 10 行：8 个 <meta> 标签 + 1 个 <title> + 1 个 <link rel="canonical">；
片段 671 个字符，按 UTF-8 计为 923 字节，比值 1.376——差异来自中文：一个汉字 3 字节、一个 ASCII 字符 1 字节；
描述那一行的 content 由 139 字符转义到 154 字符，多出 15 个字符，分别是 1 组 &、1 组 " 与 2 组尖括号实体；
把「标题上限」改成 28 再点生成，会被告知「标题 32 个字符，超过你设的上限 28 个字符」，结果区不产出任何代码——宁可报错，也不偷偷截断成 在线 Meta 标签生成器_一键拼 hea；
把 canonical 改成 www.liuquan.net/x/ 同样被拒，因为缺少协议头，规范里 canonical 要求绝对 URL。

常用 head 字段与 content 长度对照表

下表列出本工具会处理或刻意标注的字段。「content 字符数」是示例取值的真实长度，写修改意见时可直接引用。「依据」一栏区分了标准名与私有名：私有名是指某家浏览器或搜索引擎自定义的名字，不属于 HTML 标准清单。

字段写法	content 字符数	依据	是否建议写
name="description"	30	HTML 标准 4.2.5.1 标准名	必写
name="keywords"	23	标准名，主流搜索引擎已不用于排序	可写
name="author"	4	HTML 标准 4.2.5.1 标准名	可选
name="robots"	12	HTML 标准 4.2.5.1 标准名	必写
name="viewport"	35	标准名，配合 CSS Device Adaptation	手机端必写
name="generator"	16	HTML 标准 4.2.5.1 标准名	可选
name="referrer"	31	Referrer Policy 规范取值	可选
name="theme-color"	7	HTML 标准 4.2.5.1 标准名	可选
name="color-scheme"	10	HTML 标准 4.2.5.1 标准名	深色模式用
name="application-name"	4	HTML 标准 4.2.5.1 标准名	PWA 用
charset="UTF-8"	14	HTML 标准 4.2.5，须在前 1024 字节	必写
http-equiv="content-type"	24	HTML 标准 4.2.5.4 pragma	与上者二选一
http-equiv="x-ua-compatible"	7	旧 IE 遗留 pragma	基本不用
http-equiv="default-style"	4	HTML 标准 4.2.5.4 pragma	可选
http-equiv="refresh"	2	pragma，WCAG 2.2.1 不建议用	不建议
http-equiv="content-security-policy"	18	Content Security Policy Level 3	安全增强
name="format-detection"	12	iOS Safari 私有名	移动端可选
name="rating"	7	标准名，RFC 2076 沿革	少见
name="revisit-after"	6	非标准，主流引擎不采用	写了也没用
name="MobileOptimized"	5	旧 Windows Mobile 私有名	遗留
name="HandheldFriendly"	4	旧移动浏览器私有名	遗留
name="google-site-verification"	20	搜索引擎私有名	站权验证用
name="baidu-site-verification"	19	搜索引擎私有名	站权验证用
name="twitter:card"	19	社交卡片，完整参数见 Open Graph 专页	分享用

输入范围、边界与精度说明

标题上限可设 10～60 个字符，默认 32。超限时会给出具体的字符数差异，不会自动截断——截断会掩盖「标题本身就写长了」这个事实。32 这个值与 description 的 70～100 个汉字是两套口径，不要混着看。
描述按汉字数校验（70～100 个汉字）。落在区间外会根据实际计数给出提示；只含英文的描述因为没有汉字而计为 0，此时需要你自己按同样语义换成中文表述。
单个字段上限：标题 120 字符、作者 60 字符、关键词 200 字符、canonical 500 字符、theme-color 7 字符、描述 2000 字符。2000 个字符大约等于 14 条上面那段示范描述，超过请先精简。
theme-color 只认 #RRGGBB 六个十六进制字符。#fff 这种缩写形式会被拒绝；这不是本工具苛刻，而是标准里该字段的值本身要求是一个合法的 CSS 颜色。
canonical 必须带协议头。不带 http(s):// 的写法属于相对地址，规范明确要求 canonical 指绝对 URL；页面会给出具体提示而不是替你补一个 https:// 前缀——补前缀有可能指向一个根本不存在的协议。
robots 多条指令冲突时按最严格的那条生效。同一份文档里同时出现 index 与 noindex，实际效果是 noindex。本页用下拉单选，从输入侧就避免了自相矛盾。
字符数与字节数不要混用。示例片段 671 字符 / 923 字节；如果按 iso-8859-1 或 GBK 存储同一段中文，字节数又是另一套结果，这一点要在使用的整套系统里统一。

常见问题

为什么 description 里的引号变成了 " 这样一串？

因为属性的边界就是双引号。若 content 里出现未转义的 "，解析器会在此处认为属性已结束，后面的文字被当成新属性，整个标签随之失效。转成 " 之后浏览器读到实体会还原成一个引号字符，显示效果与你的期望一致，结构也不被破坏。

输出的 meta 标签为什么没有结尾的斜杠？

因为 meta 在 HTML 标准里属于 void element：只有开始标签，不允许写结束标签，也不推荐写 />。自闭合写法是 XHTML 的遗留习惯，在 HTML 文档里那个斜杠会被忽略。想要符合 XML 规范的输出，请自行在每个标签末尾补斜杠。

keywords 写满效果更好吗？

不会因为写满而变好。它是 HTML 标准承认的标准名，但主流搜索引擎早已公开表示不把它用作排序信号。这个字段只在少数内部搜索系统里还被读取，写三五个词足够，堆几十个词既无收益也可能被判为过度优化。

title 只到 32 个字符，是不是墨守成规？

32 是本页内部的写作口径，目的只有一个：留出余量。搜索结果标题区域的实际宽度有限且随设备变化，写得太长时往往后半段被截断成省略号。如果你确切知道目标宽度，可以把「标题上限」这个数字调到自己的实际值。

canonical 填相对路径可以吗？

不可以，页面会拒绝。规范术语是「canonical URL」，要求绝对地址。相对地址在不同的相对基准下会指向不同资源，起不到「指定权威版本」的作用，因此本页不替你补协议头。

robots 写成 noindex 之后还能被抓到吗？

能被抓取，但不能被收录。抓取与收录是两件事：noindex 告诉引擎「请不要把这个页面放进索引」，引擎仍然需要先抓到页面并读到这条指令。真正想拦住抓取要写 robots.txt 或做鉴权，本页只负责生成标签这一层。

theme-color 和 color-scheme 有什么不同？

两者都写在标准名清单里但作用对象不同：theme-color 给浏览器 UI（移动端状态栏、工具栏）着色，值是 CSS 颜色；color-scheme 声明页面自身支持明色还是暗色（light dark），影响表单控件与滚动条的默认配色。一个管外壳，一个管内容。

我填的内容会被上传或保存吗？

不会。字符串拼接与转义全部在当前页面完成，没有网络请求，也不写 Cookie 或本地存储。想自行确认，打开开发者工具的 Network 面板，多点几次「生成 head 片段」，可以看到没有任何新请求发出。

Meta标签生成器