Skip to content

Open Graph 与 Meta 标签生成器

生成 Open Graph、Twitter Card 与 SEO meta 标签，并实时预览在 Google、Facebook、X 上的分享效果。100% 免费、纯浏览器运行、无需注册——一键复制代码即可粘贴使用。

无追踪 浏览器中运行 免费
一切都在你的浏览器中运行。你的内容和图片 URL 绝不会离开本页面——不上传、不注册。
基础 SEO
Open Graph（Facebook、LinkedIn…）
X（Twitter）Card
高级与图标
检查
    生成的 <head> 标签 
     
      
     从现有 <head> 导入（本地解析，不上传任何内容） 
       
     
      
     部署后验证： Facebook LinkedIn Google Rich Results 
     
     
      
      
       标签输出和平台规格已对照 Open Graph 协议（ogp.me）、Google Search Central，以及 Facebook、X、LinkedIn 和 Discord 的最新分享文档进行核验。 — Go Tools Team · 2026年7月15日  
          
     
    什么是 meta 标签和 Open Graph？
     
     
    meta 标签是页面 <head> 中的 HTML 片段，用来向浏览器、搜索引擎和社交平台描述页面。经典的 SEO 标签包括 <title>、meta description 和 canonical 链接。Open Graph 标签（og:title、og:type、og:image、og:url 及其配套标签）是一套最初源自 Facebook 的协议，用来控制链接被分享时显示的标题、描述和图片——几乎所有平台都会读取它们，包括 LinkedIn、Slack、Discord、WhatsApp、Pinterest 和 Telegram。
    Twitter/X 使用自己的 twitter:card 标签，但当这些标签缺失时会回退到你的 Open Graph 标签，因此一套完善的 OG 标签加上一个 twitter:card 值就能覆盖所有网络。本生成器会写好这些标签，添加可选的 JSON-LD 结构化数据，并实时预览结果——你再也不必手写它们，也不用猜测分享出去会是什么样子。
     
      
      
     
    各平台的社交图片与标签规格
     
     
     
    Open Graph（Facebook 与 LinkedIn）
     
    两者都读取 og:title、og:description、og:image 和 og:url。推荐图片 1200×630（1.91:1）。Facebook 缓存约 30 天，LinkedIn 约 7 天——部署后用它们的调试器重新抓取。
     
     
    X（Twitter）Card
     
    twitter:card 是必需的（summary_large_image 或 summary）。其余内容 X 会回退到 og:*。一张 1200×630 的图片对 OG 和 X 都适用；小于 300×157 的图片会把大卡片降级为小卡片。
     
     
    Slack 与 Discord
     
    Slack 先读 Twitter Card 再读 Open Graph，并能通过 twitter:label/data 显示两个额外字段。Discord 读取 Open Graph，并独有地使用 theme-color 来设置嵌入卡片的强调色条。
     
     
    WhatsApp 与 Telegram
     
    WhatsApp 需要 og:title 和 og:image，且元数据要靠近 HTML 顶部；Telegram 读取 Open Graph，只有 JPEG 或 PNG 图片才能可靠渲染。
     
     
    Pinterest Rich Pins
     
    Pinterest 读取 Open Graph 或 Schema.org。Article Rich Pin 需要 og:type=article 加上 article:published_time 和 article:author——选择 article 类型时这些都会在此生成。
     
     
    Google 搜索摘要
     
    实时的桌面和移动端 SERP 预览会以像素——而非字符数——来测量你的标题和描述，让你先于 Google 看到被截断的风险。
     
     
     
          
     
    Meta 标签示例
     
     
     
    网站首页
     
     
    Title: Acme — Ship faster
Description: The all-in-one platform for modern teams.
URL: https://acme.com
Image: https://acme.com/og/home.png (1200×630)
     
    <title>Acme — Ship faster</title>
<meta name="description" content="The all-in-one platform for modern teams.">
<link rel="canonical" href="https://acme.com">

<meta property="og:title" content="Acme — Ship faster">
<meta property="og:type" content="website">
<meta property="og:image" content="https://acme.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://acme.com">

