The Complete Open Graph Guide
Open Graph tags control how your links appear when shared on social media, messaging apps, and AI chatbots. Without them, platforms guess — and they usually guess wrong. This guide covers everything: what OG tags are, which ones you need, correct image sizes, and how to test them before sharing.
If you have ever shared a link on LinkedIn or WhatsApp and seen a broken preview — missing image, wrong title, or generic description — the problem was almost certainly missing or incorrect Open Graph tags.
Open Graph is a protocol created by Facebook in 2010. It lets you define exactly how your content should appear in link previews. Today, nearly every platform uses it: Facebook, LinkedIn, Twitter/X, WhatsApp, iMessage, Slack, Discord, Telegram, and even AI chatbots like ChatGPT and Claude.
This guide will walk you through every aspect of Open Graph — from the four required tags to advanced debugging techniques. Whether you are a developer, marketer, or content creator, you will find exactly what you need.
What Is Open Graph?
Open Graph (OG) is a set of HTML meta tags placed in the <head> section of a webpage. When someone shares your URL, the platform fetches your page and reads these tags to build a rich link preview — a card with an image, title, and description.
Without OG tags, platforms try to infer this information from the page content. They might grab a random image, use the wrong heading as the title, or truncate your meta description. The result is an unprofessional, often misleading link preview that gets fewer clicks.
With proper OG tags, you control the narrative. You decide exactly which image, title, and description represent your content — on every platform, every time.
Required Open Graph Tags
The Open Graph protocol defines four required tags. Every page you publish should include all four:
og:title — The title of your content as it should appear in the link preview. Keep it under 60 characters. This is not the same as your HTML <title> tag — you can (and should) customize it for social sharing.
og:type — The type of content. Use website for homepages and landing pages, article for blog posts and news. Other values exist (product, video.movie) but are rarely used.
og:image — The URL of the image displayed in the preview. This is the single most important OG tag — a compelling image dramatically increases click-through rates. Must be an absolute URL (starting with https://).
og:url — The canonical URL of the page. This tells platforms which URL to display and helps avoid duplicate content issues when the same page is accessible through multiple URLs.
<head>
<meta property="og:title" content="The Complete Open Graph Guide" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://previewog.com/assets/imgs/og-guide.jpg" />
<meta property="og:url" content="https://previewog.com/blog/open-graph-guide/" />
</head>Recommended Open Graph Tags
Beyond the four required tags, these additional tags significantly improve how your links appear:
og:description — A one or two sentence summary of the page content. Keep it under 155 characters. Platforms display this below the title in the link preview.
og:site_name — The name of your website (not the page title). Platforms may display this above or below the main title.
og:locale — The language and territory of the content, in the format en_US. Defaults to en_US if not specified.
og:image:width and og:image:height — The dimensions of your OG image in pixels. Specifying these helps platforms render the preview faster because they don't need to download the image first to determine its size.
og:image:alt — Alt text for the OG image. Important for accessibility and also used by some platforms when the image fails to load.
OG Image: Sizes, Formats & Best Practices
The og:image tag is where most Open Graph problems occur. Different platforms have different requirements, and getting it wrong means a broken or cropped preview.
Recommended dimensions: 1200 × 630 pixels (1.91:1 aspect ratio). This is the universal sweet spot that works well across Facebook, LinkedIn, Twitter/X, and most messaging apps. If you can only create one image size, use this.
Minimum size: 200 × 200 pixels. Images smaller than this may not be displayed at all on some platforms.
Maximum file size: Keep images under 8 MB. Facebook recommends under 1 MB for fastest loading. Use JPEG for photographs, PNG for graphics with text.
Always use absolute URLs: The image URL must start with https://. Relative URLs (like /images/og.jpg) will not work on most platforms.
HTTPS is required: Some platforms (especially WhatsApp and LinkedIn) will not display OG images served over HTTP. Always use HTTPS.
For a detailed breakdown of image requirements per platform, see the OG Image Guide.
Platform-Specific Image Requirements
Each platform crops and displays OG images differently. Here are the key differences:
Facebook: Displays 1.91:1 aspect ratio. Images at least 600 × 315 px get the large card format. Smaller images get a small square thumbnail. Facebook caches aggressively — changes may take hours to appear.
LinkedIn: Uses 1.91:1 ratio similar to Facebook. Recommended 1200 × 627 px. LinkedIn caches OG data for up to 7 days. Use the LinkedIn Post Inspector to force a refresh.
Twitter/X: Uses its own <a href="https://previewog.com/twitter-card-types/">twitter:card</a> meta tags but falls back to OG tags if Twitter tags are missing. The summary_large_image card type uses a 2:1 ratio (1200 × 600 px).
WhatsApp: Displays a 1.91:1 preview. Requires HTTPS and properly served content types. WhatsApp does not have a public cache-clearing tool — changes propagate gradually.
iMessage: Follows the OG protocol closely. Displays a large image preview with title and description. Supports animated images.
Slack: Renders OG previews inline in messages. Uses 1.91:1 ratio. Slack also reads twitter:card tags as a fallback.
How to Check Your Open Graph Tags
Before sharing a link, always verify that your OG tags are correct and the preview looks right. There are several ways to do this:
Use PreviewOG: Paste your URL and instantly see how your link will look on Facebook, LinkedIn, Twitter/X, WhatsApp, iMessage, and more — all on one screen. No need to visit multiple platform-specific tools.
Facebook Sharing Debugger: Meta's official tool shows exactly what Facebook sees when it scrapes your page. Also lets you clear Facebook's cache for a specific URL.
LinkedIn Post Inspector: Shows the LinkedIn preview and lets you force LinkedIn to re-fetch your OG data.
Twitter Card Validator: Validates Twitter Card markup (which falls back to OG tags).
View page source: The simplest method — open your page in a browser, view source (Ctrl+U), and search for og: to see all your OG meta tags.
The advantage of PreviewOG is seeing all platforms at once. A tag that works on Facebook might be cropped on LinkedIn or missing on WhatsApp. Testing on one platform is not enough.
What Happens Without OG Tags
When a page has no OG tags, each platform uses its own fallback logic to build a preview. The results are unpredictable:
Title: Most platforms fall back to the HTML <title> tag. But some truncate it differently, and if your title includes branding (like “My Article | MySite”), the platform might show the full string including the pipe and site name.
Description: Platforms look for the <meta name="description"> tag. If that is missing, they extract text from the page body — often grabbing navigation items, cookie banners, or footer text.
Image: Without og:image, platforms scan the page for images. They might pick your logo, a banner ad, a decorative background, or show no image at all. Facebook requires the image to meet minimum size requirements, so small images are ignored.
The result: every platform shows a different, likely broken preview. You lose clicks, credibility, and control over how your content is perceived.
Twitter Cards vs. Open Graph
Twitter (now X) developed its own meta tag system called Twitter Cards. The two systems overlap significantly:
twitter:title maps to og:title. twitter:description maps to og:description. twitter:image maps to og:image.
If Twitter-specific tags are not present, Twitter falls back to OG tags. This means you do not strictly need both — OG tags alone will work on Twitter.
However, the twitter:card tag has no OG equivalent. You should always include it to control the card format. The most common value is summary_large_image for a full-width image card.
For detailed information about Twitter Card types, see the Twitter Card Types guide.
Common Open Graph Mistakes
These are the most frequent OG tag issues we see:
1. Relative image URLs. Using /images/og.jpg instead of https://example.com/images/og.jpg. Most platforms require absolute URLs and will not resolve relative paths.
2. HTTP image URLs. Serving the OG image over HTTP instead of HTTPS. WhatsApp, LinkedIn, and increasingly other platforms reject non-HTTPS images.
3. Image too small. Using an image under 200 × 200 px. Facebook and LinkedIn will either show a tiny thumbnail or no image at all.
4. Missing og:image entirely. The single most impactful OG tag, and the most commonly forgotten. Without it, platforms guess — and they always guess wrong.
5. Duplicate OG tags. Having multiple og:title or og:image tags on the same page. Platforms typically use the first one they find, which may not be the one you intended.
6. Not clearing cache after changes. You updated your OG tags, but the preview still looks wrong. Platforms cache OG data aggressively. Use platform-specific debugger tools to force a refresh. See the Open Graph Debugger guide for details.
7. OG tags not in the <head>. OG meta tags must be inside the HTML <head> element. Tags placed in the <body> are ignored by most platforms.
Implementation: Adding OG Tags to Your Site
How you add OG tags depends on your platform:
Plain HTML: Add meta tags directly in the <head> section of each page. This gives you full control but requires manual updates.
WordPress: Use a plugin like Yoast SEO or RankMath. Both automatically generate OG tags from your post title, excerpt, and featured image. You can customize them per page. See the WordPress OG guide.
Next.js: Use the built-in Metadata API (App Router) or next/head (Pages Router). Next.js makes it easy to generate dynamic OG images. See the Next.js OG guide.
Shopify: Shopify generates basic OG tags from product data automatically. For customization, edit your theme.liquid file or use an app. See the Shopify OG guide.
Regardless of platform, always verify the result with PreviewOG before publishing.
Complete OG Tag Template
<head>
<!-- Required OG Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<!-- Recommended OG Tags -->
<meta property="og:description" content="A brief description of this page." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
</head>Cache and Propagation
One of the most confusing aspects of OG tags: you changed them, but the preview still looks wrong. This is because platforms cache your OG data.
Facebook: Caches for up to 24 hours. Use the Sharing Debugger and click “Scrape Again” to force an update.
LinkedIn: Caches for up to 7 days. Use the Post Inspector to re-fetch.
Twitter/X: Caches for approximately 7 days. The Card Validator used to let you clear cache, but Twitter removed that feature.
WhatsApp: No official cache clearing tool. Sending the URL with a query parameter (like ?v=2) can force a fresh fetch.
Slack: Caches until you click the “refresh” icon next to a posted link, or paste the URL in a new message.
Pro tip: Always test with PreviewOG after making changes. It fetches your page live, showing exactly what platforms will see — no cache.
Frequently Asked Questions
PreviewOG lets you check how your link will look on Facebook, LinkedIn, Twitter/X, WhatsApp, iMessage, Slack, and more — all on one screen. Unlike platform-specific tools, you see every preview at once without switching between debuggers.
Not strictly. Twitter falls back to OG tags when Twitter-specific tags are missing. However, you should always include the twitter:card tag (usually set to summary_large_image) because it has no OG equivalent and controls the card layout on Twitter/X.
Use 1200 × 630 pixels (1.91:1 aspect ratio). This size works well across all major platforms. Keep the file under 1 MB for fastest loading. Use JPEG for photos and PNG for graphics with text.
The most common causes: the image URL is relative instead of absolute, the image is served over HTTP instead of HTTPS, the image is too small (under 200 × 200 px), or the platform is showing a cached version. Use PreviewOG to diagnose the exact issue.
Platforms cache OG data. To force an update: use Facebook Sharing Debugger (click Scrape Again), LinkedIn Post Inspector (re-fetch), or add a query parameter to the URL for WhatsApp. PreviewOG always fetches live data with no cache.
OG tags are a specific type of meta tag. Standard meta tags (title, description) are used by search engines. OG tags (og:title, og:image, etc.) are used by social media platforms and messaging apps to build link previews. You should have both on every page.
OG tags do not directly affect search engine rankings. However, they significantly impact click-through rates from social media. A well-crafted OG preview gets more clicks, which drives more traffic. Some argue this indirect effect improves SEO signals over time.