The largest consumer of Open Graph data. Uses og:title, og:description and og:image. Recommended image is 1200×630 px with a 1.91:1 aspect ratio so it is shown uncropped in the News Feed. Cache is aggressive — use the Sharing Debugger to refresh after a change.
使用 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标签显著提高了您的内容在社交媒体上被注意和点击的可能性，从而为您的网站带来更多流量。它们对于使您的内容在拥挤的社交媒体订阅源中脱颖而出至关重要。
What are Open Graph tags?
Open Graph tags are HTML
<meta> elements placed inside the <head> of a web page that describe how the page should appear when its URL is shared somewhere else — a Facebook feed, an X post, a LinkedIn update, a WhatsApp chat, a Discord server, an iMessage thread or a Slack channel. The Open Graph protocol was originally introduced by Facebook in 2010 and has since become the de-facto standard for link previews on virtually every major platform. A complete set of Open Graph meta tags gives you full control over the title, description, image, type and canonical URL that appear inside the rich preview card — turning a plain hyperlink into an attention-grabbing snippet that consistently outperforms a bare link in click-through rate.A minimum-viable set of Open Graph meta tags
<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 across social platforms
Almost every major social network and messenger reads Open Graph metadata, but each one applies its own rules around image size, caching and fallbacks. Match the strictest requirement and the same image set will work everywhere.
X (Twitter)
Falls back to Open Graph tags when Twitter Card meta is missing, but to get a large preview card you should also declare twitter:card set to summary_large_image and twitter:image. Image must be under 5 MB and at least 300×157 px; 1200×630 is the safe default.
Reads og:title, og:description, og:image and og:type. Image must be under 5 MB, at least 1200×627 px (ratio 1.91:1). LinkedIn caches the first crawl for around seven days — use the Post Inspector to force a re-fetch after publishing changes.
WhatsApp & iMessage
Both messengers fetch Open Graph tags over HTTPS and have a hard image-size budget. WhatsApp truncates anything above ~300 KB, so optimise the image and declare og:image:width and og:image:height to speed up rendering. iMessage prefers a 1:1 square image when one is available, so consider supplying both ratios via multiple og:image tags.
Discord, Slack & Telegram
All three render previews from the standard og:title, og:description and og:image trio. Discord additionally honours theme-color for the side bar accent. Telegram strips iframes and JS — make sure your tags are present in the initial server-rendered HTML, not injected at runtime.
Pinterest & Reddit
Pinterest extends Open Graph with article:author and Rich Pin types. Reddit pulls og:title and og:image when a link is submitted, and uses the image as the post thumbnail. Both reward portrait or square imagery (2:3 to 1:1) over wide 1.91:1 banners.
Add Open Graph meta tags to your framework
Drop these snippets into your project to wire up Open Graph tags in the most common stacks. Each example renders the same minimum-viable set on the server so crawlers see them on first paint.
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" />';
});Frequently asked questions about Open Graph
Quick answers to the questions developers and content teams ask us most often when implementing Open Graph meta tags.
- Do Open Graph tags help with SEO?
- Open Graph tags are not a direct ranking signal in Google search, but they meaningfully improve indirect SEO outcomes. Better-looking previews drive higher click-through rates, more shares and more inbound links — all of which feed back into ranking. They also clarify a page's title, image and language to crawlers, reducing the chance that Google picks an unrelated thumbnail or generates its own snippet.
- What is the difference between Open Graph and Twitter Cards?
- Open Graph is the cross-platform standard. Twitter Cards are X's parallel format with its own
twitter:*namespace. X falls back to Open Graph when Twitter-specific tags are missing, so for most sites it is enough to publish Open Graph plus a singletwitter:carddeclaration to opt into the large image preview. - What is the recommended Open Graph image size?
- 1200×630 pixels (a 1.91:1 ratio) is the safe default — it satisfies Facebook, LinkedIn, X large cards, Slack and Discord without cropping. Keep the file under 1 MB so WhatsApp and iMessage will fetch it. If your audience is heavily Pinterest-driven, supply an additional portrait 1000×1500 image.
- Why is my preview showing the old image after I changed it?
- Every major platform caches Open Graph data. Facebook, LinkedIn and X each refresh on a different schedule (anywhere from minutes to a week). Use Facebook's Sharing Debugger, LinkedIn's Post Inspector and X's Card Validator to force a re-scrape, and add a cache-busting query string to
og:imagewhen you replace an image at the same URL. - Do single-page apps (SPAs) need server-side rendering for Open Graph?
- Yes for almost every social platform. WhatsApp, LinkedIn, Slack, Discord and Telegram do not execute JavaScript when crawling a URL, so meta tags rendered only on the client are invisible to them. Use SSR (Next.js, Nuxt, Astro), static generation, or a dedicated pre-rendering service to make sure the tags are present in the initial HTML response.
- What happens if a page has no Open Graph tags at all?
- The platform falls back to whatever it can scrape: the
<title>, themeta descriptionand the first sizeable image it finds in the document. Results are unpredictable — often the wrong image, a truncated title or no preview at all. Adding even three tags (og:title,og:description,og:image) eliminates the guesswork. - Are Open Graph tag names case-sensitive?
- Yes. Use lowercase exactly as defined by the protocol —
og:title, notOG:Title. Mixed-case property names are silently ignored by most crawlers, which is one of the most common reasons a preview suddenly stops working after a refactor. - Which tools can I use to debug Open Graph tags?
- Beyond OpenGraph.dev's preview, each platform offers its own validator: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), X Cards documentation under developer.x.com, Pinterest Rich Pins Validator and Telegram's @WebpageBot for clearing its cache.