Meta 标签生成器

这个 meta 标签生成器把一张简短的表单——页面标题、描述、URL、图片、站点名、Twitter handle 和主题色——变成一段可直接粘贴的 <head> 标签代码块，带有实时 Google 预览和社交卡片预览，以及一键复制。它的目标用户是那些知道这些标签重要、却不愿每次都去查每个属性名的站长和开发者。

生成器实际输出什么

工具按以下顺序写出五组标签：

1. 一个 <title> 元素和一个 <meta name="description"> 标签。
2. 一个 <meta name="theme-color"> 标签，但仅在主题色字段被填写时输出。
3. Open Graph 标签：og:title、og:description、og:url 固定为 website 的 og:type，以及当对应字段非空时的 og:image 和 og:site_name。
4. Twitter Card 标签：twitter:card 始终为 summary_large_image，twitter:title、twitter:description、设置图片时的 twitter:image，以及 twitter:site。
5. 没有别的了。

这个范围很重要。输出不包含 canonical 的 <link>、robots 指令、hreflang 替代链接或结构化数据。这些是各自独立的事情，而一个只带这些标签的页面，如果缺少 canonical 链接，仍可能被以错误的 URL 索引。

读懂字符计数器

标题字段上限为 120 个字符，描述为 320 个，但每个标签旁边的计数器分别是 60 和 160。在这些刻度处变色只是一个展示提示，不是限制。

字段	计数器变橙	输入硬上限	通常显示
标题	超过 60 字符	120	约 50–60 字符
描述	超过 160 字符	320	约 150–160 字符

两个计数器都会统计每个字符，包括空格。Google 按像素宽度而不是固定字符数截断标题，所以全大写的标题可能比同样内容的混合大小写更早被切掉。

实操示例：一篇食谱博客

假设你输入：

• 标题：Fresh Sourdough Bread Recipe
• 描述：A beginner-friendly sourdough recipe with a 24-hour rise, a crisp crust, and a soft, open crumb. Includes a printable checklist.
• URL：https://example.com/sourdough-bread/
• 图片：https://example.com/img/sourdough-1200x630.jpg
• 站点名：Example Kitchen
• Twitter handle：@examplekitchen

标题计数器显示 28，描述计数器显示 133，所以两者都保持灰色。生成的代码块开头如下：

<title>Fresh Sourdough Bread Recipe</title>
<meta name="description" content="A beginner-friendly sourdough recipe..." />
<meta property="og:title" content="Fresh Sourdough Bread Recipe" />
<meta property="og:description" content="A beginner-friendly sourdough recipe..." />
<meta property="og:url" content="https://example.com/sourdough-bread/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/img/sourdough-1200x630.jpg" />
<meta property="og:site_name" content="Example Kitchen" />
<meta name="twitter:card" content="summary_large_image" />

Google 预览面板会渲染蓝色的标题、绿色的 URL 和灰色的摘要。它下方的社交卡片把图片显示在域名和描述之上——大致就是 Facebook 和 LinkedIn 的排版方式。

搜索预览与社交卡片有何不同

搜索引擎读取 <title> 和 meta 描述，当描述缺失或没有帮助时会自己生成摘要。社交平台优先读取 Open Graph 标签，只有这些标签缺失时才回退到页面内容。Twitter/X 更偏好自己的卡片标签。因为这两类读取方读的是不同的标签，一个页面在 Google 里可能看起来很完美，发到聊天应用里却只是光秃秃的链接——最常见的原因就是缺了 og:image。

常见错误与卡片选择

• 使用相对图片 URL。 og:image 必须是绝对地址，因为爬虫是相对你的页面之外去解析它的。像 /img/card.png 这样的路径往往会静默失败。
• 把 og:url 指向另一个页面。 如果你分享的是带参数或分页的 URL，却把规范 URL 写进 og:url，分享就会归到错误地址。
• 描述只是把标题换个说法。 描述的任务是赢得点击，而不是复述标题。
• 忘记 theme-color 字段。 它是唯一会改变移动端浏览器外观的标签；留空就会被直接省略。
• 以为计数器会截断。 它从不截断，所以过长的标题会原样到达生产环境。

选择卡片类型与图片

输出中固定使用 summary_large_image，因为它渲染宽幅横幅，适合文章、商品和首页分享。大约小于 300 × 200 像素的方形或小图放到这个位置会显得被拉伸，所以要么提供宽图，要么在复制后把卡片值改成 summary。把图片控制在 5 MB 以内——多个平台会静默丢弃更大的文件，让预览只剩文字没有图。

上线前测试标签

实时预览反映的是你输入的内容，而不是爬虫将抓取到的东西。部署之后，请确认真实结果：

• 把 URL 粘贴进社交卡片调试工具并强制重新抓取；缓存预览常常在你修好标签后仍然存在。
• 查看页面源代码，搜索 og:image，确认进入 HTML 的是绝对 URL 而不是相对路径。
• 在浏览器标签页里直接打开图片 URL；如果它 404 或重定向，爬虫看到的是同样的失败。
• 核对源码里的标题与工具里的一致，因为 CMS 模板可能自动追加站点名。

首次部署后花五分钟检查，就能避免最常见的症状：分享出去只有标题没有图片。

相关工具

• 网站图标生成器
• 文本转 Slug
• HTML 编码