Social Media Post Preview

How Social Media Platforms Display Your Links

When you share a link on social media, the platform sends a crawler to fetch your page, parse its meta tags, and build a visual preview card. Each platform has its own crawler, layout rules, character limits, and image handling. A link that looks perfect on Facebook might appear broken on Twitter or show no image at all on LinkedIn. This tool shows you exactly what users will see on each platform before you hit publish.

How Social Media Crawlers Work

Every platform operates its own crawler that behaves differently from a regular browser. These crawlers send HTTP GET requests with specific user agents, and most do not execute JavaScript. If your meta tags are injected client-side by a framework like React or Vue, most crawlers will not see them.

Google is the notable exception - Googlebot can render JavaScript, but with a delay. For social sharing, assume no JS execution. If you use a single-page application framework, you need server-side rendering (SSR) or a prerendering service to ensure crawlers see your meta tags.

Google Search Results

Google displays your <title> tag as a blue clickable link (~60 characters before truncation), followed by a URL breadcrumb and the meta description (~155 characters). Google frequently rewrites both if it determines its version better matches the user's query. Pages with concise, accurate titles that closely match page content get rewritten less often. Stuffing keywords into titles actually increases the chance of rewriting.

Facebook

Facebook reads og:title, og:description, og:image, and og:url. It displays the domain in uppercase above the title, the image at 1.91:1 aspect ratio, and truncates descriptions at roughly 200 characters. Facebook caches previews aggressively - once fetched, the card is stored for about 30 days. Use the Sharing Debugger to scrape a fresh version after updating tags.

If og:image is missing, Facebook attempts to find the largest image on the page. This fallback is unreliable - it might pick a logo, an ad, or a decorative element. Always set og:image explicitly.

Twitter / X

Twitter supports two card types via the twitter:card meta tag. The summary_large_image type shows a wide image above the text, identical in layout to Facebook. The summary type shows a small 144x144 square thumbnail to the left. Without twitter:card set, Twitter may not show any preview at all - even if Open Graph tags are present.

Twitter reads its own tags first (twitter:title, twitter:description, twitter:image) and falls back to Open Graph equivalents. In practice, most sites only set twitter:card and rely on OG tags for everything else. Use our Open Graph Generator to create both sets of tags at once.

LinkedIn

LinkedIn reads Open Graph tags and displays previews similar to Facebook, with the image on top and the domain shown below the title. LinkedIn truncates titles at roughly 150 characters and descriptions at about 100. LinkedIn's crawler is the most conservative - it follows redirects slowly and times out faster than others. Pages behind authentication walls or with slow server response times often show blank previews on LinkedIn.

LinkedIn caches previews and provides a Post Inspector tool to force a refresh.

Discord, Slack, and Messaging Apps

Discord builds rich embeds from Open Graph tags. It supports og:site_name as a header above the title and shows a coloured sidebar. Discord also reads theme-color meta tags to set the embed accent colour - a nice touch most platforms ignore.

Slack unfurls links automatically in channels. It reads OG tags and displays the site name, title, description, and image in a compact format. Slack caches unfurls per workspace, so different workspaces may show different versions if you update tags between shares.

Telegram, WhatsApp, and iMessage all generate link previews from OG tags. Telegram shows a large image with title and description. WhatsApp displays a smaller thumbnail preview. iMessage on iOS generates a rich preview with the image and title. All three cache previews on their servers - there is no debug tool to force a refresh. You simply have to wait.

The Tag Fallback Chain

When a platform cannot find its preferred tag, it falls back through a chain. Understanding this chain helps you decide which tags are truly required versus optional.

The practical minimum: set og:title, og:description, og:image, og:url, and twitter:card. These five tags cover every major platform. Check your tags with our Meta Tag Analyser to verify nothing is missing.

Image Specifications by Platform

Getting images right is the most common source of broken previews. Each platform has different requirements for dimensions, aspect ratios, and file sizes. Images that are too small get rejected entirely, while oversized images get cropped unpredictably.

The safe choice for all platforms: 1200 x 630 pixels, JPEG or PNG, under 1 MB. This single image works everywhere. Keep important content (text, logos) centred and away from edges - platforms crop differently, especially on mobile.

Dynamic OG Tags for Single-Page Applications

If your site is built with React, Vue, Angular, or another client-side framework, your meta tags are likely injected by JavaScript after the page loads. Since social media crawlers do not execute JavaScript, they see an empty <head> with no OG tags. Your link previews will be blank or show generic fallbacks.

There are three solutions, in order of preference:

1. Server-side rendering (SSR) - frameworks like Next.js, Nuxt, or SvelteKit render the full HTML on the server, including meta tags. This is the most reliable approach.
2. Static site generation (SSG) - pre-build pages at deploy time. Works well for content that does not change per request.
3. Prerendering services - tools like Prerender.io detect crawler user agents and serve a pre-rendered snapshot. A pragmatic solution for existing SPAs that cannot migrate to SSR.

Platform-Specific Advanced Features

Twitter App Cards allow you to link directly to a mobile app with twitter:app:id:iphone and twitter:app:id:googleplay meta tags. When a user views the card on mobile, they see an install or open button instead of a website link.

Pinterest Rich Pins read OG tags plus additional Schema.org markup to show enhanced information. Product pins display price and availability. Recipe pins show ingredients and cooking time. Rich Pins require validation through Pinterest's developer tools before they activate.

Discord embeds support meta name="theme-color" to set the coloured sidebar on link previews. A small detail that makes your links visually distinctive in chat.

Common Mistakes That Break Previews

• Relative image URLs - og:image must be an absolute URL starting with https://. A relative path like /images/og.jpg will be ignored by every platform.
• HTTP image on HTTPS page - mixed content. Most platforms will refuse to load an HTTP image. Always use HTTPS for og:image.
• Image behind authentication - if your image URL requires cookies or auth headers, crawlers cannot access it. Use publicly accessible URLs.
• Slow server response - crawlers have tight timeouts (3-5 seconds). If your server takes too long to respond, the crawler gives up and shows a text-only link.
• Forgetting twitter:card - Open Graph tags alone are not enough for Twitter. Without this tag, Twitter often shows no preview at all.
• Same tags on every page - using identical og:title and og:image across your entire site. Every page should have unique, descriptive tags.