Meta 标签生成器

生成内容包含

• 基础 SEO meta——title、description、canonical、author、keywords、theme-color、viewport、robots。
• Open Graph——og:type、og:title、og:description、og:url、og:site_name、og:image（含 width / height / alt）、og:locale。
• Twitter Card——twitter:card、twitter:site、twitter:creator、twitter:title、twitter:description、twitter:image。
• Schema.org JSON-LD——最小的 WebPage、Article、Product 或 Organization 块（name / description / url / image）。

示例：打开页面时的默认输出

表单预先填好了本站的英文示例值，中文页面上 og:locale 默认是 zh_CN。什么都不改，复制得到的是：

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZeroTool — Free browser-based dev utilities</title>
<meta name="description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<link rel="canonical" href="https://zerotool.dev/">
<meta name="author" content="ZeroTool Workshop">
<meta name="keywords" content="dev tools, meta tags, open graph, twitter card">
<meta name="theme-color" content="#5b3d20">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="ZeroTool — Free browser-based dev utilities">
<meta property="og:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta property="og:url" content="https://zerotool.dev/">
<meta property="og:site_name" content="ZeroTool">
<meta property="og:image" content="https://zerotool.dev/og/json-formatter.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="ZeroTool cover image">
<meta property="og:locale" content="zh_CN">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@zerotooldev">
<meta name="twitter:creator" content="@zerotooldev">
<meta name="twitter:title" content="ZeroTool — Free browser-based dev utilities">
<meta name="twitter:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta name="twitter:image" content="https://zerotool.dev/og/json-formatter.png">

这里有 ogp.me 要求每个页面都写的四项：og:title、og:type、og:image、og:url。Twitter 图片字段是空的，所以 twitter:image 沿用 og:image。“语言”下拉框只在 og:locale 输入框为空时，把对应的 locale 显示为输入框里的占位提示，本身不输出任何标签；要改 locale，直接改 og:locale 输入框。发布前把示例值全部换成自己的。

示例：一篇中文测评文章

测评博客的一篇文章：标题里有直角引号和 &，og:type 选 article，Schema.org 选 Article，再填上作者。按 Ctrl/⌘+L 清掉示例文字，取消勾选 viewport，换掉两个示例 URL，填入下面的值，得到：

<title>「双十一」电动牙刷横评：5 款实测 &amp; 选购建议</title>
<meta name="description" content="实测 5 款 300 元以内的电动牙刷，续航、噪音和刷头价格一次看完。">
<link rel="canonical" href="https://blog.example.cn/2026/toothbrush/">
<meta name="author" content="王小明">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:title" content="「双十一」电动牙刷横评：5 款实测 &amp; 选购建议">
<meta property="og:description" content="实测 5 款 300 元以内的电动牙刷，续航、噪音和刷头价格一次看完。">
<meta property="og:url" content="https://blog.example.cn/2026/toothbrush/">
<meta property="og:site_name" content="小王测评">
<meta property="og:image" content="https://blog.example.cn/og/toothbrush.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="5 款电动牙刷并排摆放">
<meta property="og:locale" content="zh_CN">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="「双十一」电动牙刷横评：5 款实测 &amp; 选购建议">
<meta name="twitter:description" content="实测 5 款 300 元以内的电动牙刷，续航、噪音和刷头价格一次看完。">
<meta name="twitter:image" content="https://blog.example.cn/og/toothbrush.jpg">

<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "name": "「双十一」电动牙刷横评：5 款实测 & 选购建议",
  "description": "实测 5 款 300 元以内的电动牙刷，续航、噪音和刷头价格一次看完。",
  "url": "https://blog.example.cn/2026/toothbrush/",
  "image": "https://blog.example.cn/og/toothbrush.jpg",
  "author": {
    "@type": "Person",
    "name": "王小明"
  }
}
</script>

& 在属性里写成 &，直角引号「」不用转义，原样保留；JSON-LD 里的 & 也保持原样，因为 JSON 字符串里它没有特殊含义。选了 Article 并填了作者，JSON-LD 才多出类型为 Person 的 author。

标题旁的计数器显示 24 / 60，描述显示 35 / 160。计数器按字符串长度计数，一个汉字、一个标点、一个空格都算 1，不反映显示宽度。Google 的摘要文档写的是：meta description 没有长度上限，但搜索结果会按需要截断，通常按设备宽度截断。所以 60 和 160 只能当作提醒，写中文标题时以实际显示为准。

在微信里分享

生成的 og 标签面向读取 Open Graph 的平台。在微信内置浏览器里自定义“分享给朋友”的卡片，微信开放文档《JS-SDK 使用说明》给出的步骤是：

1. 登录微信公众平台，在“服务号设置”的“功能设置”里填写“JS接口安全域名”。文档写明：最多 5 个域名，不支持 IP 地址、端口号和短链域名，域名须通过 ICP 备案验证，新备案的域名 24 小时后才能配置。
2. 页面引入 jweixin-1.6.0.js，用 wx.config 注入签名配置。
3. 在 wx.ready 里调用 wx.updateAppMessageShareData，传入 title、desc、link、imgUrl；朋友圈用 wx.updateTimelineShareData。link 的域名或路径必须与 JS 接口安全域名一致。旧的 wx.onMenuShareAppMessage 等接口文档标注为即将废弃。

本工具不生成这段 JS-SDK 代码，也不检查签名。上面测评文章的例子里，og:title、og:description、og:image 的值可以直接作为 title、desc、imgUrl 传进去，两边保持一致。

限制

• JSON-LD 只有最少的字段。只有 name、description、url、image，Article 另加 author。Google 的 Article 文档建议写 headline、datePublished；Product 要有 offers、review 或 aggregateRating 才可能出现产品富媒体结果。这些字段需要手工补，再用 Google 的富媒体搜索结果测试检查。
• 有的选项没有配套字段。Twitter 的 player、app 卡片需要 twitter:player 或 twitter:app:* 标签，工具不生成；og:type 里的 product 不在 ogp.me 定义的类型中。工具也不生成 article:published_time、og:image:type 和 hreflang。
• robots 总会输出。index, follow 本来就是爬虫的默认行为，不改成 noindex 或 nofollow 时可以删掉这一行。
• 预览只是近似。各平台的卡片样式只是模拟。规范 URL 为空时，预览用站点名生成一个示例域名；站点名里没有半角英文字母或数字（比如“小王测评”）时显示 example.com。上线后请用平台自己的调试工具看真实卡片。
• 联网：标签内容留在浏览器里，但 Facebook、Twitter、Discord 预览会加载你填写的图片 URL，图片所在的服务器会看到这次请求。默认显示的 Google 预览不含图片。
• Ctrl/⌘+L 只清文本。文本框（包括 og:locale 和主题色文本框）会被清空；URL、数字框、下拉选项和 viewport 复选框保留，head 按剩下的值重新生成。

图片尺寸速查

把输出粘贴到哪里

生成的 meta 区块放进 <head> 即可，建议靠前，放在 <meta charset> 之后、第三方脚本之前。爬虫不在意顺序，但把社交 meta 放在一起，以后检查起来方便。

同一套 SEO 配置里常一起用：Robots.txt 生成器（爬虫规则）与 Favicon 生成器（图标包）。