OnSumoTools

Open Graph Card Preview

The Open Graph Card Preview shows you exactly how your page will appear when shared on Facebook, LinkedIn, WhatsApp, and Slack before your site is published or before the platforms re-crawl your updated tags. Enter your OG tags manually or fetch them from a live URL.

Fetch OG tags from URL

URL fetch runs in your browser. Many sites block cross-origin requests; if fetch fails, paste OG tags manually.

Live preview

yoursite.com

Your Page Title

Your page description for social sharing.

Facebook · image 1200×630

OG tag HTML

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description for social sharing.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:site_name" content="yoursite.com">

Preview is approximate. Platforms may render cards differently based on cache, device, and their internal rendering engine.

How does the OG Card Preview Tool work step by step?

The OG card preview fetches og:title, og:description, og:image, and og:url meta tags from any publicly accessible URL and renders a live mockup of how the page appears when shared on Facebook, LinkedIn, and Slack. Each platform applies different image dimensions and text truncation: Facebook crops og:image to a 1200x630 target with a 1.91:1 ratio, LinkedIn to the same ratio, and Slack to a smaller square thumbnail. The tool parses the raw HTML of the fetched page in real time, not a cached copy, so it reflects your current live meta tags. If og: tags are absent it falls back to Twitter Card equivalents, then to the plain page title and first paragraph. Key assumption: the preview URL must be publicly accessible. Pages behind authentication or on a private staging environment return an error. Edge case: Facebook caches og: metadata aggressively for up to 30 days; even after you update the tags on the live page, sharing the URL on Facebook will show the cached version until you force a refresh using the Facebook Sharing Debugger. This tool shows the current state of your tags, not the cached card Facebook users see.

What does a typical OG Card Preview Tool result look like?

A page with a 1200x630 OG image and a 70-character title renders well on Facebook. The same card on WhatsApp uses a smaller image crop and may truncate the title at 55 characters. On LinkedIn, the description is capped at approximately 140 characters visible. After updating live OG tags, use Facebook's Sharing Debugger to clear their cache and get a fresh preview.

Frequently asked questions

  • What is the ideal OG image size?

    1200x630 pixels at a 1.91:1 aspect ratio is the recommended size for Facebook, LinkedIn, and Slack. Images smaller than 200x200 may not display on some platforms. Use the 1200x630 size as your default and verify the crop in the preview tool. Tracking this metric alongside conversion data gives a more complete picture of how changes affect actual business outcomes.

  • Why does my link preview look wrong even with correct OG tags?

    Social platforms cache OG tags aggressively. After updating your OG tags, the old preview may display for hours or days. Use Facebook's Sharing Debugger, LinkedIn's Post Inspector, or Twitter's Card Validator to force a fresh crawl.

  • Do OG tags affect SEO rankings?

    OG tags do not directly affect search rankings. They control the appearance of shared links on social platforms. However, a compelling OG card improves click-through rate on social shares, which can drive traffic that indirectly supports SEO.

  • What is the difference between og:title and the HTML title tag?

    The HTML title tag is for search engines and browser tabs. og:title is specifically for social sharing previews. They can be the same, but you may want a more engaging og:title optimized for social sharing rather than keyword density. Tracking this metric alongside conversion data gives a more complete picture of how changes affect actual business outcomes.

  • What happens if I do not have OG tags?

    If no OG tags are present, social platforms attempt to infer the title from the HTML title tag and pull the first image found on the page. Results are inconsistent and often poor. Always set og:title, og:description, and og:image explicitly.

  • Can I use the URL fetch mode for any site?

    The fetch mode uses a client-side request to retrieve OG tags from the page URL. It works for public pages that do not block cross-origin requests. Pages behind authentication or CORS restrictions require manual entry of OG tags.

Related tools

Why previews matter

When someone shares your link, the card is your first impression. A sharp image and a clear title get clicks. A blank box or a cropped logo looks like spam.

This tool shows how your tags render on Facebook, LinkedIn, WhatsApp and Slack. Each platform crops and truncates a bit differently, so one preview isn't enough.

The tags that count

og:title, og:description, og:image and og:url are the core four. Add og:type and og:site_name for completeness. The ideal image is about 1200 by 630 pixels, a 1.91 to 1 ratio, under a few megabytes.

og:title can differ from your HTML title tag. Use it to write something shorter and more shareable. The HTML title is for search results.

Fetch mode and manual mode

Paste a URL and the tool fetches the tags. It works for public pages. If a page sits behind a login or blocks bots, fetching fails, so switch to manual mode and type your values.

You also get copy-ready HTML tags once you're happy.

When it still looks wrong

Platforms cache previews. If you fixed the tags and the old card still shows, clear the cache with Facebook's sharing debugger or LinkedIn's post inspector. Check that the image URL is absolute and public, and that it loads over HTTPS.

OG tags don't directly affect rankings. They affect clicks from social, which matters all the same.