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.

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.

OG title

15 / 88 chars

OG description

41 / 300 chars

OG image URL

Using placeholder image

Site namePage URL

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 this tool works

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.

Worked example

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.