<meta name="twitter:card" content="summary_large_image">
     
     
    首页只需要四个必填的 Open Graph 标签，再加上标题、描述和 canonical 即可。由于图片是 1200×630，宽高会自动填好，因此第一次在 Facebook 分享时就能即时渲染，而不是显示空白。
     
     
    博客文章（含 article:* + JSON-LD）
     
     
    og:type: article
Title: The Complete Guide to Open Graph Tags
Author: Ada Lovelace
Published: 2026-07-15
     
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>
     
     
    选择 article 类型会解锁 article:published_time 和 article:author 属性，并生成对应的 Article JSON-LD，这样搜索引擎和 Pinterest Rich Pins 就能免费获得结构化数据。
     
     
    Twitter/X 继承 Open Graph
     
     
    twitter:card: summary_large_image
Inherit title/description/image from OG: on
     
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acme">
     
     
    当对应的 twitter:* 标签缺失时，X 会读取你的 Open Graph 标签，因此你只需要写 twitter:card。本工具绝不会输出空的 twitter:image，因为那会破坏这套回退机制。
     
     
     
          
     
    如何为你的网站添加 Open Graph 标签
     
       
    1.  1 
       
      输入标题、描述和 URL
       
      输入你的页面标题、meta description 和 canonical URL。像素计量条会显示它们是否能完整放进 Google 的搜索摘要。
       
       
    2.  2 
       
      添加 og:image 并选择类型
       
      粘贴一个 1200×630 的图片 URL，并选择 website、article、product 或 profile——对应的 Open Graph 字段和 JSON-LD 会自动出现。
       
       
    3.  3 
       
      查看实时预览
       
      在 Google、Facebook、X、LinkedIn、Slack 和 Discord 各标签页之间切换，发布前精准查看链接的实际显示效果。
       
       
    4.  4 
       
      复制到你的 
       
      复制完整的标签块（或某一节），粘贴到 HTML 的  中。部署后用 Facebook 和 LinkedIn 调试器进行验证。
       
       
      5.  
     
      
     
    常见的 Open Graph 错误
     
     
     
    相对路径的 og:image
     
    像 /cover.png 这样的路径在你的编辑器里能用，但分享时会是空白，因为抓取器需要绝对 URL。
     
     
     ✗ 错误 
    <meta property="og:image" content="/cover.png">
     
     
     ✓ 正确 
    <meta property="og:image" content="https://example.com/cover.png">
     
     
     
     
    缺少 og:url
     
    没有 canonical 的 og:url，分享数会被分散到不同的 URL 变体上，平台可能选错地址。
     
     
     ✗ 错误 
    <!-- no og:url -->
     
     
     ✓ 正确 
    <meta property="og:url" content="https://example.com/page">
     
     
     
     
    图片过小或比例错误
     
    Facebook 会忽略低于 200×200 的图片，并裁剪远离 1.91:1 的图片。
     
     
     ✗ 错误 
    600×600 og:image
     
     
     ✓ 正确 
    1200×630 og:image (1.91:1)
     
     
     
     
    忘记 twitter:card
     
    即使有完整的 Open Graph 标签，只要没设置 twitter:card，X 也不会渲染卡片。
     
     
     ✗ 错误 
    <!-- OG only, no twitter:card -->
     
     
     ✓ 正确 
    <meta name="twitter:card" content="summary_large_image">
     
     
     
     
    空的 twitter:image 破坏回退
     
    空的 twitter:image 会阻止 X 回退到 og:image——应该省略该标签，而不是留空。
     
     
     ✗ 错误 
    <meta name="twitter:image" content="">
     
     
     ✓ 正确 
    <!-- omit it; X uses og:image -->
     
     
     
     
    charset 放得太晚
     
    charset 声明必须出现在文档的前 1024 字节内，否则会被忽略。
     
     
     ✗ 错误 
    <meta charset> after many tags
     
     
     ✓ 正确 
    <meta charset="utf-8"> first in <head>
     
     
     
     
     
      
     
    常见使用场景
     
     
     
    发布落地页
     
    为新的营销页面生成完整的 head 代码块，让别人在 X、LinkedIn 或 Slack 分享链接的那一刻就显得精致得体。
     
     
    博客与文章预览
     
    添加 article:published_time、article:author 和 Article JSON-LD，让文章符合 Pinterest Rich Pins 和丰富社交卡片的条件。
     
     
    修复失效的分享
     
    导入你当前的标签，在检查面板中发现缺失的 og:image 或错误的尺寸，修正后用调试器链接重新抓取。
     
     
    框架 head 代码片段
     
    复制一套干净、正确的标签集，放进静态站点、CMS 模板或服务端渲染的 head 局部片段中。
     
     
     
      
     
    生成器工作原理
     
     
     
    实时的纯浏览器预览
     
    每张卡片都根据你输入的值渲染，绝不会去抓取你的 URL。这让预览既即时又私密，也是页面部署前进行预览的唯一诚实方式。
     
     
    像素级精确的 SERP 计量条
     
    Google 按像素宽度而非字符数截断标题和描述。canvas 会用相同字体测量你的文本，因此摘要即将被截断时，计量条正好变为琥珀色。
     
     
    客户端图片检查
     
    你的 og:image URL 会被加载进浏览器中的 Image 对象，以读取其真实宽高，再与 1200×630 和卡片的宽高比进行核对。跨域图片仍会报告其尺寸，因此无需任何上传即可完成检查。
     
     
    完整、现代的标签集
     
    基础 SEO、Open Graph、Twitter Card 和 JSON-LD 集中于一个代码块，charset 最先输出，确保它落在前 1024 字节内。像 meta keywords 这样的过时标签默认关闭。
     
     
     
      
     
    Meta 标签最佳实践
     
     
     
    使用绝对的 HTTPS URL
     
    og:image 和 og:url 必须是完整的 https://… URL。相对路径在本地能用，但抓取器抓取线上页面时会渲染为空白。
     
     
    始终设置 og:image:width 和 height
     
    声明尺寸能让平台立即排版卡片，这样第一次分享时不会因平台异步抓取图片而显示空白。
     
     
    保持 canonical 和 og:url 一致
     
    让两者都指向唯一的 canonical URL，以免分享数和搜索信号被分散到不同的 URL 变体上。
     
     
    按像素预算来撰写
     
    标题控制在约 50–60 个字符，描述控制在约 155 个字符——但请信任像素计量条，因为 Google 测量的是宽度而不是字符数。
     
     
    在服务端渲染标签
     
    Facebook、LinkedIn、WhatsApp、Telegram 和 Discord 的抓取器不执行 JavaScript，所以 Open Graph 标签必须存在于静态或服务端渲染的 HTML 中。
     
     
     
      
     
    常见问题
     
     
     什么是 meta 标签生成器？ 
     meta 标签生成器会构建放进页面 <head> 中的 HTML 标签——包括 <title>、meta description、canonical 链接、面向 Facebook 和 LinkedIn 的 Open Graph 标签，以及 Twitter/X Card 标签。本工具一次性生成全部标签，实时预览你的链接在 Google、Facebook、X、LinkedIn、Slack 和 Discord 上的显示效果，并支持一键复制代码。所有处理都在你的浏览器中完成。 
     
     如何为我的网站添加 Open Graph 标签？ 
     填写标题、描述、canonical URL 和一个 og:image 图片地址，选择 Open Graph 类型，然后复制生成的标签并粘贴到 HTML 的 <head> 中。由于 Facebook、LinkedIn、WhatsApp 和 Telegram 的抓取器不执行 JavaScript，这些标签必须出现在服务端渲染或静态 HTML 中，而不能由客户端脚本注入。 
     
     Open Graph 图片应该用多大尺寸？ 
     推荐的 og:image 尺寸是 1200×630 像素，宽高比 1.91:1，同时也满足 X 的 summary_large_image 卡片要求。Facebook 会忽略小于 200×200 的图片，对小于 600×315 的图片只显示一个小方块。请始终加上 og:image:width 和 og:image:height，让第一次分享即时渲染，并通过 HTTPS 以未被 robots.txt 屏蔽的公开 URL 提供图片。 
     
     twitter:card 标签是必需的吗？ 
     是的——twitter:card 是唯一必须包含的 Twitter/X 标签，否则即使你已经有了 Open Graph 标签，X 也不会渲染卡片。将它设为 summary_large_image 可显示大图，设为 summary 则显示小方形缩略图。对于其余内容（标题、描述、图片），X 会回退到你的 og:* 标签，因此本工具默认省略它们，以保持标记简洁。 
     
     meta 标签对 SEO 有帮助吗？ 
     <title> 和 canonical 标签对 SEO 很重要；meta description 不是直接的排名因素，但会通过塑造搜索摘要影响点击率。Open Graph 和 Twitter Card 标签不影响 Google 排名，但它们控制着链接被分享时的外观，从而带动社交流量。Google 有时会在结果中重写你的标题，所以要写得清晰、独特，并把重要词放在前面。 
     
     这个工具会上传我的内容或图片吗？ 
     不会。所有内容都在你的浏览器中用 JavaScript 本地生成。你的标题、描述和图片 URL 绝不会离开页面——没有服务器、没有上传、没有账户。og:image 仅在你自己的浏览器中加载，用于预览并读取其尺寸。 
     
     我可以导入已有的 meta 标签吗？ 
     可以。打开导入面板，粘贴你现有的 <meta> 标签，工具会用浏览器自带的 HTML 解析器在本地解析它们来填充表单——没有网络请求，不会上传任何内容。相比那些从自家服务器抓取实时 URL 的工具，这是隐私优先的替代方案。 
     
     为什么我更新后的预览在 Facebook 或 LinkedIn 上仍显示旧图片？ 
     各平台会缓存 Open Graph 数据：Facebook 约 30 天，LinkedIn 约 7 天。部署后，用 Facebook Sharing Debugger 或 LinkedIn Post Inspector 重新抓取页面，即可刷新缓存的标题、描述和图片。调试器链接列在生成的代码下方。 
     
     
     
     
       
      
     
     
    相关工具
      查看所有工具 →
 
     
      
     
      
      
      
     
     
    cURL 命令生成器与构建工具
     
     
    网络与 API
     
    在浏览器中构建 curl 命令——设置请求方法、请求头、认证与请求体，即刻获得可复制的命令。支持 Bearer、POST JSON、文件上传预设。免费、隐私安全、无需注册。
     
     
       
          
     
      
      
      
     
     
    htpasswd 生成器 — bcrypt、Apache MD5 (apr1) 与 Basic Auth
     
     
    网络与 API
     
    在线生成 htpasswd 条目，支持 bcrypt、Apache MD5 (apr1)、SHA-1 等算法，并输出 Apache、nginx 和 Docker 的即用配置。100% 在浏览器中运行，密码不上传。
     
     
       
          
     
      
      
      
     
     
    进制转换器 — 二进制、十六进制、十进制、八进制互转
     
     
    转换工具
     
    在线免费进制转换工具，支持二进制、八进制、十进制、十六进制及 2-36 任意进制互转。无需注册，数据不离开浏览器，即时获取结果。
     
     
       
          
     
      
      
      
     
     
    Base64 解码与编码工具
     
     
    编码和格式化
     
    免费在线 Base64 解码编码工具。实时转换，支持中文和 Emoji，100% 浏览器端运行，数据不离开设备，无需注册。
     
     
       
          
     
      
      
      
     
     
    Base64 转图片转换工具
     
     
    编码和格式化
     
    在浏览器中把 Base64 字符串或 data URI 解码还原为图片。预览、读取尺寸与 MIME，再下载为 PNG、JPG、GIF、SVG。无需上传。
     
     
       
          
     
      
      
      
     
     
    Bcrypt 哈希生成器与验证器
     
     
    安全工具
     
    在线生成并验证 bcrypt 密码哈希——可调成本因子，支持 $2b$/$2a$/$2y$ 前缀。100% 在浏览器中运行，密码绝不上传。