Open Graph Tags: The Complete Guide to Social Media Previews

· 6 min read

When you share a link on Facebook, LinkedIn, Twitter, or messaging apps, the preview card that appears is generated from Open Graph (OG) tags in your page's HTML. Getting these tags right means the difference between an engaging, click-worthy preview and a broken or generic-looking link. This guide covers everything you need to know about Open Graph tags, Twitter Cards, and social media preview optimization.

What Is Open Graph?

Open Graph is a protocol originally created by Facebook in 2010 that allows web pages to become rich objects in a social graph. By adding OG meta tags to your HTML, you control how your content appears when shared on social media platforms. Without OG tags, platforms attempt to scrape your page's content automatically, often producing poor or incorrect previews.

The protocol uses meta tags in the <head> section of your HTML with the property attribute prefixed with og:. Major platforms that support Open Graph include Facebook, LinkedIn, Pinterest, WhatsApp, Telegram, Slack, Discord, and iMessage.

🛠️ Check your OG tags

Open Graph Checker → Meta Tag Generator →

Required Open Graph Tags

Four OG tags are considered required for a properly defined Open Graph object:

<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">

og:title

The title of your content as it should appear in the social media preview. Keep it under 60 characters to avoid truncation. This should be compelling and descriptive — it is the headline of your shared link.

og:type

The type of content. Common values include website (for general pages), article (for blog posts and news), product (for e-commerce), and video.other (for video content). The type determines which additional properties are available.

og:image

The URL of the image that represents your content. This is the most impactful tag — posts with images receive significantly more engagement. Use absolute URLs (not relative paths).

og:url

The canonical URL of your content. This tells social platforms which URL represents the definitive version of the page, preventing duplicate shares from different URLs pointing to the same content.

Recommended Additional Tags

<meta property="og:description" content="A brief description of your content">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">

og:description provides a brief summary (keep under 155 characters). og:site_name is the name of your overall website. og:locale specifies the language and territory.

Twitter Cards

Twitter (X) supports Open Graph tags as fallbacks but prefers its own Twitter Card tags for maximum control:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<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">

Card Types

For most websites, summary_large_image provides the best visual impact and click-through rates.

Image Specifications

Each platform has specific image requirements. Following these specifications ensures your previews look professional everywhere:

Facebook / Open Graph

Twitter

LinkedIn

For best cross-platform compatibility, create images at 1200 × 630 pixels in JPEG or PNG format. This single size works well on all major platforms.

Debugging and Testing

After implementing OG tags, test them using these official debugging tools:

Common Issues

Generate complete meta tag sets including OG tags with our Meta Tag Generator.

Key Takeaways

Related Tools

Open Graph Checker Meta Tag Generator

Frequently Asked Questions

What is the ideal image size for Open Graph?

The ideal OG image size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This works well on Facebook, Twitter, LinkedIn, and most messaging apps. Keep the file size under 5 MB and use JPEG or PNG format for maximum compatibility.

Do I need both Open Graph tags and Twitter Card tags?

While Twitter falls back to OG tags when Twitter Card tags are absent, including both gives you maximum control over how your content appears on each platform. At minimum, add twitter:card and twitter:image alongside your OG tags for the best experience across all platforms.

How do I update a cached Open Graph preview?

Use each platform's debugging tool to force a cache refresh. For Facebook, use the Sharing Debugger and click "Scrape Again." For LinkedIn, use the Post Inspector. For Twitter, post the URL in the Card Validator. Some platforms may take hours to fully refresh their cache.

Can I use different images for different platforms?

Yes. Use og:image for the default social image and twitter:image for a Twitter-specific version. You can also use multiple og:image tags; Facebook will use the first one that meets their requirements. This lets you optimize image dimensions and content for each platform.

Do Open Graph tags affect SEO?

Open Graph tags do not directly affect search engine rankings. However, they indirectly impact SEO by improving click-through rates from social media, increasing social shares and engagement, driving more traffic to your site, and improving brand visibility — all of which send positive signals to search engines.