博客
简体中文

Meta 标签生成器 — Open Graph 与 X 卡片标签在线生成

生成搜索和社交分享用的 meta 标签，附带链接预览效果图

在浏览器中处理 · 不上传任何内容

已填入示例值，请替换成你的页面信息。

请使用以 https://（或 http://）开头的完整地址。

分享链接时显示的图片的完整地址。预览会直接从这个地址加载图片。

带不带 @ 都可以。留空则不生成该标签。

生成的标签

已生成 12 行标签，有 2 处需要检查

  • 没有图片时，KakaoTalk 和 Facebook 的预览不会显示图片。
  • 选择了大图卡片，但没有图片。
<title>字数统计 — 在线统计字数与字符数</title>
<meta name="description" content="粘贴文本，立即统计含空格和不含空格的字符数、单词数和字节数。">
<link rel="canonical" href="https://www.example.com/zh/character-counter/">

<meta property="og:type" content="website">
<meta property="og:title" content="字数统计 — 在线统计字数与字符数">
<meta property="og:description" content="粘贴文本，立即统计含空格和不含空格的字符数、单词数和字节数。">
<meta property="og:url" content="https://www.example.com/zh/character-counter/">
<meta property="og:site_name" content="示例网站">
<meta property="og:locale" content="zh_CN">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="字数统计 — 在线统计字数与字符数">
<meta name="twitter:description" content="粘贴文本，立即统计含空格和不含空格的字符数、单词数和字节数。">

把它们粘贴到 HTML 的 <head> 中。

预览（效果图）

KakaoTalk 链接预览
无图片

字数统计 — 在线统计字数与字符数

粘贴文本，立即统计含空格和不含空格的字符数、单词数和字节数。

example.com

Google 搜索结果

示例网站

https://www.example.com/zh/character-counter/

字数统计 — 在线统计字数与字符数

粘贴文本，立即统计含空格和不含空格的字符数、单词数和字节数。

这些是模拟真实应用的效果图，长度和截断位置可能不同。Google 标题和描述的宽度请用 SERP 预览工具检查。KakaoTalk 可能会把已经抓取过的链接预览缓存一段时间，所以修改标签后仍可能显示旧的预览。

标签名遵循 Open Graph 协议（ogp.me）和 X（Twitter）卡片规范。KakaoTalk、Facebook、LinkedIn 和 Slack 读取 og:title、og:description、og:image 和 og:url；X 读取 twitter:card，其余内容可以回退使用 og 标签。文本中的引号、<、> 和 & 会按 HTML 规则转义。你输入的内容不会被保存或发送。

功能简介

这个 meta 标签生成器用来编写 head 中的标签，它们决定页面在搜索结果中以及链接被分享时的样子。聊天应用和社交网络根据 Open Graph 标签生成链接卡片，X 还有自己的卡片标签。填写一个简短的表单，就能得到可以直接粘贴到页面 head 中的 HTML，引号转义已经处理好，还附带 KakaoTalk 链接卡片和 Google 搜索结果的效果图。

使用方法

  1. 填写标题、描述和页面 URL。一开始会填入示例值。
  2. 添加分享图片的完整 URL 和一段简短的图片描述。没有图片时，会有警告提醒你分享卡片将没有图片。
  3. 选择网站名称、页面类型、语言和 X 卡片类型。X 账号是可选的。
  4. 修正生成的标签下方列出的问题，例如相对 URL 或标题为空。
  5. 把标签复制到页面的 head 中。
  6. 查看预览效果图，大致了解实际效果。

工作原理

  • 标签名遵循 Open Graph 协议（ogp.me）：og:type、og:title、og:description、og:url、og:site_name、og:locale、og:image 和 og:image:alt，以及 X 卡片标签：twitter:card、twitter:site、twitter:title、twitter:description 和 twitter:image。
  • 页面 URL 同时用于 canonical 链接和 og:url。
  • 引号、<、> 和 & 会被转义为 HTML 实体，换行和连续空格合并成一个空格，空字段不生成标签。
  • X 账号只接受 1–15 个字母、数字或下划线。
  • 预览只是效果图；真实应用使用各自的字体和截断规则。

示例

输入 生成的标签
标题：字数统计 <title>字数统计</title>、og:title、twitter:title
描述：Description with “quotes” content="Description with &quot;quotes&quot;"
X 账号：toolsnack <meta name="twitter:site" content="@toolsnack">
图片 /og.png 警告：请使用完整的 https:// 地址

常见问题

链接预览用的是哪些标签？

KakaoTalk、Facebook、LinkedIn 和 Slack 读取 og:title、og:description、og:image 和 og:url。X 优先读取 twitter:card，标题、描述和图片缺失时可以回退使用 og 标签。

为什么预览里没有我的图片？

og:image 必须是以 https:// 开头的完整地址。/og.png 这样的相对路径会被大多数爬虫忽略，而且图片必须能被公开访问。

我改了标签，为什么还显示旧的预览？

KakaoTalk 等应用可能会把已经抓取过的链接预览缓存一段时间。它会随时间更新，也可以用各平台的开发者工具要求重新抓取页面。

标题和描述应该写多长？

Google 按显示宽度而不是字符数截断摘要。用 SERP 预览工具可以准确看到标题和描述会在哪里被截断。

我输入的内容会被保存吗？

不会。标签和预览都在你的浏览器中生成。如果填写了图片 URL，你的浏览器会直接加载该图片来显示预览。

相关工具

SERP 搜索结果预览

测量标题和描述像素宽度的 Google 搜索结果预览

Favicon 生成器

在浏览器中生成 favicon.ico、多尺寸 PNG 图标、manifest 和 HTML 代码

HTML实体编码解码

HTML实体编码与解码，支持特殊字符和非 ASCII 字符

Punycode 转换

Unicode 域名与 xn-- Punycode 形式互转

二维码生成器

制作网址、Wi-Fi、联系人二维码并下载为 PNG 或 SVG

没找到想要的工具？