Open Graph Preview & Debugger

Preview how your website looks when shared on Facebook, Twitter/X, LinkedIn, Discord, Slack, and WhatsApp. Validate Open Graph and Twitter Card meta tags with real-time social card previews.

Input Section Label

Twitter/X Cards

Validation Label

Missing Og Title
Missing Og Description
Missing Og Image
Missing Og Url

Preview Section Label

No Data

How to Use the Open Graph Preview Tool

  1. 1

    Choose input mode

    Choose 'Paste HTML' to extract tags from source code, or 'Manual Entry' to fill in fields directly
  2. 2

    Enter meta tag values

    Enter your Open Graph and Twitter Card meta tag values
  3. 3

    Preview on each platform

    Switch between platform tabs to see how your page will appear on each social network
  4. 4

    Check validation

    Check the validation panel for missing or problematic tags
  5. 5

    Generate and copy tags

    Click 'Generate Tags' to create the HTML code, then copy it to your page

Who Needs an Open Graph Preview Tool?

1

Social Media Managers

Preview and perfect social cards before scheduling posts. See exactly how your links will appear on Facebook, Twitter/X, LinkedIn, and messaging apps, avoiding embarrassing broken images or truncated titles that undermine your campaigns.
2

SEO and Content Teams

Optimize meta tags for both search engines and social sharing. A well-crafted Open Graph setup increases click-through rates from social traffic, complementing your search engine optimization efforts with consistent messaging across all channels.
3

Web Developers

Validate Open Graph and Twitter Card markup during development without deploying to production. Paste your HTML source code to extract and verify tags, catch missing or malformed meta tags, and generate correct markup in seconds.
4

Marketing and Growth Teams

Ensure brand consistency across every platform where your content gets shared. Test different titles, descriptions, and images to find the combination that drives the highest engagement before launching campaigns.

Why Use Open Graph Preview?

See exactly how your links will appear on Facebook, Twitter/X, LinkedIn, Discord, Slack, and WhatsApp before publishing. Catch missing images, truncated titles, and broken tags instantly with real-time validation and multi-platform previews, all without deploying your page or sharing it publicly.

Open Graph meta tags are the invisible layer that determines how your website appears when someone shares a link on Facebook, LinkedIn, Discord, Slack, WhatsApp, or any platform that generates link previews. Without proper OG tags, platforms either guess what to display or show a blank card with just the URL, which dramatically reduces click-through rates. This tool lets you preview those social cards across six major platforms before your content goes live.

The Open Graph protocol was originally created by Facebook in 2010, and it has since become the universal standard for social sharing metadata. Twitter later introduced its own Twitter Cards system, which adds features like player cards for video and app install cards. Most platforms read og:title, og:description, og:image, and og:url as the baseline, with platform-specific tags taking priority when present. Getting these tags right is one of the highest-impact, lowest-effort improvements you can make to your social media presence.

Use this tool alongside the SERP Preview tool to optimize how your pages appear in both search results and social shares. Once you have finalized your tags, the Meta Tag Generator can produce the complete HTML markup ready to paste into your page head section.

How It Compares

Facebook's Sharing Debugger, Twitter's Card Validator, and LinkedIn's Post Inspector each only preview how your link will appear on their own platform, and they require your page to be publicly accessible online. This tool previews all six platforms simultaneously, works with raw HTML or manual input, and runs entirely in your browser without needing a live URL. You can test and iterate on your tags before deploying anything.

Paid SEO tools like Ahrefs, SEMrush, and Screaming Frog include basic OG tag auditing, but they focus on crawling errors rather than visual previews. They also require monthly subscriptions starting at $99 or more. This tool is free, gives you instant visual feedback across platforms, includes tag validation with actionable warnings, and generates the correct HTML markup so you can copy it directly into your code.

Open Graph Optimization Tips

