Generatore di Meta Tag OG Online
Genera i tag Open Graph e Twitter Card. Visualizza in anteprima come apparira il tuo link sui social media.
<!-- Open Graph --> <meta property="og:title" content="My Website — Main Title"> <meta property="og:description" content="My website description for social media."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="My Site"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Website — Main Title"> <meta name="twitter:description" content="My website description for social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Perche usarlo
Controlla come appare il tuo sito quando viene condiviso sui social
Anteprima reale
Vedi esattamente come apparira il tuo link prima di pubblicarlo.
Tutte le piattaforme
Facebook, LinkedIn, Twitter, WhatsApp e Telegram in un unico passaggio.
Codice pronto da copiare
Tag HTML generati correttamente. Incollali nell'head e il gioco e fatto.
Nessuna registrazione
Genera e testa i tuoi meta tag senza creare un account.
Come funziona
Tre passaggi, senza complicazioni
Inserisci i dati della tua pagina
Compila titolo, descrizione, URL e immagine della pagina. Sono le informazioni che gli utenti vedranno quando il tuo link viene condiviso.
Scegli i social network
Seleziona se hai bisogno di Open Graph (Facebook, LinkedIn, WhatsApp), Twitter Card o entrambi. Personalizza i campi specifici di ciascuna piattaforma.
Copia il codice HTML
Copia i meta tag generati e incollali all'interno dell'head del tuo HTML. Verifica il risultato con Facebook Debugger o Twitter Card Validator.
FAQ
Hai delle domande?
Open Graph Protocol e un protocollo web creato da Facebook (presentato alla conferenza F8 nel 2010) che consente a qualsiasi pagina web di diventare un oggetto ricco nel grafo sociale. Includendo i meta tag og: nell'head del tuo HTML, controlli esattamente quale titolo, descrizione e immagine appaiono quando qualcuno condivide il tuo link su Facebook, LinkedIn, WhatsApp, Telegram e sulla maggior parte delle piattaforme social. Senza questi tag, le piattaforme tentano di indovinare il contenuto con risultati imprevedibili.
Le quattro proprieta di base obbligatorie sono: og:title (titolo dell'oggetto), og:type (tipo di oggetto: website, article, product...), og:image (URL dell'immagine di anteprima) e og:url (URL canonico della pagina). Proprieta opzionali ma importanti: og:description, og:site_name, og:locale (ad es. it_IT), og:image:width e og:image:height (per evitare reflow durante il caricamento). Per gli articoli, og:type=article abilita proprieta aggiuntive: article:author, article:published_time, article:section.
Facebook dispone dello Sharing Debugger (developers.facebook.com/tools/debug) che mostra esattamente come apparira il tuo URL quando viene condiviso e permette di forzare un aggiornamento della cache. Twitter ha il Card Validator (cards-dev.twitter.com/validator). LinkedIn ha il Post Inspector (linkedin.com/post-inspector). Per lo sviluppo locale, strumenti come ngrok o localtunnel espongono il tuo localhost in modo che i debugger esterni possano accedervi. Ricorda che le piattaforme memorizzano i metadati nella cache: se modifichi i tag, usa gli strumenti di debug per invalidare la cache.
Le dimensioni consigliate da Facebook e dalla maggior parte delle piattaforme sono 1200x630 pixel (rapporto 1.91:1). Questa risoluzione e sufficiente per i display Retina e si adatta bene a tutte le dimensioni di anteprima. La dimensione minima accettata e 200x200 px. Facebook rifiuta le immagini inferiori a 200x200 o superiori a 8 MB. Twitter richiede un minimo di 300x157 px per summary_large_image e un massimo di 4096x4096 px con un limite di 5 MB. Per WhatsApp, l'immagine dovrebbe essere quadrata (1:1) per le anteprime nelle chat di gruppo.
Open Graph (og:) e un protocollo aperto adottato dalla maggior parte delle piattaforme social. Twitter Cards (twitter:) sono specifici di Twitter/X e offrono tipi aggiuntivi: summary, summary_large_image, app e player. Se definisci i tag og:, Twitter li usa come fallback in assenza di tag twitter:. La raccomandazione e di definire entrambi gli insiemi per la massima compatibilita. I campi chiave di Twitter Card sono twitter:card (tipo di card), twitter:site (account Twitter del sito), twitter:creator (account dell'autore) e twitter:image (puo differire da og:image per ottimizzare le dimensioni).
Open Graph Protocol: storia, Schema.org e crawler dei social media
Open Graph Protocol fu presentato da Facebook alla conferenza F8 il 21 aprile 2010. L'obiettivo era trasformare qualsiasi pagina web in un oggetto di primo livello nel grafo sociale di Facebook, analogamente a come le pagine di artisti, film e luoghi disponevano gia di una struttura dati ricca. Il protocollo si ispiro a RDFa (Resource Description Framework in Attributes), un'estensione HTML per i dati strutturati, ma semplificate per un'adozione di massa. Il nome e il dominio ogp.me vennero registrati lo stesso giorno. Dal suo lancio, Open Graph fu adottato da LinkedIn (2011), da Twitter come fallback (2012), da WhatsApp (2013) e praticamente da ogni piattaforma social e di messaggistica rilevante.
La relazione tra Open Graph e Schema.org e complementare ma a volte fonte di confusione. Schema.org (lanciato nel 2011 da Google, Bing e Yahoo) definisce un vocabolario di dati strutturati per i motori di ricerca, implementato tramite JSON-LD (raccomandato), Microdata o RDFa. Open Graph e ottimizzato per le anteprime dei link sui social network. Una pagina dovrebbe avere entrambi: Schema.org per la SEO e i Featured Snippet, e Open Graph per la condivisione social. Google usa og:title e og:description come segnali secondari per il proprio indice, ma JSON-LD Schema.org ha maggiore peso. I crawler social (facebookexternalhit, Twitterbot, LinkedInBot) leggono solo i tag og:, non il JSON-LD.
I crawler dei social media hanno caratteristiche tecniche importanti per gli sviluppatori. Lo user-agent facebookexternalhit/1.1 indica che Facebook sta elaborando l'URL per generare un'anteprima. Questi crawler NON eseguono JavaScript: elaborano solo l'HTML statico del server. Cio significa che le app React/Vue/Angular con Client-Side Rendering (CSR) senza SSR o SSG non avranno metadati OG corretti, poiche i meta tag vengono generati dinamicamente lato client. La soluzione e il Server-Side Rendering (Next.js, Nuxt), la Static Site Generation, o un servizio di prerendering (Prerender.io, rendertron) che serve HTML pre-renderizzato ai bot dei social media.