Make Your Links Look Right Anywhere They Get Shared
When someone shares your link in a tweet, a Facebook post, a Slack message, or an iMessage thread, the platform displays a preview card with an image, a title, and a description. That card is what people see, click on, or scroll past. A polished card gets clicks. A broken or generic card gets ignored. The card content comes from Open Graph meta tags in your page's HTML — a small set of tags in the head section that tell every social platform what to show. This tool previews exactly how your tags will render across the major platforms so you can fix problems before you share.
What Open Graph Is
Open Graph is an open standard that Facebook introduced in 2010 and that has since been adopted by essentially every social platform. It works through meta tags in the HTML head section, prefixed with og:. Twitter (now X) added its own twitter: tags that override Open Graph if both are present, but in practice most tools fall back to Open Graph when Twitter-specific tags are missing. The minimum viable set is og:title, og:description, og:image, and og:url. Add og:site_name and twitter:card and you have covered the cases that matter for visual rendering.
Image Sizing
The single most important Open Graph tag is og:image. Platforms render images at different aspect ratios and different sizes, but a 1200×630 image (the 1.91:1 aspect ratio) renders correctly almost everywhere. Smaller images get scaled up and look fuzzy; non-standard aspect ratios get center-cropped or letterboxed. If you only do one thing for Open Graph, ship a clean 1200×630 image. The summary_large_image Twitter card type is what gives you a full-width card preview; the older summary type uses a smaller square thumbnail that is easy to miss in a fast-scrolling feed.
Title and Description Length
Each platform truncates titles and descriptions at slightly different points. A safe rule: keep titles under 60 characters and descriptions under 160 characters. Twitter cuts off titles around 70 characters and descriptions around 200. Facebook displays roughly the same. LinkedIn truncates titles aggressively in feed view. The previews here use realistic truncation so you can see whether a long title will lose its last word in the wild.
Common Mistakes
The most common Open Graph mistake is forgetting to add the tags entirely — when missing, platforms fall back to whatever HTML they can scrape from the page, which usually gives a generic card with the page title and a random image. The second most common mistake is using a relative URL for og:image; it must be a fully qualified absolute URL. The third is letting the og:image be too small (under 600 pixels wide), which causes platforms to skip the image and show only text. The fourth is leaving cached old tags in place — Twitter and Facebook both cache OG previews, so if you change a tag and re-share, you may need to use the platform's debug tool (Facebook Sharing Debugger, Twitter Card Validator) to force a refresh.
The Image Itself
A good OG image earns the click. The best ones are big, readable, and include the title or topic right in the image. Text in the image should be large — small text becomes unreadable when the card scales down on mobile. High contrast helps. Avoid putting essential content in the corners since some platforms crop slightly. If the page is an article, an image with the article title rendered as large text consistently outperforms a generic stock photo. Many sites now generate OG images dynamically from the page title using a serverless function or static generator.
Frequently Asked Questions
Why does my updated OG image still show the old version?
Social platforms cache OG previews aggressively. Use the Facebook Sharing Debugger or Twitter Card Validator to clear the cache for a specific URL. Most platforms refresh within 24 hours on their own.
Do I need both og: and twitter: tags?
Twitter falls back to Open Graph if Twitter-specific tags are missing, so a complete set of og: tags is sufficient for most cases. The one Twitter-specific tag worth setting is twitter:card, which controls whether you get the large image format or the small thumbnail format.
Where do I add the tags on my site?
Inside the head section of every page you want to control the preview for. If your site uses a CMS or a framework with a head/meta component, add them there. If you have static HTML, add them once per page. Each page can (and should) have its own og:title, og:description, og:image, and og:url.
This previewer runs entirely in your browser and never fetches any URL — what you type is what you see, exactly the way you typed it. Use it to draft tags before publishing, then verify the live page with each platform's official debug tool.
Try also: Social Media Counter · Favicon Generator