Open Graph Preview

What Are Open Graph Tags?

Open Graph (OG) is a protocol originally created by Facebook in 2010 that allows web pages to control how their content appears when shared on social media platforms. When someone shares a URL on Facebook, Twitter, LinkedIn, Slack, Discord, or dozens of other platforms, the platform’s crawler reads the page’s Open Graph meta tags to determine what title, description, and image to display in the link preview card.

Without Open Graph tags, platforms must guess what to show. They typically fall back to the page’s <title> tag and try to find a suitable image automatically. This often produces unappealing or misleading previews that result in lower click-through rates. By explicitly setting OG tags, you control the narrative and ensure every share looks exactly the way you intend.

The Essential Open Graph Tags

The Open Graph protocol defines dozens of properties, but five tags are critical for every page:

og:title

The title of your content as it should appear in the social share card. This is typically your page title or a more compelling version of it. Facebook recommends keeping titles under 60 characters to avoid truncation. Twitter displays up to about 70 characters. If your title exceeds 88 characters, Facebook will truncate it with an ellipsis.

Best practices: avoid keyword stuffing, make it actionable, and differentiate it from your SEO title tag if the social audience has different expectations than search users.

og:description

A brief summary of the page content. Facebook shows approximately two lines of description text, which translates to around 155 characters. Twitter Cards may show slightly more. LinkedIn tends to truncate descriptions aggressively.

Write descriptions that complement the title rather than repeat it. Include a clear value proposition or key takeaway that motivates clicks. Avoid generic descriptions like “Welcome to our website” — every shared link is competing for attention in a crowded feed.

og:image

The image displayed in the share card. This is arguably the most impactful OG tag because images dominate social feeds. The recommended dimensions are:

Facebook: 1200 × 630 pixels (1.91:1 ratio). Minimum 200 × 200, but images below 600 × 315 may display as small thumbnails instead of large cards.
Twitter: 1200 × 600 pixels (2:1 ratio) for summary_large_image cards. For summary cards, 144 × 144 minimum.
LinkedIn: 1200 × 627 pixels (1.91:1 ratio). Minimum 200 × 200.

Always use absolute URLs (starting with https://) for og:image. Relative paths will not be resolved by crawlers. Keep image file size under 5 MB for Facebook and under 5 MB for Twitter. Use JPEG or PNG format for best compatibility; WebP support is still inconsistent across crawlers.

og:url

The canonical URL of the page. This tells platforms which URL to associate with the shared content. When multiple URLs point to the same content (e.g., with and without query parameters), og:url ensures all shares consolidate under a single URL. This is similar to the <link rel="canonical"> tag for SEO, and the two should usually match.

og:site_name

The name of your overall website or application. Facebook displays this above the title in the share card. It provides brand context and helps users recognize the source. For example, if your page title is “How to Build a REST API,” the site name might be “DevBlog” to identify the publisher.

Twitter Cards vs. Open Graph

Twitter has its own meta tag system called Twitter Cards, which uses tags like twitter:card, twitter:title, twitter:description, and twitter:image. However, Twitter’s crawler falls back to Open Graph tags when Twitter-specific tags are absent. This means if you set OG tags, Twitter will use them automatically.

The main reason to add Twitter-specific tags is when you want different content on Twitter versus other platforms. For example, you might want a shorter title or different image dimensions. The twitter:card tag is particularly important because it controls the card format: summary (small image) or summary_large_image (large image). If you don’t set this tag, Twitter may default to the smaller summary card.

How Each Platform Displays Shared Links

Facebook

Facebook renders shared links as a card with a large image (1.91:1 ratio), site name in uppercase above the title, the title in bold, and one line of description below. The card has a light gray background. Facebook caches OG data aggressively, so after changing your tags, you need to use the Facebook Sharing Debugger to force a re-scrape. Cache typically lasts 24 hours.

Twitter / X

Twitter renders links as cards with rounded corners. The summary_large_image card type shows a large image (2:1 ratio) with the domain, title, and description below. The summary type shows a small square thumbnail on the left with text on the right. You can validate your tags using the Twitter Card Validator (though access has been restricted in recent years).

LinkedIn shows a large image with the title below it, followed by the domain. Descriptions are not always shown in the feed. LinkedIn caches OG data for approximately 7 days. You can force a refresh by using the LinkedIn Post Inspector tool at linkedin.com/post-inspector.

Common Open Graph Mistakes

Missing og:image: Shares without images get dramatically fewer clicks. Always include an image, even if it’s a default branded image.
Relative image URLs: Using /images/og.jpg instead of https://example.com/images/og.jpg. Crawlers cannot resolve relative paths.
Images too small: Below 200 × 200 for Facebook, the image will not be shown at all. Below 600 × 315, it renders as a tiny thumbnail.
Using the page title as description: The title and description should be complementary, not identical.
Not testing across platforms: Each platform renders cards differently. What looks great on Facebook might be truncated on Twitter. Always test on all target platforms.
Forgetting og:type: While not required, setting og:type to website or article helps platforms categorize your content. For articles, additional tags like article:published_time and article:author become available.

Implementing Open Graph Tags

OG tags are placed in the <head> section of your HTML document. In modern frameworks, you typically set them through the framework’s metadata API:

Next.js: Use the metadata export in your page file, or the generateMetadata function for dynamic pages.
Nuxt.js: Use useHead() or useSeoMeta() composables.
WordPress: Use plugins like Yoast SEO or Rank Math which provide UI fields for OG tags.
Static HTML: Add <meta property="og:title" content="..." /> tags directly in your <head>.

Debugging and Validation Tools

After implementing OG tags, always validate them using official platform tools:

Facebook Sharing Debugger: Shows exactly what Facebook sees when crawling your URL. Also lets you clear the cache and trigger a fresh scrape.
Twitter Card Validator: Previews how your link will appear on Twitter/X.
LinkedIn Post Inspector: Shows LinkedIn’s cached version of your OG data and lets you refresh it.

This tool complements those debuggers by letting you design and iterate on your OG tags before deploying them. You can experiment with different titles, descriptions, and images to see how they render on each platform, then copy the generated meta tags into your code.

Frequently Asked Questions

Do I need both Open Graph tags and Twitter Cards?

Not strictly. Twitter falls back to OG tags when Twitter-specific tags are absent. However, adding at least twitter:card is recommended to control the card format (summary vs. summary_large_image). If you want identical content on all platforms, OG tags alone are sufficient for most use cases.

Why does my shared link show the wrong image?

Platforms cache OG data. If you recently changed your tags, the platform may still be showing the old version. Use the platform’s debugger tool to clear the cache and force a re-scrape. Also check that your og:image URL is absolute and accessible (not blocked by robots.txt or authentication).

What is the ideal image size for OG tags?

For maximum compatibility across all platforms, use 1200 × 630 pixels (1.91:1 ratio). This works well on Facebook, LinkedIn, and Twitter’s summary_large_image card. Keep file size under 5 MB and use JPEG or PNG format.

Does this tool fetch my actual URL?

No. This tool is a pure client-side previewer. It does not fetch or crawl any URL. You manually enter the OG tag values and see how they would render on each platform. No data leaves your browser. To test your live page’s actual OG tags, use the platform-specific debuggers mentioned above.