标题标签生成器

使用方法

1. 「核心关键词」填页面主词，示例 网页标题优化，最长 20 字；「品牌名后缀」填站点名，示例 柳泉工具，最长 15 字，留空则跳过带品牌的模板。
2. 分隔符选一种：下划线 _、连字符 - 或竖线 |，本页默认下划线。它会原样写进候选标题，选定后看预览行确认顺眼再生成。
3. 点「生成 title 标签」或在任一输入框按回车。上方预览行按 20px Arial 渲染，超过 600px 会被 CSS 省略号截掉——和搜索结果里的截断是同一回事。
4. 对照表默认 12 条，点「加载更多」看满 24 条；点「导出 CSV」拿到带 BOM 的文件，点「复制对照表」得到 TSV，可直接贴进表格软件。
5. 批量模式：右侧文本框每行一个关键词（已预填 3 行示例），按 Ctrl / Cmd + Enter，每行产出一条「关键词_两组修饰」结构的候选，逐行显示字符数与像素。

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

给页面定 <title> 时最纠结的是两件事：文案怎么组、长度会不会被搜索结果截断。标题标签生成器把「组文案」变成选模板——主词加两组修饰、主词加品牌、修饰词提前等六种结构各出几条候选，你只负责挑一条顺眼的，不用从空白开始憋。

第二件事是长度判断。很多人数完字符就上线，结果在搜索结果页还是被截成了省略号，因为 Google 按像素而不是按字符截断：同样 26 个字符，全中文占 520px，英文只占一半左右。本页每条候选都同时给字符数和像素宽两个数，两个口径都达标才标绿。

第三件事是批量给栏目页起标题。站点改版常有几十个栏目页要统一补 title，逐条手写容易漏品牌后缀、写错分隔符；把关键词一行一个贴进批量框，一次产出带一致结构的清单，导出 CSV 交给开发替换。口径说明：本页只管 <title> 与页面可见的 H1 这一层，head 里的 description、keywords、Open Graph 等 meta 标签属于另一个物种，去用Meta标签描述生成器；生成文案要不要嵌入关键词，可以先用关键词列表生成器把词表备好。

原理与规则：H1 层级语义、title 的 Text 约束与 600 像素截断线

先分清三层：标题标签生成器产出的是 <title>，它写在 head 里、是搜索结果页上那条蓝色链接的文字，也是浏览器标签页和收藏夹的名字；H1 是 body 里页面可见的大标题，读者打开页面才看得到；meta 描述同样在 head 里，但只在摘要位置展示。三者各管一段，互不替代——H1 写得再好，搜索结果页展示的仍是 title。

H1 到 H6 的层级语义由 WHATWG HTML 定义：h1 是当前章节最高级标题，h2 到 h6 依次降级，浏览器无障碍树里它们是 heading 角色，屏幕阅读器用户按标题快捷键逐级跳转，层级错了跳读就乱。默认字号从 h1 的 2em 递减到 h6 的 0.67em，但那只是 UA 样式表，可以用 CSS 改小 h1、改大 h3——改样式不会改语义，语义只由标签名决定。至于「一个页面能不能有多个 H1」：HTML4 时代不行，HTML5 曾允许每个 article/section 各自一个 H1，但 2022 年 WHATWG 把文档大纲算法（outline algorithm）从规范移除，这个自由随之失去背书，现在主流实践回到一页一个 H1。

<title> 元素的内容按规范必须是纯文本（Text），写 <b> 或 <br> 进去不会被当成标签渲染，而是原样出现在标签页标题里。所以本页输出的候选一律不含任何标签字符，需要强调就把词写成文字本身。

长度这条线是像素不是字符：Google 桌面端结果页的标题区域约 600px，排版近似 Arial 20px。按 Arial 的标准字宽（unitsPerEm 2048，字母 a 的 advance 是 1139）折算：全角汉字每个约 20px，600px 只装得下 30 个汉字；半角字母约 11.12px，能装 53 个；最宽的 m 约 16.66px，只能装 36 个。这就是「中文约 30 字、英文约 60 字符」口诀的来历。本页用 canvas.getContext('2d').measureText(text).width 按这条字体规则实测每条候选的像素，比按字符数估靠谱一截。

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

用默认输入「核心关键词 = 网页标题优化、品牌 = 柳泉工具、分隔符 = 下划线」点生成，前几条候选：

