Open Graph meta tags
Open Graph è un protocollo aperto sviluppato da Facebook che consente di controllare il modo in cui i contenuti web vengono visualizzati quando condivisi sui social network. Con pochi meta tag puoi definire titolo, descrizione, immagine in anteprima e altri dettagli mostrati nei post di Facebook, LinkedIn, WhatsApp e Telegram. Si tratta dello standard de facto per le anteprime social.
A cosa serve Open Graph
Quando un'utente incolla un link, il social legge i meta tag og:* per generare l'anteprima visiva. Senza Open Graph le piattaforme ricadono su euristiche imprecise: immagini sbagliate, titoli generici o anteprime vuote. Configurare i meta tag aumenta il click-through rate e dà più professionalità al brand, oltre a controllare con precisione la prima impressione che gli utenti ricevono.
I tag essenziali
Per ogni pagina sono necessari almeno cinque tag: og:title, og:description, og:image, og:url e og:type. Il tipo più comune è website per pagine generiche e article per i contenuti del blog. L'immagine dovrebbe essere di almeno 1200x630 pixel per garantire qualità su tutti i dispositivi e mantenere il rapporto 1.91:1 raccomandato da Facebook.
Open Graph per articoli e prodotti
Per i blog post il tipo article abilita proprietà specifiche: article:published_time, article:modified_time, article:author, article:section, article:tag. Per ecommerce il tipo product offre og:price:amount, og:price:currency, og:availability. Questi tag arricchiscono le anteprime su Facebook e LinkedIn con informazioni contestuali aggiuntive, particolarmente utili per ottenere click qualificati. Implementarli correttamente comunica professionalità del brand e aiuta i social a presentare il contenuto nel formato più adatto al tipo specifico di pagina condivisa.
Multiple immagini e dimensioni
Puoi dichiarare più og:image per offrire al social diverse opzioni. Subito dopo og:image puoi specificare og:image:width, og:image:height, og:image:alt e og:image:type per fornire metadati extra. og:image:secure_url offre una URL https alternativa quando og:image è http. Per video usa og:video, og:video:width, og:video:height e og:video:type. Una configurazione completa massimizza l'impatto visivo della condivisione e l'accessibilità del contenuto multimediale.
Open Graph e dynamic preview
Per blog e CMS dinamici, i tag og:* devono essere generati dinamicamente in base al contenuto della pagina. WordPress con Yoast SEO o RankMath gestisce questo automaticamente. Per framework custom: estrai titolo, descrizione e immagine in evidenza dal modello dati e inseriscili nel template. Per ecommerce ricava og:image dalle immagini prodotto e og:type product. Per servizi con utenti registrati, ogni profilo dovrebbe avere og:type profile con first_name e last_name. La dinamicità di questi tag è ciò che li rende potenti: ogni pagina condivisa appare con anteprima personalizzata e accattivante.
Test e debugging
Il Facebook Sharing Debugger (developers.facebook.com/tools/debug) è lo strumento principale per verificare e refreshare la cache. Inserisci l'URL, clicca "Scrape Again", e vedi esattamente come Facebook vedrà la pagina con possibili warning. Linkedin Post Inspector funziona similarmente. Per Telegram puoi testare aprendo il link in una chat (la preview appare in tempo reale). Per debugging avanzato, ispeziona i tag con curl -A "facebookexternalhit" e confronta con quello che vede il browser per identificare problemi server-side che alterano la risposta solo per i crawler social.
Strumenti utili
Oltre al Facebook Sharing Debugger, esistono strumenti per generare e testare Open Graph: OpenGraph.xyz genera tag base da URL, Open Graph Protocol Tester analizza la sintassi, Metatags.io offre anteprime per Facebook, LinkedIn, Twitter, Slack simultaneamente. Per generazione dinamica di immagini OG (es. articoli con titolo overlay) usa Vercel OG, Cloudinary Overlays, Bannerbear API. Genera al volo immagini personalizzate per ogni pagina che condividi, massimizzando l'impatto visivo senza dover crearle manualmente. Pattern usato da Medium, Dev.to, GitHub per generare card uniche per ogni post o repository.
Procedura passo-passo
- Nel tag <head> aggiungi <meta property="og:title" content="Titolo della pagina">.
- Inserisci <meta property="og:description" content="Riassunto coinvolgente"> con 60-90 caratteri.
- Specifica l'immagine con <meta property="og:image" content="https://esempio.it/img.jpg"> in URL assoluto.
- Aggiungi <meta property="og:url" content="https://esempio.it/pagina"> con l'URL canonico.
- Imposta <meta property="og:type" content="website"> oppure article, product, video.
- Indica <meta property="og:locale" content="it_IT"> per la lingua.
- Verifica l'anteprima con il Facebook Sharing Debugger e il LinkedIn Post Inspector.
Errori comuni e come risolverli
- Immagine troppo piccola: Facebook richiede minimo 200x200 px e raccomanda 1200x630 per anteprime di qualità; carica immagini in alta risoluzione.
- URL relativo in og:image: i social non risolvono path relativi; usa sempre URL assoluto con https.
- Cache social non aggiornata: dopo modifiche, forza il refresh con il Sharing Debugger di Facebook.
- og:type errato: scegliere il tipo giusto (article per blog, product per ecommerce) migliora la presentazione.
- Description troppo lunga: oltre 200 caratteri viene troncata; mantieni il testo conciso e attraente.
Domande frequenti
D: Open Graph funziona anche su Twitter?
R: Parzialmente. Twitter ha Twitter Card, ma fa fallback su Open Graph se mancano i tag specifici.
D: Quale formato immagine usare?
R: JPG o PNG sotto i 5MB. Le proporzioni 1.91:1 (es. 1200x630) sono ideali per Facebook.
D: Posso avere più og:image?
R: Sì, puoi dichiarare più immagini e il social sceglierà o le mostrerà come carosello.
D: Devo aggiornare il cache dopo le modifiche?
R: Sì, usa il Sharing Debugger di Facebook per forzare il refresh quando aggiorni l'immagine o il titolo.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.