Open Graph Preview: Test Social Share Cards Free
You spend time writing a post and crafting a link, then it lands in the feed with a blank box where the image should be. That moment kills click-through. An Open Graph preview tool lets you catch the problem before you ever hit publish.
Open Graph is the protocol that turns a plain URL into a rich card with a title, description and image. When those tags are missing or malformed, platforms guess, and the guess is usually ugly. Previewing first puts you back in control.
What Open Graph Tags Do
Open Graph tags are meta tags in the head of your page that tell social platforms exactly how to display your link. The core set includes og:title, og:description, og:image and og:url. When someone shares your page on Facebook, LinkedIn, WhatsApp or Slack, the platform reads these tags and assembles the preview card.
These tags do not directly change your Google rankings. What they change is behavior. A clean, branded card earns far more clicks than an auto-generated scrape of random page text, and more clicks mean more traffic and stronger engagement signals.
Why You Should Preview Before Posting
Social platforms cache aggressively. Once Facebook scrapes a bad version of your link, that broken preview can stick around for hours or days, even after you fix the tags. Previewing with an Open Graph preview tool first avoids burning a launch on a broken card.
Previewing also reveals truncation. A headline that looks fine in your editor may get cut off mid-word in a narrow mobile card. Seeing the real rendered layout lets you trim the title so it reads cleanly everywhere.
How to Use the Open Graph Preview Tool
The workflow is fast and visual:
- Open the Open Graph Preview tool and enter your page title, description, image URL and site URL.
- Watch the live cards update for Facebook, X and LinkedIn so you can compare layouts side by side.
- Check that your image fills the frame and that the headline is not truncated.
- Adjust the wording or swap the image until every card looks the way you want.
- Copy the generated Open Graph and Twitter card tags into the head of your page.
Because the Open Graph Preview renders each platform separately, you immediately see where a long title or an odd image ratio causes trouble.
Designing an Image That Converts
The image is the largest, most eye-catching part of any share card. Build it at 1200 by 630 pixels so it fills the large layout without awkward cropping. Keep important text away from the edges, where some platforms apply rounded corners or overlays.
Give each important page its own image rather than reusing a single homepage graphic. A blog post about pricing and a case study should not share the same picture. Unique, on-topic imagery makes every link distinct in a crowded feed and signals care.
Fixing Common Open Graph Problems
When a preview comes back broken, walk through this checklist:
- Confirm og:image uses an absolute URL, not a relative path
- Make sure the image is publicly reachable and not behind a login
- Verify the tags appear in the raw HTML, not only after JavaScript runs
- Keep the image under a few hundred kilobytes so crawlers fetch it reliably
- Re-scrape the link in the platform debugger to clear the old cache
Running your final tags through the Open Graph Preview confirms the fix took effect before you share the link widely.
Twitter Cards and Cross-Platform Consistency
X uses Twitter card tags when they exist and falls back to Open Graph tags otherwise. Declaring twitter:card as summary_large_image gives you the big, attention-grabbing layout. The rest of the card can reuse your og:title, og:description and og:image, so you do not need to maintain two completely separate sets.
The goal is consistency. Whether your link surfaces on LinkedIn, Facebook or X, it should look like the same polished asset. Previewing all three together is the easiest way to guarantee that.
It is worth remembering that each platform crops and frames cards slightly differently. LinkedIn tends to favor a horizontal layout, X stretches the large summary image edge to edge, and Facebook may show a tighter aspect on mobile than on desktop. Designing your image with a safe central zone, and keeping any text well inside the frame, ensures the card holds up no matter which service renders it. Previewing across all three before you post is how you confirm that safe zone actually works in practice.
Make Every Share Count
A link preview is free advertising that appears every time someone shares your content. Treat it like the ad it is. By previewing your Open Graph cards before posting, you eliminate blank boxes, fix truncated headlines and ship images that pull people in.
Test your next link with the Open Graph Preview tool, then browse our other free SEO tools to keep your pages search and share ready.
Try the tool from this guide
Open Graph Preview
Preview your social share cards.
Open Open Graph PreviewFrequently asked questions
What does an Open Graph preview tool actually show me?
It renders a mockup of how your link will appear when shared, pulling in the title, description and image from your Open Graph tags. You see the same card Facebook, LinkedIn and X would build, so you can catch a broken image or truncated headline before anyone else does.
Why does my link preview look wrong or blank on social media?
The most common causes are a missing og:image, a relative image URL that crawlers cannot resolve, or tags that only load through JavaScript. Many social crawlers do not execute scripts, so your Open Graph tags must be in the server-rendered HTML.
What is the ideal Open Graph image size?
Use 1200 by 630 pixels for the best results across platforms. That ratio fills the large card layout without cropping, and it keeps your image crisp on high-resolution screens.
Do I need separate tags for Twitter and Facebook?
Not entirely. X reads Twitter card tags when present but falls back to Open Graph tags, so a solid set of OG tags plus a twitter:card declaration covers both. Our Open Graph preview generates both sets for you.
Share this article
Send it to a teammate or save the link for later.