• 「网页标题优化_完整教程与操作步骤、参数详解与常见问题」——26 字符、511px、双达标，主词前置、两组修饰、不带品牌，是 600px 预算下的安全长度。
• 「网页标题优化_完整教程与操作步骤、参数详解与常见问题_柳泉工具」——31 字符达标，但 31 个全角字符折算 602px，刚过 600px 一点，会被标黄提醒：字符口径合格、像素口径截断，正是本页要抓的典型错判。
• 「网页标题优化_完整教程与操作步骤_柳泉工具」——21 字符、402px，标灰「偏短」：不截断，但 25 到 32 字符的站内区间没吃满，白白浪费一段卖点文案。
• 把关键词换成 12 字的「网页标题优化与关键词布局」再生成，「网页标题优化与关键词布局_完整教程与操作步骤、参数详解与常见问题_柳泉工具」37 字符、722px，标红「偏长」，截断后品牌后缀整段消失。

批量框预填的 3 行（网页标题优化 / 香水推荐 / 健身餐搭配）按 Ctrl + Enter 后，每行产出一条 26 字符级的候选，行数、字符数、像素三列与单条生成共用同一套算法，数值一致。

输入范围与对照表

核心关键词 1 到 20 字，品牌名 0 到 15 字，生成数量 1 到 24 条，批量最多 20 行。默认输入下 12 条候选的完整对照如下（像素按全角 20px、半角 11.12px 折算，与页内 canvas 实测同口径）：

读表要点：偏短不扣分只是浪费预算，标题标签生成器把 25 到 32 字符设为推荐区间的理由是——短于 25 常常塞不下「主词 + 差异点」，长于 32 则在 600px 截断后尾段必丢；而第 2 行说明即便字符数合格，全中文也可能压不住 600px，所以判定列永远同时看两个数。

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

字符数怎么数的：按 Unicode 码点计，用 [...s].length 而不是 s.length。差别在增补平面字符——比如 emoji 是代理对，s.length 返回 2，码点数返回 1。标题里放一个 emoji，两种数法差 1，而它实际占的像素又接近一个全角宽，三种口径各说各话；本页字符列统一用码点口径，像素列交给 canvas 实测，不混算。

600px 的取舍：这是桌面端结果页标题区域的业界通测值，对应的排版假设是 Arial 20px。它不是精确常数——Google 实际截断还受半角全角混排、时间戳后缀、移动端更窄等因素影响——但作为预算线，按它守着写，截断风险最低。同理「中文约 30 字」是 600 除以 20 的整数结果，遇到混入的数字和空格会略多一两个字符，别当精确值背。

模板池的规模：六个修饰词与五类结构组合出 48 条原始候选（T1 六条、T2 与 T3 各 15 条两两组合、T4 与 T5 各六条），去重后按「先双达标、后偏短」的顺序截取你指定的条数，上限 24。候选顺序是确定的，同一输入两次生成结果完全一致，方便前后对比。

常见误用一：只看字符数不看像素。31 个全角字符是 602px，照样截——上表第 2 行就是实例，字符口径达标、像素口径超限，两个数必须都看。

常见误用二：把 H1 文案原样当 title。H1 可以长、可以带感叹号、可以写成句子，title 要和搜索结果页的竞争者挤在 30 个汉字里，两者文案策略不同。一页多 H1 在规范层面已失去支持（2022 年文档大纲算法移除），别为了复用把页面拆出多个 H1。

常见误用三：往 title 里塞 HTML 或堆重复词。<title> 内容必须是纯文本，标签会原样露出；而「主词_主词_主词」式堆砌在 600px 里只会让截断先吃掉真正想展示的尾段，主词出现一次加品牌一次已经足够。

常见问题

相关工具

• 标题标签长度检测：对已上线的标题做字符与像素复查，与本页一写一查。
• 搜索结果预览工具：把 title 和描述放进模拟搜索结果框，看整体视觉效果。
• Meta标签描述生成器：head 里 description 那条摘要文案的专用生成页。
• Canonical标签生成器：标题定好后把规范链接一并补齐。
• 关键词列表生成器：批量产出关键词清单，再回本页逐个生成标题。
• 图片alt文本生成器：页面另一类需要按语义写短文案的属性。
• 词计数工具SEO：核对正文词频，避免标题承诺了正文没有的词。