Advertisement

Open Graph Preview

Preview how your page will look when shared on Facebook, Twitter, LinkedIn, and Discord.

Open Graph Meta Tags

1200 x 630 image preview

example.com

Page Title

Page description will appear here.

Generated Meta Tags

<meta property="og:type" content="website" />
Advertisement

Related Tools

Meta TagsNEW

Generate SEO-optimized meta tags for your website. Title, description, Open Graph, and Twitter cards.

Meta AnalyzerNEW

Analyze and preview meta tags from any URL including Open Graph, Twitter cards, and SEO data.

Slug GenNEW

Generate SEO-friendly URL slugs from any text. Clean, lowercase, hyphenated URLs.

Robots.txtNEW

Generate robots.txt files with user-agent rules, allow/disallow paths, and sitemap references.

Advertisement

Frequently Asked Questions

What are Open Graph meta tags?
Open Graph (OG) meta tags are HTML meta elements that control how your content appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and Slack. They define the title, description, image, and other properties that social platforms use to generate link preview cards. The Open Graph protocol was originally created by Facebook in 2010.
What is the ideal OG image size?
The recommended Open Graph image size is 1200x630 pixels for most platforms. This aspect ratio (1.91:1) works well on Facebook, LinkedIn, and Twitter. The minimum recommended size is 600x315 pixels. Images should be in JPG, PNG, or WebP format and under 8MB in file size. Twitter also supports a square format (1:1 ratio) for summary cards.
Do Twitter Cards use Open Graph tags?
Twitter has its own meta tags (twitter:card, twitter:title, twitter:description, twitter:image), but it will fall back to Open Graph tags if Twitter-specific tags are not present. It is best practice to include both OG and Twitter meta tags for optimal display. The twitter:card tag is required and defines the card type (summary, summary_large_image, etc.).
Why does my OG preview not update after changing tags?
Social media platforms cache OG data aggressively. Facebook caches for about 24 hours, and you can force a refresh using the Facebook Sharing Debugger. Twitter provides a Card Validator tool. LinkedIn has a Post Inspector. After updating your OG tags, use these platform tools to clear the cached version and fetch fresh data.
What OG tags are required?
The four required Open Graph tags are og:title (the title of your content), og:type (the type of content, usually "website" or "article"), og:image (the URL to the preview image), and og:url (the canonical URL of the content). While og:description is technically optional, it is strongly recommended as most platforms display it prominently in link previews.
How do I test OG tags without deploying?
Our Open Graph Preview tool lets you test OG tags locally by entering the values directly without needing to deploy your website. For deployed sites, Facebook provides the Sharing Debugger (developers.facebook.com/tools/debug), Twitter has the Card Validator, and LinkedIn offers the Post Inspector. These tools fetch and display your OG tags in real-time.

How to Use the Open Graph Preview Tool

Testing your Open Graph meta tags before deploying is crucial for ensuring your content looks professional when shared on social media. Our free OG preview tool lets you see exactly how your links will appear on Facebook, Twitter, LinkedIn, and Slack in real-time.

Step 1: Enter your OG tags. Fill in the title, description, image URL, content type, and site name fields. These correspond to the og:title, og:description, og:image, og:type, and og:site_name meta tags in your HTML. The tool validates your input and shows warnings for missing required fields.

Step 2: Add your page URL. Enter the canonical URL of your page. This is used in the og:url tag and appears in some platform previews. While not always visible in the card, it helps platforms identify the correct page and prevent duplicate content issues in their caches.

Step 3: Preview on multiple platforms. See how your link will appear on Facebook, Twitter, LinkedIn, and Slack simultaneously. Each platform renders OG data slightly differently, so it is important to verify your content looks good on all of them. The preview updates in real-time as you modify your tags.

Step 4: Copy the meta tag code. Once you are satisfied with the previews, copy the generated HTML meta tags and paste them into the head section of your webpage. The tool generates both Open Graph and Twitter Card meta tags for maximum compatibility.

Understanding Open Graph Protocol

The Open Graph protocol was introduced by Facebook in 2010 to standardize how web content is represented when shared on social platforms. It uses meta tags in the HTML head section to define structured information about a page, including its title, description, image, type, and URL. This structured data allows social platforms to create rich link previews instead of just showing a plain URL.

Beyond Facebook, the Open Graph protocol has been adopted by virtually every social platform and messaging app. LinkedIn, Pinterest, Slack, Discord, Microsoft Teams, Telegram, and WhatsApp all read OG tags to generate link previews. Twitter has its own Twitter Card system but falls back to OG tags when Twitter-specific tags are not present, making OG tags the universal standard for social sharing metadata.

The most impactful OG tag is og:image, as visual content dramatically increases engagement rates on social media. Studies show that posts with images receive 2-3 times more engagement than text-only posts. A well-designed OG image with clear branding and readable text can significantly improve click-through rates from social media shares. The recommended dimensions are 1200x630 pixels with a 1.91:1 aspect ratio.

Platform-Specific Considerations

Facebook and Instagram. Facebook reads all standard OG tags and supports additional tags like og:locale, og:video, and article-specific tags for published_time and author. Facebook caches OG data for approximately 24 hours. Use the Facebook Sharing Debugger to force a cache refresh after updating your tags.

Twitter. Twitter uses its own meta tag system (twitter:card, twitter:site, twitter:creator) but falls back to OG tags. The twitter:card tag is required and determines the card layout. Options include summary (small image), summary_large_image (large image), app (app install), and player (video/audio).

LinkedIn. LinkedIn reads standard OG tags and particularly values og:title, og:description, and og:image. LinkedIn previews tend to be more text-heavy, so compelling descriptions are especially important. Use the LinkedIn Post Inspector to validate and refresh your OG data.

Slack and messaging apps. Slack fetches OG tags and displays them in an attachment-style format. It shows the site name, title, description, and image in a compact card. Messaging apps like WhatsApp and Telegram also use OG tags for link previews, making them important for content shared in private conversations.

Why Use Our OG Preview Tool?

Instant multi-platform preview. See how your content looks on Facebook, Twitter, LinkedIn, and Slack simultaneously without visiting each platform individually. This saves significant time during the content review process and ensures consistency across platforms.

No deployment required. Test your OG tags before deploying by entering values directly into the tool. This prevents the need to deploy, check, fix, and redeploy cycle that slows down development. Get your meta tags right the first time.

Complete code generation. The tool generates both Open Graph and Twitter Card meta tags in properly formatted HTML. Simply copy the generated code and paste it into your page head. No manual tag writing or formatting required.

Advertisement