轻工具

Meta 标签生成

填写标题、描述与地址，实时生成基础 Meta 与社交卡片代码，附 Google 搜索预览。

0 / 60 字符

0 / 160 字符

主流搜索引擎已忽略 keywords，仅在需要时填写。

在上方填写标题或描述，生成的代码会实时显示在这里。

使用说明

  1. 填写页面标题与描述：标题建议 60 字符以内，描述建议 160 字符以内。输入框下方的计数实时更新，超长时页面会出现黄色提示。
  2. 填入页面 URL：它决定 canonical 与 og:url，也决定 SERP 预览里的地址行。格式非法时出现红色提示，对应行会从输出里移除。
  3. 按需补充图片 URL、站点名称、og:locale、robots 与关键词，不填的项不会在输出里留下空标签。
  4. 查看 SERP 预览与三段代码，确认文案长度与卡片样式符合预期。
  5. 用各代码块的「复制」按钮取单段，或用「复制全部」一次取走三段，粘贴到页面 head 里即可。

常见问题

生成的代码应该粘贴到哪里？
粘贴到页面 head 区域，也就是 head 与 /head 之间。基础 Meta 供搜索引擎读取，Open Graph 与 Twitter Card 供社交平台生成分享卡片，三段可以同时使用，互不冲突。
为什么输出里没有 og:image？
图片 URL 没有填写时，og:image 与 twitter:image 两行会整体省略，不会留下内容为空的标签。填入完整的图片地址后，两行会自动出现。
标题超过 60 字符会怎样？
页面不会阻止生成，但会出现黄色提示。搜索引擎通常会把过长的标题截断显示，建议把重要信息放在前半段，或精简措辞后再复制。
URL 填错了输出会怎样？
页面会出现红色提示说明具体原因，canonical 与 og:url 两行会先从输出里移除，其余标签不受影响。改对之后这两行会自动补回。

使用步骤

  1. 填写标题与描述

    标题建议控制在 60 字符以内，描述控制在 160 字符以内。输入框下方的计数实时更新，超出建议值时页面会出现黄色提示。

  2. 填入页面地址

    页面 URL 用于 canonical 与 og:url，也决定预览里的地址行。填写 http 或 https 开头的完整地址，格式非法时出现红色提示，相关行会先从输出里移除。

  3. 按需补充社交信息

    图片 URL、站点名称与 og:locale 供分享卡片使用。图片不填时输出里不会出现 og:image 与 twitter:image，不会留下空值标签。

  4. 复制生成的代码

    三段代码各自带复制按钮，也可以一键复制全部。把它们粘贴到页面 head 里，再把链接放进各平台的分享调试器验证一次即可。

工具详细介绍

Meta 标签写在页面 head 里，读者看不到它们，搜索引擎与社交平台却靠它们决定怎么展示你的页面。title 与 description 直接对应搜索结果里的蓝色标题和灰色摘要。og 系列标签决定链接被分享到聊天工具或社交平台时的卡片样式。twitter 系列则服务于 X 一类平台的展示。三段标签各管一层，缺了哪一段，那一层就由平台自行抓取页面内容来猜，效果往往不可控。把标签提前写好，是成本最低的展示优化。

这个页面把三段标签放进同一个表单。左侧的输入决定右侧的输出，改动立即生效，不需要点生成按钮。字符计数贴在输入框下方，标题超过 60 字符、描述超过 160 字符时会出现黄色提示，这是搜索结果常见的截断阈值。URL 只认 http 与 https 开头的完整地址，写错时给出红色提示。canonical 与 og:url 两行会先从输出里移除，改对后自动补回。全部转义在浏览器本地完成，填什么都不会上传。

原理与背景

HTML 属性值里有四个字符必须转义。& 要写成 &，否则会被当成实体引用的开头。< 与 > 会破坏标签结构。双引号会提前终结 content 这类属性值。标题与描述里出现引号和尖括号并不少见，例如引用书名、代码片段或比较符号。转义必须按固定顺序处理，先处理 & 再处理其余三个字符。顺序反了会把已经生成的 < 再转成 &lt;，页面源码里出现双重转义。本页的输出按这个顺序处理，复制出来的内容可以直接粘进任何 HTML 文档使用。

60 与 160 这两个数字来自搜索结果的展示宽度。桌面端标题大约有 600 像素的空间，对应英文约 60 个字符，中文因字宽更大，实际约 30 个字。描述通常显示两行，折算约 160 个字符。超限不代表不能用，只是后半段可能被省略号替代，所以要把关键信息写在前面。twitter:card 常用的两种取值是 summary 与 summary_large_image。前者在文字旁放一张小方图，适合文章与工具页。后者是顶部大图，适合以视觉为主的页面。两种类型都依赖 twitter:image，配图不填时卡片会退化成纯文字。

典型使用场景

  1. 新页面上线

    文章、产品页或活动页发布之前，用本页生成成套标签再粘进 head。上线前就能看到搜索结果的大致样子，标题被截断、描述缺失这类问题在发布阶段就能改掉，不用等收录后再返工。

  2. 改进搜索展示

    发现搜索结果里标题被截断或描述被改写时，回到本页调整文案重新生成。把页面能解决的问题写进描述前半段，主要关键词靠前排列，搜索引擎更可能原样采用你写的文本。

  3. 统一分享卡片

    同时运营多个落地页时，固定使用同一套站点名称与 og:locale，图片按统一尺寸准备，逐页填入生成。各平台的分享卡片风格保持一致，品牌识别度更高，排查展示问题时也更容易定位差异。

使用技巧

  • 先写描述再填其他字段，用一句通顺的话讲清页面能解决什么问题，比堆砌关键词更有分量。
  • 图片地址要用 http 或 https 开头的绝对路径，相对路径在分享卡片里经常取不到图。
  • 发布之后把链接粘进各平台的分享调试器，确认卡片图片与描述按预期显示。

注意事项

  • 长度不是硬门槛

    超过 60 字符只是可能被截断，不等于违规。为了凑数把标题压到语义残缺，点击率反而更差。先保证标题完整可读，再考虑精简，黄色提示当作提醒来看就好。

  • 图片地址要绝对

    og:image 填相对路径时，多数平台取不到图，卡片直接退化成纯文字。图片要用 http 或 https 开头的绝对地址，宽度建议 1200 像素以上，太小的图会被部分平台放大模糊或拒绝展示。

  • 别堆关键词

    keywords 标签早已被主流搜索引擎忽略，往里面塞几十个词没有收益，反而留下明显的优化痕迹。描述才是有分量的位置，用一句通顺的话写清页面价值，比罗列关键词有效得多。

相关工具