Skip to content
Social preview toolkit

Social meta tag preview, 4 platforms

Preview of OpenGraph and Twitter Cards meta tags as rendered by Facebook, Twitter / X, LinkedIn and Discord. Paste the page <head> block (or full HTML): the tool extracts og:* and twitter:* meta tags and produces 4 cards representative of the real rendering, alongside a checklist of the essential attributes. Works on staging pages, behind login or on localhost: the analysis is based on the text you paste, not on a request to the URL.

How to test a page's OG

  1. 1

    Extract the HTML

    Open the page in your browser, Ctrl+U (Firefox/Chrome) or Cmd+Opt+U (Mac) to view source. Or use curl -A 'Mozilla/5.0' https://example.com/page from terminal. Copy the <head> block (or the whole document).

  2. 2

    Paste into the tool

    The tool processes the text you paste directly: useful for staging pages, pages behind login, localhost or anything still in development, where the official debuggers (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) require a publicly reachable URL.

  3. 3

    Preview 4 platforms

    'Preview' button produces 4 cards: Facebook (large summary card style), Twitter X (summary_large_image style), LinkedIn (compact card), Discord (left-border embed). Image proportions, title/description truncation, domain placement are faithful to the real rendering.

  4. 4

    Meta tag audit

    Below the cards: summary table with all og:* and twitter:* meta tags found, with 'present / missing' check for the essential ones (og:title, og:description, og:image, og:url, og:type). Useful for spotting missing tags that explain a share without preview.

Social preview, in practice

Preview based on what you paste. The tool analyzes the HTML block you pass in and produces 4 rendering cards. The advantage over an official debugger that fetches the URL is the ability to test pages that aren't public yet: staging branches behind authentication, localhost environments, draft pages not indexed. What you see in the 4 cards corresponds exactly to your current markup, free from interference by 302 redirects, CDN caches or server policies that differ between crawlers and browsers.

Four platforms, four sets of rules. Each social renders OG with slightly different rules, which is exactly why it's useful to see all four side by side. Facebook truncates the title at around 95 characters and the description at around 200; Twitter X uses the summary_large_image rendering only if the image is at least 600x315 and the twitter:card meta is set consistently; LinkedIn requires 1200x627 minimum for the large card render; Discord reads twitter:card and supports animated GIF and MP4. The 4 cards replicate these differences.

Audit of the essential tags. Below the cards, a checklist of the attributes that make the difference between a rich preview and a silent failure: og:title, og:description, og:image (absolute URL, at least 1200x630 for LinkedIn-grade), og:url (canonical), og:type (default website). Useful optional tags: twitter:card, twitter:image, twitter:site (@account handle), og:site_name, og:image:width and og:image:height (pre-allocation that avoids layout shift on Facebook).

Required tags per platform

Facebook
Required: og:title, og:type, og:image, og:url. Recommended: og:description, og:site_name, og:image:width + og:image:height. Image min 200x200, optimal 1200x630 (1.91:1).
Twitter / X
Required: twitter:card (summary | summary_large_image), twitter:title, twitter:description, twitter:image. Automatic fallback to og:* tags if twitter:* missing. Image: summary 200x200 min, summary_large_image 600x315 min.
LinkedIn
Uses og:* only (no LinkedIn-specific tags). Image min 1200x627 for the large card render. Below that resolution it renders a small card without prominent image. LinkedIn cache is aggressive: use Post Inspector to force a refresh.
Discord
Uses twitter:card + og:*. Supports animations: og:image can be GIF, og:video can be MP4 (autoplays muted). Custom embed color via meta theme-color. Title clickable if og:url is present.

Glossary

Technical terms used on this page, briefly explained.

OpenGraph #
Meta-tag protocol introduced by Facebook in 2010 to describe web resources in social shares. De facto standard, supported by nearly all modern social platforms. Full spec: ogp.me.
Twitter Cards #
Twitter-specific meta tag set (twitter:card, twitter:title...) to control stream rendering. Four types: summary, summary_large_image, app, player. Twitter X retains backward compatibility with the twitter: prefix.
summary_large_image #
Twitter Card type with a large image at top (600x315, ratio 1.91:1, similar to Facebook). Prefer over 'summary' for editorial content, large image increases CTR.
Image absolute URL #
og:image must be an absolute URL (https schema) to be fetched by the social crawler. Relative URLs fail silently. Ideally CDN-served to avoid cold cache on first share.
Crawler caching #
Facebook, Twitter, LinkedIn cache the first preview for ~24h-7d. To force refresh after meta tag changes: Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector. Discord doesn't cache (re-fetches every share).
Image dimensions hint #
og:image:width + og:image:height let the renderer pre-allocate the placeholder space avoiding layout shift. Particularly useful for Facebook which lazy-loads and displays the image only after prefetch.

Frequently asked questions

Can I test a live URL without copying the source?
No, the tool works on the text you paste. For analysis that starts from a URL, use the official platform debuggers: Facebook Sharing Debugger (developers.facebook.com/tools/debug/), Twitter Card Validator (cards-dev.twitter.com/validator), LinkedIn Post Inspector (linkedin.com/post-inspector/). All of them require a publicly accessible URL, and in many cases a developer-account login on the respective platform.
Are the cards pixel-perfect to the real rendering?
Approximately yes, but not pixel-perfect. Platforms periodically update their templates (font, padding, color); the 4 cards here are faithful to ~2024-2025 rendering. For pixel-perfect: use each platform's official debuggers.
What do I check if my OG image isn't shown?
Checklist: (1) og:image is an absolute https URL; (2) image >= 200x200 (Facebook) / 600x315 (Twitter); (3) image accessible to the crawler (no robots.txt block, no auth); (4) correct MIME type (image/jpeg, image/png, image/gif, image/webp); (5) cache busted (URL with ?v=N query string or refresh via the official debugger).
Does OG also work on WhatsApp / Telegram / Slack?
Yes. WhatsApp reads og:title + og:description + og:image. Telegram identical. Slack same but more compact preview. Discord also reads twitter:card. iMessage on iOS uses og:* with rich preview.
twitter:card vs og:type: what's the difference?
og:type states the resource type (article, website, video.movie, music.song); used by Facebook for layout and analytics. twitter:card states the Twitter card type (summary, summary_large_image); used only by Twitter X. Both present for maximum coverage.
Can I use SVG images as og:image?
No. Facebook / Twitter crawlers reject SVG (security: SVG can contain scripts). Use PNG, JPEG, GIF, WebP. For vector icons in rendering: convert SVG -> PNG 1200x630 before using as og:image.
I changed og:image but the old one still shows: bug?
Crawler cache. Facebook: developers.facebook.com/tools/debug/ -> 'Scrape again'. Twitter: cards-dev.twitter.com/validator -> 'Preview'. LinkedIn: linkedin.com/post-inspector -> 'Inspect'. Discord: no cache, just resend the link. Slack: re-share in channel (30 min cache).

Who builds these tools?

Maurizio Fonte, senior IT consultant with 20+ years in PHP, Laravel, unmanaged Linux infrastructure, applied cybersecurity and AI/LLM integration. Production backends, legacy code modernization, security audits, custom AI agents and MCP servers: the work behind every tool published here.

About Maurizio Fonte