# From HTML head to 4 social cards: also on staging and localhost

> Online OpenGraph and Twitter Cards preview free: see how Facebook, X, LinkedIn and Discord render your page. Audit of essential meta tags included.

Free in-browser tool (no upload): https://www.mauriziofonte.it/tools/social-meta-tag-preview

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. **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. **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. **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. **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, so it helps 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).

## Glossary

- **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).

---
Tool by Maurizio Fonte, senior backend engineer. All tools: https://www.mauriziofonte.it/tools/