How to Create the Perfect Social Media Preview Card
You've written a great blog post, published it, and shared the link on Twitter. But instead of a rich, eye-catching card with an image and description, your followers see a bare URL — or worse, a broken preview with the wrong image. Social media preview cards are controlled by a handful of HTML meta tags, and getting them right is one of the highest-leverage things you can do for click-through rates.
How Open Graph and Twitter Cards Work
When you paste a URL into Facebook, LinkedIn, Slack, or Discord, the platform's crawler fetches your page and looks for Open Graph (OG) meta tags in the <head>. The four essential tags are og:title, og:description, og:image, and og:url. Twitter (X) uses its own twitter:card tags but falls back to OG if they're missing.
The Most Common Mistakes
1. Missing or wrong image dimensions. Facebook recommends 1200×630 pixels for link previews. Twitter's "summary_large_image" card works best at the same size. Use an image that's too small and it gets cropped awkwardly or replaced with a generic icon.
2. Relative image URLs. Social crawlers need an absolute URL (starting with https://). A relative path like /images/og.png will fail silently on most platforms.
3. Stale cache. Facebook and LinkedIn aggressively cache preview data. If you fix your tags after the first share, you may need to use their cache-clearing tools (Facebook Sharing Debugger, LinkedIn Post Inspector) to see the updated card.
4. Title too long. Titles over ~60 characters get truncated on most platforms. Keep your OG title concise — it doesn't have to match your page's <title> tag exactly.
Platform-Specific Image Sizes
Beyond the 1200×630 OG image, each social platform has its own preferred dimensions for profile pictures, cover images, story images, and post images. Getting these wrong means awkward cropping. The Social Image Sizer tool lets you resize and crop images to the exact dimensions each platform expects — Facebook, Twitter, Instagram, LinkedIn, YouTube, and more.
Preview Before You Publish
The OG Card Preview tool lets you enter a URL and see exactly how its social card will appear on Twitter, Facebook, and LinkedIn — without sharing it first. You can catch missing images, truncated titles, and formatting issues before your audience sees them.
If you're building a new page from scratch, the Meta Tag Generator creates the complete set of OG and Twitter Card tags for you. Fill in the title, description, image URL, and site name, and copy the generated HTML into your page's <head>.
Optimise the Image Itself
A large OG image slows down the crawler and can time out, resulting in no preview at all. Run your image through the Image Compressor to bring it under 300 KB without visible quality loss. And if your source image isn't the right aspect ratio, the Image Resizer can crop and resize it to 1200×630 in one step.
No Server Required
All the tools mentioned here run entirely in your browser. Your URLs, images, and meta tag drafts are never uploaded to any server. This is especially important for preview tools — you may be testing cards for pages that aren't public yet, and you don't want a third-party service crawling your staging environment.