# Da HTML head a 4 card social: anche su staging e localhost

> Anteprima online di meta tag OpenGraph e Twitter Cards: vedi come Facebook, X, LinkedIn e Discord renderizzano la tua pagina. Audit dei tag essenziali.

Strumento gratuito nel browser (nessun upload): https://www.mauriziofonte.it/strumenti/anteprima-meta-tag-og-social

Anteprima dei meta tag **OpenGraph** e **Twitter Cards** come li renderizzano **Facebook**, **Twitter / X**, **LinkedIn** e **Discord**. Incolla il blocco `<head>` della pagina (o l'HTML completo): il tool estrae i meta tag `og:*` e `twitter:*` e produce 4 card rappresentative del rendering reale, accanto a una checklist degli attributi essenziali. Funziona anche su pagine in staging, dietro login o in localhost: l'analisi è basata sul testo che incolli, non su una richiesta verso l'URL.

## Come testare l'OG di una pagina

1. **Estrai l'HTML** - Apri la pagina nel browser, Ctrl+U (Firefox/Chrome) o Cmd+Opt+U (Mac) per visualizzare il source. Oppure usa `curl -A 'Mozilla/5.0' https://example.com/pagina` da terminale. Copia il blocco `<head>` (o tutto).
2. **Incolla nel tool** - Il tool elabora direttamente il testo che incolli: utile per pagine in staging, dietro login, in localhost o ancora in fase di sviluppo, dove i debugger ufficiali (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) richiedono URL pubblicamente raggiungibile.
3. **Anteprima 4 platform** - Bottone 'Anteprima' produce 4 card: Facebook (large summary card style), Twitter X (summary_large_image style), LinkedIn (compact card), Discord (left-border embed). Le proporzioni dell'immagine, il troncamento di titolo/descrizione, la posizione del dominio sono fedeli al rendering reale.
4. **Audit dei meta tag** - Sotto le card: tabella riassuntiva con tutti i meta tag og:* e twitter:* trovati, con check 'presente / mancante' per quelli essenziali (og:title, og:description, og:image, og:url, og:type). Utile per spotting di tag mancanti che spiegano un share senza preview.

## Anteprima social, in pratica

**Anteprima esatta su quello che incolli.** Il tool analizza il blocco HTML che gli passi e produce 4 card di rendering. Il vantaggio rispetto a un debugger ufficiale che fa fetch sull'URL è la possibilità di testare pagine non ancora pubbliche: branch in staging dietro autenticazione, ambienti localhost, draft non indicizzati. Quello che vedi nelle 4 card corrisponde esattamente al markup che hai oggi, senza interferenze da redirect 302, cache CDN o policy server diverse fra crawler e browser.

**Quattro platform, quattro regole.** Ogni social rende OG con regole leggermente diverse, ed è proprio per questo che vedere tutte e quattro insieme è utile. Facebook tronca il titolo a circa 95 caratteri e la descrizione a circa 200; Twitter X usa il rendering `summary_large_image` solo se l'immagine è almeno 600x315 e il meta `twitter:card` è impostato in modo coerente; LinkedIn richiede 1200x627 minimo per il render large card; Discord legge `twitter:card` e supporta animati GIF e MP4. Le 4 card replicano queste differenze.

**Audit dei tag essenziali.** Sotto le card, una checklist degli attributi che decidono se la preview esce ricca o fallisce in silenzio: `og:title`, `og:description`, `og:image` (URL assoluto, almeno 1200x630 per LinkedIn-grade), `og:url` (canonical), `og:type` (default `website`). Tag opzionali utili: `twitter:card`, `twitter:image`, `twitter:site` (handle `@account`), `og:site_name`, `og:image:width` e `og:image:height` (preallocazione che evita layout shift su Facebook).

## Glossario

- **OpenGraph**: Protocol meta tag introdotto da Facebook nel 2010 per descrivere risorse web in social shares. Standard de facto, supportato da quasi tutte le piattaforme social moderne. Specifica completa: ogp.me.
- **Twitter Cards**: Set di meta tag specifici di Twitter (twitter:card, twitter:title...) per controllare il rendering nello stream. Quattro tipi: summary, summary_large_image, app, player. Twitter X mantiene retrocompatibilità con il prefix `twitter:`.
- **summary_large_image**: Tipo Twitter Card con immagine grande in alto (600x315 ratio 1.91:1, simile a Facebook). Da preferire a 'summary' per content editoriale, image grande aumenta CTR.
- **Image absolute URL**: og:image deve essere URL assoluto (con schema https) per essere fetchato dal crawler social. URL relativi falliscono silenziosamente. Idealmente CDN-served per evitare cold cache su prima share.
- **Crawler caching**: Facebook, Twitter, LinkedIn cachano la prima preview per ~24h-7gg. Per forzare refresh dopo cambio meta tag: Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector. Discord non cacha (re-fetch ogni share).
- **Image dimensions hint**: `og:image:width` + `og:image:height` permettono al renderer di pre-allocare lo spazio del placeholder evitando layout shift. Specialmente utile per Facebook che fa lazy-load e mostra l'image solo dopo prefetch.

## Domande frequenti

### Posso testare un URL live senza copiare il sorgente?

No, il tool funziona sul testo che incolli. Per analisi che parte da un URL servono i debugger ufficiali delle piattaforme: Facebook Sharing Debugger (`developers.facebook.com/tools/debug/`), Twitter Card Validator (`cards-dev.twitter.com/validator`), LinkedIn Post Inspector (`linkedin.com/post-inspector/`). Tutti richiedono URL pubblicamente accessibile, e in molti casi anche un login al developer account della rispettiva piattaforma.

### Le card sono pixel-perfect identiche al render reale?

Approssimativamente sì, ma non pixel-perfect. Le platform aggiornano periodicamente i template (font, padding, color); le 4 card qui sono fedeli al rendering ~2024-2025. Per pixel-perfect: usa i debugger ufficiali di ogni platform.

### Cosa controllo se la mia OG image non viene mostrata?

Checklist: (1) og:image è URL assoluto https; (2) image >= 200x200 (Facebook) / 600x315 (Twitter); (3) image accessibile via crawler (no robots.txt block, no auth); (4) MIME type corretto (image/jpeg, image/png, image/gif, image/webp); (5) cache busted (URL con query string ?v=N o pulizia con debugger ufficiale).

### OG funziona anche su WhatsApp / Telegram / Slack?

Sì. WhatsApp legge og:title + og:description + og:image. Telegram identico. Slack idem ma con preview più compatta. Discord legge anche twitter:card. iMessage Apple usa og:* con preview ricca su iOS.

### twitter:card vs og:type: che differenza?

`og:type` dice il tipo di risorsa (article, website, video.movie, music.song); usato da Facebook per layout e analytics. `twitter:card` dice il tipo di card Twitter (summary, summary_large_image); usato solo da Twitter X. Entrambi presenti per coverage massima.

### Posso usare immagini SVG come og:image?

No. Crawler Facebook / Twitter rifiutano SVG (security: SVG può contenere script). Usa PNG, JPEG, GIF, WebP. Per icon vettoriali nel rendering: converti SVG -> PNG 1200x630 prima di mettere come og:image.

### Ho cambiato og:image ma il vecchio appare ancora: bug?

Cache crawler. Facebook: developers.facebook.com/tools/debug/ -> 'Scrape again'. Twitter: cards-dev.twitter.com/validator -> 'Preview'. LinkedIn: linkedin.com/post-inspector -> 'Inspect'. Discord: nessun cache, basta riinviare il link. Slack: ricondividi in canale (cache 30min).

---
Uno strumento di Maurizio Fonte, senior backend engineer. Tutti gli strumenti: https://www.mauriziofonte.it/strumenti/