Why does my image fail to load in the preview?

The card loads your image URL directly in the browser, so failures usually mean the URL is wrong, the host blocks hotlinking, or the server redirects. The tool shows "No image URL provided" when the field is empty and "Image failed to load" when a URL was given but cannot be fetched. Test the image URL in a private browser tab; if it loads there, the issue is platform caching rather than the URL itself.

What image size does the card expect?

The preview renders the image area at a 1.91:1 ratio, which matches the recommended 1200×630 dimensions most platforms expect. Smaller images still render but can appear pixelated or get cropped, and images under 600×315 are ignored by Facebook entirely. Keep the important visual in the center third, since feed layouts crop the edges of non-conforming images.

Which platforms read these Open Graph tags?

Facebook and LinkedIn read them directly, and their previews follow the og: tags closely. Slack uses them for link unfurling in channels. X reads its own twitter:card tags first but falls back to Open Graph when they are missing, which is why many sites emit both sets. Discord and messaging apps also scrape og: metadata, so the card you preview here broadly represents how your page travels across the web.

Why does the preview show the domain from my URL field?

The card derives the hostname from og:url — stripping the www prefix — because that is where the share click will land and what platforms display above the title. If the URL field is empty, it falls back to your site name or "example.com". Always fill og:url with the canonical page URL so the previewed domain matches where readers actually arrive.

Does the description field really max out at 200 characters?

The counter tracks against 200, which covers the generous end of what platforms display. Facebook renders roughly two lines (about 125 characters with typical fonts), and LinkedIn truncates similarly, so values between 120 and 160 characters are safest. Longer text gets cut mid-sentence — the counter helps you catch that before publishing rather than after the card goes live.

SEO

Open Graph Preview

Preview how a page renders as an Open Graph social card.

opengraphogpreviewsocial

Loading tool…

Recommended tools

Namecheap

Affiliate links — we may earn a commission if you sign up.

About the Open Graph Preview

The Open Graph Preview shows you exactly how a page will render as a social share card on Facebook, LinkedIn, Slack, and other platforms that read og: meta tags — before you publish. Fill in og:title, og:site_name, og:description, og:image, and og:url, and the tool renders a live card with a 1.91:1 image area, the domain pulled from your URL, and a line-clamped title, plus a copyable block of Open Graph meta tags generated from the same fields. The description field carries a 200-character counter, and stat tiles track title length, an estimated title pixel width, and whether an image URL is present. If the image fails to load, the card visibly degrades to a placeholder state, which is a useful reminder to test image URLs in staging rather than after a campaign ships. Social shares are a real traffic channel for content marketing, and the preview card is the only thing users see before deciding to click. The recommended 1200×630 image dimensions noted in the tool match what Facebook's crawler expects, so a quick preview pass here protects both brand presentation and referral click-through rates before any URL goes live.

Hand-written guide

Examples

Input

og:title: "The Ultimate Guide to Sustainable Coffee" · og:site_name: "Fernandes Labs" · og:description: "A practical guide to choosing and brewing sustainable coffee at home." · og:image: "https://example.com/og-image.png" · og:url: "https://example.com/coffee-guide"

Output

<!-- Open Graph meta tags -->
<meta property="og:title" content="The Ultimate Guide to Sustainable Coffee" />
<meta property="og:description" content="A practical guide to choosing and brewing sustainable coffee at home." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/coffee-guide" />
<meta property="og:site_name" content="Fernandes Labs" />
<meta property="og:type" content="website" />

Note: The card renders the image at 1.91:1 with the domain example.com above the title. Stats show title length 39, an estimated pixel width, and Has image: Yes.

Input

og:title: "Launch Week Is Here" · og:site_name: "Acme Tools" · All other fields empty

Output

<!-- Open Graph meta tags -->
<meta property="og:title" content="Launch Week Is Here" />
<meta property="og:site_name" content="Acme Tools" />
<meta property="og:type" content="website" />

Note: Empty fields are skipped entirely in the tag output, and og:type is always website. The preview shows a "No image URL provided" placeholder in the image area.

Input

og:title: "Rebrand Story" · og:image: "https://example.com/missing.png" (a URL that cannot load)

Output

<!-- Open Graph meta tags -->
<meta property="og:title" content="Rebrand Story" />
<meta property="og:image" content="https://example.com/missing.png" />
<meta property="og:type" content="website" />

Note: The tag block still includes og:image, but the card shows "Image failed to load" in the image area — a preview of what happens when a platform's crawler cannot fetch the asset.

How to use

1
Fill in og:title and og:site_name, then write the og:description and watch the /200 counter under the textarea.
2
Add the og:image URL and og:url, using a 1200×630 image for the best rendering across platforms.
3
Check the social card preview — the image renders at 1.91:1 and the domain shown above the title comes from your og:url.
4
Look at the stat tiles for title length, estimated pixel width, and image presence before finalizing your copy.
5
Copy the generated OG meta tags from the result box and add them to your page's <head>.

Common use cases

Campaign landing pages — preview the exact share card a UTM-tagged campaign URL will produce before sending the newsletter.
Content marketing checklists — verify every new post has og:image and og:description before it ships.
Brand consistency audits — confirm site_name and image treatments stay uniform across departments sharing pages.
Social media scheduling — paste the target URL into the preview to catch missing images before scheduling posts.
Staging environments — validate cards on staging pages where platform crawlers cannot reach them yet.
Design handoffs — show designers exactly how crop ratios behave so they export compliant 1200×630 assets.

Technical SEO best practices

Serve og:image at 1200×630 with a 1.91:1 ratio and keep the file under 8MB so Facebook accepts it.
Fill og:description independently of the meta description — social copy can be warmer and slightly longer, up to about 200 characters.
Set og:url to the canonical URL so all shares accumulate engagement on one master version of the page.
Keep the most important visual information in the center of the image, since feed layouts crop the corners.
Pre-warm platform crawlers after major changes with Facebook's Sharing Debugger or LinkedIn's Post Inspector to refresh cached cards.
Provide og:site_name on every template so multi-site brands never leak the wrong brand in shares.

Tips

Paste a tracking-free version of the URL — UTM parameters are fine in the tag but clutter the preview hostname.
Keep a test image URL handy that 404s on purpose to see how the card degrades.
Check the pixel-width stat for titles above about 40 characters before locking them in.
Re-preview after the page ships and use the platform debuggers to bust stale cached cards.

Frequently asked questions

They serve different surfaces. The page title element builds the search results listing, while og:title builds the social share card. They can match, and usually should for consistency, but social copy is often warmer and can be slightly longer. The preview tool shows you exactly what the social card will look like so you can tune og:title independently without touching the SERP title.

Explore more seo tools

Browse the full collection of seo tools on the hub, or jump back to all categories.

All SEO tools All categories