OG & Social Media Preview Tool
See exactly how your website looks when someone shares it on Twitter/X, LinkedIn, Facebook, or Slack. Enter your meta tags, get an instant preview. No login, no install, no guessing.
Enter your meta tags
Twitter / X preview
LinkedIn preview
Facebook / WhatsApp preview
Slack / iMessage preview
What Are Open Graph Tags?
Open Graph tags are snippets of HTML that control how your website appears when someone shares a link on social media or messaging apps. They tell Twitter, LinkedIn, Facebook, and Slack what title to show, which image to display, and what description to use.
Without OG tags, platforms fall back to whatever they can find on the page — which usually means an ugly, text-only link or the wrong image. For freelancers handing off client websites, checking your OG preview before launch is a small step that makes a big difference in how professional the work looks.
The most important tags are og:title, og:description, og:image, and og:url. Twitter additionally uses twitter:card to determine the card layout. Every major platform reads these tags, though they each have slightly different display rules — which is exactly why a preview tool like this exists.
How to Add OG Tags
In Webflow, open your Page Settings (the gear icon on any page). Scroll to "SEO Settings" — you'll find fields for OG title, description, and image. The OG image field accepts a direct URL or an asset from your Media Manager. Changes take effect after publishing.
In Framer, go to Site Settings → SEO. You can set a global OG image and description, and override them per page in the Page Settings panel. Framer automatically generates og:url based on your published domain.
Install the Yoast SEO or Rank Math plugin. Both add a dedicated "Social" tab in the editor where you can set custom OG titles, descriptions, and images per post or page. No manual code required.
OG tags look good? Time for the final step.
Before you hand off the site, let your client do one last review — directly on the live website. dotts lets them click anywhere and leave comments. No login. No back-and-forth email chains.
Free plan available. 3 projects, no credit card.
Frequently Asked Questions
Everything you need to know about Open Graph tags and social media previews. Something missing? Email us at tobi@dotts.se
The recommended size is 1200×630px (1.91:1 ratio). This works across Facebook, LinkedIn, and Twitter with summary_large_image. Images smaller than 600×315px may not display as large cards on some platforms.
Not directly — search engines like Google don't use OG tags for ranking. But they affect click-through rates when your links are shared, which can indirectly drive traffic. A compelling OG image and title makes people more likely to click.
Social platforms cache OG data aggressively. Twitter has a Card Validator tool, and Facebook has a Sharing Debugger that lets you force-refresh the cache. LinkedIn also has a Post Inspector tool for this.
Twitter uses its own twitter:card, twitter:title, and twitter:description tags, but falls back to OG tags if the Twitter-specific ones are missing. Adding at minimum twitter:card is recommended to control the card layout.
summary and summary_large_image?
summary shows a small thumbnail next to the text. summary_large_image shows a large image above the text — much more visual, better for click-through. Use summary_large_image unless you have a reason not to.
Yes. You're entering the meta tag values manually, so it works for any platform — Webflow, Framer, WordPress, Shopify, custom HTML, whatever.
More free tools for freelancers