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.
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).
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.
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.
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 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 fanno la differenza fra una preview ricca e un fallimento silenzioso: 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).
og:title, og:type, og:image, og:url. Raccomandati: og:description, og:site_name, og:image:width + og:image:height. Image min 200x200, optimal 1200x630 (1.91:1).twitter:card (summary | summary_large_image), twitter:title, twitter:description, twitter:image. Fallback automatico ai tag og:* se twitter:* mancanti. Image: summary 200x200 min, summary_large_image 600x315 min.Termini tecnici usati in questa pagina, spiegati in due righe.
twitter:. 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. 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.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.Maurizio Fonte, consulente IT senior con oltre 20 anni di esperienza in PHP, Laravel, infrastrutture Linux, cybersecurity e integrazione AI/LLM in azienda. Backend di produzione, modernizzazione di codice legacy, audit di sicurezza, agenti AI e MCP server custom: il lavoro che sta dietro a questi strumenti.
Conosci Maurizio Fonte