1
Always use absolute URLs for og:image. Relative paths like /images/hero.jpg will fail on most platforms. Include the full URL with https:// protocol.
2
Keep og:title under 60 characters and og:description under 155 characters. Facebook and LinkedIn truncate longer text, and the cut-off point varies by device and platform.
3
Use og:image dimensions of exactly 1200x630 pixels with a 1.91:1 aspect ratio. This is the universal safe size that renders well on Facebook, LinkedIn, Twitter, Discord, and Slack without cropping.
4
Set a unique og:image for each page rather than reusing your site logo. Pages with custom social images get significantly more engagement than those with generic fallback images.
5
Add both og:title and twitter:title separately. While Twitter falls back to OG tags, setting dedicated Twitter Card tags lets you craft platform-specific messaging, like shorter titles that work better in Twitter's card layout.

Frequently Asked Questions

1

Is this Open Graph Preview tool free to use?

Yes, this Open Graph Preview tool is completely free with no account required, no usage limits, and no feature restrictions. You can preview social cards across all six platforms, validate your meta tags, generate HTML markup, and copy the output as many times as needed. The entire tool runs locally in your browser, which means your HTML source code and meta tag content never leave your device. This makes it safe for testing pre-launch pages, client projects, and confidential content that you would not want to share with external services. Unlike Facebook Sharing Debugger or Twitter Card Validator that require your page to be publicly live, this tool works with raw HTML or manually entered values before anything is deployed. There are no premium tiers or paid upgrades. Every feature visible on the page is fully functional for all users without limitations or time-restricted trials.
2

What is the recommended Open Graph image size for social sharing?

The universally recommended Open Graph image size is twelve hundred by six hundred thirty pixels with a one-point-nine-one to one aspect ratio. This dimension works well across Facebook, LinkedIn, Discord, Slack, and WhatsApp without significant cropping on any platform. Twitter summary large image cards use a similar twelve hundred by six hundred twenty-eight pixel size, which is close enough that a single twelve hundred by six hundred thirty image works for both protocols. The minimum acceptable size is six hundred by three hundred fifteen pixels, though images below the recommended dimensions may appear pixelated or improperly cropped on high-resolution displays. Always use JPEG or PNG format with file sizes under eight megabytes, as larger files may timeout during social platform scraping. Place important text and visual elements in the center of the image, keeping a safe margin of about ten percent from all edges to account for different cropping behaviors across platforms.
3

Why does my shared link show the wrong image or old title?

Social media platforms cache Open Graph metadata aggressively to reduce server load when links are shared frequently. Facebook caches scraped data for approximately twenty-four hours, Twitter retains cached cards for around seven days, and LinkedIn caches for a similar duration. When you update your Open Graph tags, the platforms continue serving the old cached version until the cache expires or you manually force a refresh. To clear Facebook cache, use the Facebook Sharing Debugger and click the Scrape Again button for your URL. For Twitter, use the Card Validator tool to trigger a fresh scrape. LinkedIn provides a Post Inspector that re-fetches your page metadata on demand. Also verify that your og:image URL uses an absolute path with the full https protocol included, as relative image paths are a common cause of missing images across all platforms.
4

Do I need both Open Graph tags and Twitter Card tags on my page?

You do not strictly need both, but adding them gives you maximum control over how your content appears on each platform. Twitter and X will fall back to reading your Open Graph tags when dedicated Twitter Card meta tags are absent, so your links will still generate preview cards with just og:title, og:description, and og:image. However, Twitter Cards support features that Open Graph does not cover, including player cards for embedding video directly in the timeline, app install cards for promoting mobile applications, and summary cards with differently formatted layouts. Adding dedicated twitter:title and twitter:description tags also lets you craft platform-specific messaging, such as shorter titles optimized for Twitter character constraints or descriptions with different calls to action. The performance cost is negligible since meta tags add only a few bytes to your HTML head section, and the SEO benefit of complete social markup is well documented.

Related Tools

Meta Tag Generator

Seo

Robots Txt Generator

Seo

Json Ld Generator

Seo

Schema Org Generator

Seo

Keyword Density Checker

Seo

Serp Preview

Seo

Heading Structure Analyzer

Seo

Url Slug Generator

Seo

Open Graph Preview

Seo

Seo Title Description Writer

Seo

Xml Sitemap Generator

Seo

Hreflang Tag Generator

Seo

Rate This Tool

0/1000

Get Weekly Tools

Suggest a Tool