生成和预览 Open Graph 元标签

✅ OpenGraph 测试器允许您在一个地方一键预览和生成元标签

尝试: https://opengraph.dev
适用于 Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

使用 Open Graph 标签优化您的网站

发现 Open Graph 协议如何增强社交媒体分享

什么是 Open Graph (OG)？

Open Graph 协议（通常称为 OGP）对于定义您的网站内容在社交网络上的显示方式至关重要。实施 Open Graph 标签可确保在在线分享您的内容时显示特定的图片、标题和描述。

最佳 Open Graph 图像尺寸

为了最大化对高分辨率设备的影响，请使用至少宽度达到1200像素的 Open Graph 图像。Facebook，社交媒体的领导者，推荐使用1.91:1的比例图像，以在Feed中完整显示图像，无需裁剪。

轻松集成 Open Graph 标签

使用 OpenGraph.dev 等工具轻松集成 Open Graph 标签。生成并插入元标签到您网站的 'head' 部分，以提升您网站在社交媒体上的可见性。

Open Graph在SEO中的重要性

优化的Open Graph标签显著提高了您的内容在社交媒体上被注意和点击的可能性，从而为您的网站带来更多流量。它们对于使您的内容在拥挤的社交媒体订阅源中脱颖而出至关重要。

什么是 Open Graph 标签？

Open Graph 标签是放置在网页 <head> 内的 HTML <meta> 元素，用于描述当其 URL 在其他地方分享时（如 Facebook 信息流、X 帖子、LinkedIn 动态、WhatsApp 聊天、Discord 服务器、iMessage 会话或 Slack 频道）页面应如何显示。Open Graph 协议最初由 Facebook 在 2010 年推出，此后已成为几乎所有主要平台链接预览的事实标准。完整的 Open Graph 元标签集让您完全掌控丰富预览卡片中显示的标题、描述、图像、类型和规范 URL，将普通超链接变成引人注目的片段，其点击率始终优于纯链接。

最小可用的 Open Graph 元标签集 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

跨社交平台的 Open Graph

几乎所有主要社交网络和即时通讯工具都会读取 Open Graph 元数据，但每个平台都有自己的关于图像大小、缓存和回退的规则。满足最严格的要求，同一组图像就能在所有平台上正常显示。

Facebook

Open Graph 数据的最大消费者。使用 og:title、og:description 和 og:image。推荐图像为 1200×630 像素，宽高比 1.91:1，以便在动态消息中无裁剪显示。缓存非常积极——更改后使用分享调试器（Sharing Debugger）刷新。

X (Twitter)

当 Twitter Card 元标签缺失时会回退到 Open Graph 标签，但要获得大型预览卡片，您还应声明 twitter:card 为 summary_large_image 和 twitter:image。图像必须小于 5 MB，至少 300×157 像素；1200×630 是安全的默认值。

LinkedIn

读取 og:title、og:description、og:image 和 og:type。图像必须小于 5 MB，至少 1200×627 像素（比例 1.91:1）。LinkedIn 会将首次抓取缓存大约七天——发布更改后使用 Post Inspector 强制重新抓取。

WhatsApp & iMessage

两款即时通讯工具均通过 HTTPS 获取 Open Graph 标签，并对图像大小有严格限制。WhatsApp 会截断超过约 300 KB 的内容，因此请优化图像并声明 og:image:width 和 og:image:height 以加快渲染。iMessage 在可用时更倾向于 1:1 的方形图像，可以考虑通过多个 og:image 标签同时提供两种比例。

Discord, Slack & Telegram

三者都从标准的 og:title、og:description 和 og:image 三件套渲染预览。Discord 还会识别 theme-color 用于侧边栏强调色。Telegram 会剥离 iframe 和 JS——请确保您的标签存在于初始服务器渲染的 HTML 中，而不是在运行时注入。

Pinterest & Reddit

Pinterest 通过 article:author 和 Rich Pin 类型扩展了 Open Graph。Reddit 在提交链接时会获取 og:title 和 og:image，并将该图像用作帖子缩略图。两者都更青睐竖向或方形图像（2:3 到 1:1），而非宽幅的 1.91:1 横幅。

为您的框架添加 Open Graph 元标签

将这些代码片段放入您的项目，即可在最常见的技术栈中接入 Open Graph 标签。每个示例都在服务器端渲染相同的最小可用集合，以便爬虫在首次渲染时即可看到。

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

关于 Open Graph 的常见问题

对开发者和内容团队在实施 Open Graph 元标签时最常问到的问题的快速回答。

Open Graph 标签对 SEO 有帮助吗？
Open Graph 标签不是 Google 搜索中的直接排名信号，但它们能显著改善间接的 SEO 表现。更美观的预览会带来更高的点击率、更多的分享和更多的入站链接——所有这些都会反馈到排名上。它们还能向爬虫明确页面的标题、图像和语言，从而降低 Google 选择无关缩略图或生成自有摘要的概率。
Open Graph 和 Twitter Cards 有什么区别？
Open Graph 是跨平台标准。Twitter Cards 是 X 的并行格式，使用自己的 twitter:* 命名空间。当 Twitter 专属标签缺失时，X 会回退到 Open Graph，因此对大多数网站来说，只需发布 Open Graph 加上一条 twitter:card 声明，即可启用大图预览。
推荐的 Open Graph 图像尺寸是多少？
1200×630 像素（比例 1.91:1）是安全的默认值——它满足 Facebook、LinkedIn、X 大卡片、Slack 和 Discord 的需求且无需裁剪。文件保持在 1 MB 以下，以便 WhatsApp 和 iMessage 能够获取。如果您的受众以 Pinterest 为主，请额外提供一张 1000×1500 的竖向图像。
更换图像后为什么我的预览还显示旧图像？
每个主要平台都会缓存 Open Graph 数据。Facebook、LinkedIn 和 X 各自有不同的刷新周期（从几分钟到一周不等）。使用 Facebook 的 Sharing Debugger、LinkedIn 的 Post Inspector 和 X 的 Card Validator 强制重新抓取；当您在同一 URL 替换图像时，请在 og:image 上添加一个绕过缓存的查询字符串。
单页应用（SPA）需要服务器端渲染才能支持 Open Graph 吗？
对几乎所有社交平台来说都是的。WhatsApp、LinkedIn、Slack、Discord 和 Telegram 在抓取 URL 时不会执行 JavaScript，因此仅在客户端渲染的元标签对它们不可见。请使用 SSR（Next.js、Nuxt、Astro）、静态生成或专用的预渲染服务，确保标签出现在初始 HTML 响应中。
如果页面完全没有 Open Graph 标签会怎样？
平台会回退到任何能抓取到的内容：<title>、meta description 以及在文档中找到的第一张较大图像。结果不可预测——通常是错误的图像、被截断的标题或根本没有预览。即便只添加三个标签（og:title、og:description、og:image）也能消除这种猜测。
Open Graph 标签名称区分大小写吗？
是的。请严格按照协议定义使用小写——og:title，而不是 OG:Title。大多数爬虫会默默忽略大小写混用的属性名，这也是重构后预览突然失效最常见的原因之一。
我可以使用哪些工具来调试 Open Graph 标签？
除了 OpenGraph.dev 的预览外，每个平台都提供自己的验证工具：Facebook 的 Sharing Debugger（developers.facebook.com/tools/debug）、LinkedIn 的 Post Inspector（linkedin.com/post-inspector）、developer.x.com 上的 X Cards 文档、Pinterest 的 Rich Pins 验证器以及用于清除缓存的 Telegram @WebpageBot。