Social Preview Checker

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. It is the small card that pops up when the link is pasted.

If that card shows the wrong image, a truncated title, or in the 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, because platforms may fall back to a text-only display.

Content: The OG image should communicate what the page is about within 1 to 2 seconds, without any text being required. A hero image, a product shot, or a branded graphic all work. Avoid images with tiny text, because it will not 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, so changes can take 24 to 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.

Image Sizes and Meta Tags per Platform

One 1200×630px image and a complete set of Open Graph tags covers every platform below. The differences are in what each one crops, truncates or ignores, which is exactly what this checker shows you side by side.

Keep the file under about 300KB and avoid small text in the image, because at card size it is unreadable on every platform in this table.

How to Fix a Wrong Social Preview

You changed the OG tags, republished the site, pasted the link again, and the old preview is still there. This is the single most common social preview problem, and it is almost never a problem with your tags. Platforms cache what they fetched the first time and will happily serve it for days.

Work through this in order. Steps 1 and 2 catch a genuinely broken tag; steps 3 to 5 clear the cache that is showing you the old one.

1. Check the tags are actually live. Open the published page, view source, and search for og:image. If it is missing, the change never made it past your staging site or your CMS did not republish.
2. Check the image URL is absolute and public. og:image must be a full https:// URL, not a relative path, and the file has to be reachable without a login. Paste the image URL into a private browser window. If you do not see the image, neither does LinkedIn.
3. Force LinkedIn to refetch. Open the LinkedIn Post Inspector (linkedin.com/post-inspector), paste your URL, and inspect. LinkedIn caches aggressively; even after a successful inspect it can take a while for the new card to appear everywhere.
4. Force Facebook to refetch. Open the Facebook Sharing Debugger, paste your URL, and use "Scrape Again". The debugger also lists the tags it found, which makes it a useful second opinion on step 1.
5. Force X to refetch. X re-crawls links periodically rather than on demand. Confirm your twitter:card value first, then re-share; a fresh URL (for example with a harmless query string) will always fetch new data if you need the correct card immediately.

Two shortcuts worth knowing. If you need a correct preview right now and the cache will not budge, appending a query parameter such as ?v=2 makes the link a new URL to every platform, so it is fetched fresh. And if you are handing a site to a client, run this checker before handoff rather than after, because fixing a preview nobody has shared yet costs nothing.

Fix a wrong preview on your platform

Where the share title, description and image live in each builder, according to the vendor's own help pages. After every change: republish, then refresh the platform cache.

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 to 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.

More free tools for freelancers