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.
Why OG Tags Matter for Freelancers
As a freelance web designer, you're not just building websites — you're building things that other people share, reference, and judge. Every time a client shares their new website link in a WhatsApp group, posts it on LinkedIn, or sends it in a Slack message, the OG preview is the first impression. Not the homepage, not the hero image — the small card that pops up when the link is pasted.
If that card shows the wrong image, a truncated title, or — worst case — nothing at all, it undermines everything you built. It doesn't matter how good the site is if the preview looks broken. Clients notice this. Their contacts notice this. It reflects on your work.
For freelancers specifically, this is also a professional differentiation point. Most designers hand off a site without ever checking OG previews. Checking them — and fixing any issues before handoff — is a small detail that signals thoroughness. It's the kind of thing clients mention when they refer you to someone else: "They even checked how it looks when you share it."
The good news is that fixing OG issues takes minutes once you know what to look for. The bad news is most freelancers only discover the problems after launch, when the client messages them asking why their site looks weird on WhatsApp.
OG Image Best Practices
The OG image is the most impactful element of any social preview. A great image dramatically increases click-through rates; a missing or wrong image makes even a well-written title feel untrustworthy.
Size: 1200×630px is the standard. This 1.91:1 ratio works across Facebook, LinkedIn, and Twitter's summary_large_image card. Don't go smaller than 600×315px — platforms may fall back to a text-only display.
Content: The OG image should communicate what the page is about within 1–2 seconds, without any text being required. A hero image, a product shot, or a branded graphic all work. Avoid images with tiny text — it won't be readable at card size.
File size: Keep it under 300KB. Large OG images load slowly, especially on mobile, and some platforms compress them aggressively anyway.
Uniqueness per page: Ideally, every important page has its own OG image — not just the homepage. A blog post should have a relevant image, not the same generic site header that every other page uses.
Testing: After you set the OG image, always paste the URL into this tool to verify it renders as expected before you hand the site off to the client.
How Each Platform Handles OG Tags Differently
All major platforms read the same Open Graph tags, but each one interprets and displays them slightly differently. Understanding these differences helps you optimize for the platforms your clients' audiences actually use.
Twitter / X gives you the most control via the twitter:card meta tag. The summary_large_image card type shows a large image above the text and gets significantly more engagement than the small summary card. Twitter uses its own twitter:title and twitter:description tags if present, falling back to OG tags otherwise. Titles are capped at around 70 characters before truncation.
LinkedIn reads OG tags and caches them aggressively — changes can take 24–48 hours to appear even after using the Post Inspector. LinkedIn displays the title and a shortened URL below the image, but not the description. This means your title does most of the work on LinkedIn.
Facebook reads OG tags faithfully and also caches aggressively. The Sharing Debugger tool lets you force a cache refresh. Facebook shows title, description (up to 2 lines), and the domain name. The image ratio it prefers is 1.91:1.
Slack unfurls links automatically in channels and DMs. It reads OG tags and shows a compact card with a colored left border, the title as a link, a short description, and sometimes the image. Slack respects og:image but may display it smaller than other platforms. iMessage on iOS behaves similarly.
WhatsApp shows a minimal preview: image, title, and domain. Description is often cut. This is why having a strong, descriptive OG title matters — it does almost all the work on WhatsApp previews.
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.
Common OG Tag Mistakes
No OG image set. The most common mistake. Without an og:image, platforms either show nothing or pull a random image from the page — often a logo, an icon, or the first image in the DOM, which is rarely the right choice.
Using the same OG image for every page. The homepage image works for the homepage. Blog posts, service pages, and case studies should each have a relevant image. A generic site-wide OG image makes every shared link look the same — and makes it harder for people to understand what a specific page is about before clicking.
OG title copied from the HTML title tag. Your HTML title is optimized for SEO (often includes the brand name: "Best Webflow Designer – YourBrand"). Your OG title should be optimized for sharing — more human, more compelling, less keyword-stuffed.
Description too long. Most platforms truncate descriptions at around 155–160 characters. Write your OG description to land the point in the first 120 characters, with the rest as optional context.
Forgetting to refresh the cache after changes. Updating OG tags doesn't instantly update what platforms show. Use Twitter's Card Validator, Facebook's Sharing Debugger, or LinkedIn's Post Inspector to force a cache refresh. If you skip this step, you may launch a site and discover it's still showing old preview data for weeks.
Not testing on mobile. OG previews look different on mobile messaging apps than on desktop social platforms. Always check how the preview renders on WhatsApp and iMessage before signing off on a project.
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.
Go to LinkedIn's Post Inspector (linkedin.com/post-inspector), enter your URL, and click "Inspect". This forces LinkedIn to re-fetch the page and update its cached preview. Note that it can still take up to an hour for the new data to appear across the platform.
Often yes. Your HTML <title> tag is optimized for SEO — it typically includes your brand name and target keywords. Your OG title should be optimized for social sharing — more conversational, more compelling, without the brand suffix. Think of it as a headline for someone scrolling their feed, not a search result.
Platforms will try to infer the preview data from your page content. Facebook and LinkedIn usually pull the first image on the page, the <title> tag for the title, and either the meta description or the first paragraph of text for the description. This often leads to inconsistent, unattractive previews — especially if your page starts with a hero image that doesn't have descriptive alt text.
OG tags are HTML meta tags, so they only work for web pages. PDFs don't support OG tags natively. If you need a PDF to have a nice preview when shared, host it on a landing page that has proper OG tags set.
More free tools for freelancers