Generatore Meta Tag Open Graph
Genera meta tag Open Graph e Twitter Card perfetti con anteprime social in tempo reale. Vedi esattamente come appare la tua pagina quando condivisa su Facebook, LinkedIn, Twitter, WhatsApp e Slack.
Tag Open Graph
Metadati base per la condivisione social
Lunghezza ideale: 50–60 caratteri. Mostrato come titolo in grassetto nelle card social.
Lunghezza ideale: 120–160 caratteri. Appare sotto il titolo nelle anteprime.
Consigliato: 1200×630 px (rapporto 1.91:1). Minimo 600×315 px. Max 8 MB.
Tag Twitter / X Card
Personalizza come appare il tuo link su Twitter
Per summary_large_image: minimo 300×157 px, rapporto 2:1. Max 5 MB.
Suggerimenti Debugger OG
Analisi e raccomandazioni in tempo reale
Meta Tag Generati
Protocollo Open Graph
Cos'è Open Graph?
Open Graph (OG) è un protocollo introdotto da Facebook che permette a qualsiasi pagina web di diventare un oggetto ricco in un social graph.
Aggiungendo tag <meta> nell'HTML del tuo <head>, controlli esattamente come appare il tuo contenuto quando condiviso sulle piattaforme social.
Questi tag definiscono il titolo, la descrizione, l'immagine e altre proprietà che le piattaforme social mostrano nelle loro card di anteprima del link. Senza di essi, le piattaforme indovinano - spesso prendendo l'immagine sbagliata o tagliando il testo in modo sgradevole.
Oggi, i tag OG sono supportati da Facebook, LinkedIn, WhatsApp, Slack, Discord, Pinterest e quasi ogni piattaforma che genera anteprime di link.
Perché è Importante
Perché l'Anteprima Social è Importante
Gli studi mostrano che i post con card social ottimizzate ricevono fino a 3× più clic rispetto ai URL nudi. Un'immagine e un titolo accattivanti possono fare la differenza tra un link ignorato e uno che diventa virale.
- Prime impressioni: La card di anteprima è la prima cosa che gli utenti vedono - prima di decidere di fare clic.
- Controllo del brand: Senza tag OG, le piattaforme scelgono immagini casuali, spesso prendendo qualcosa di imbarazzante o irrilevante.
- Segnali SEO: Tassi di clic più alti dalle piattaforme social migliorano indirettamente il tuo posizionamento nei motori di ricerca.
- Compatibilità piattaforme: Twitter, LinkedIn e WhatsApp si affidano tutti a questi tag per le anteprime ricche.
Linee Guida
Best Practice Open Graph
Usa Immagini 1200×630 px
La dimensione ideale dell'immagine OG è 1200×630 px (rapporto 1.91:1). Questo si rende perfettamente su tutte le piattaforme da Facebook a LinkedIn. Il minimo è 600×315 px.
Mantieni i Titoli Sotto i 60 Caratteri
Facebook mostra ~88 caratteri ma la leggibilità cala rapidamente. Punta a 50–60 caratteri per titoli che si leggono bene su tutte le piattaforme.
Imposta Sempre og:url
Includi sempre og:url per specificare l'URL canonico della tua pagina. Questo previene problemi di contenuto duplicato quando la stessa pagina è accessibile tramite URL multipli.
Usa summary_large_image su Twitter
Il valore twitter:card summary_large_image mostra un'anteprima a banner a tutta larghezza, generando significativamente più coinvolgimento rispetto alla variante con miniatura piccola.
Aggiorna le Cache delle Piattaforme
Dopo aver aggiornato i tag OG, cancella le anteprime memorizzate usando lo Sharing Debugger di Facebook e il Post Inspector di LinkedIn. Le piattaforme memorizzano le anteprime in modo aggressivo.
Scrivi Descrizioni Che Convertano
La tua descrizione OG dovrebbe essere una mini-presentazione: cosa offre la pagina e perché qualcuno dovrebbe fare clic. 120–155 caratteri. Evita riempitivi generici come "Benvenuto sul nostro sito".
Domande Comuni
Domande Frequenti
Qual è la differenza tra og:title e il tag HTML <title>?
<title> è usato dai motori di ricerca (Google) per la scheda del browser e i titoli dei risultati di ricerca. Il meta tag og:title è specificamente per le piattaforme social. Puoi - e spesso dovresti - usare valori diversi per ciascuno. Ad esempio, il titolo della tua pagina potrebbe includere il nome del tuo sito ("Best Practices | MioBlog"), mentre il tuo titolo OG potrebbe essere più descrittivo e accattivante ("10 Best Practice Open Graph Che Hanno Triplicato Il Nostro Traffico Social").
Perché Facebook non mostra la mia immagine OG aggiornata?
Ho bisogno di tag og:image e twitter:image separati?
og:image come fallback se non è specificato twitter:image. Tuttavia, Twitter e Facebook hanno raccomandazioni sulle dimensioni delle immagini leggermente diverse. Se vuoi ottimizzare per entrambi, usa tag separati. Twitter funziona meglio con un'immagine con rapporto 2:1 (1200×600 px), mentre Facebook preferisce 1.91:1 (1200×630 px).
Dove devo posizionare questi meta tag nel mio HTML?
<head> del tuo documento HTML, prima del tag di chiusura </head>. L'ordine di posizionamento non conta, ma la convenzione è di metterli dopo i tag <title> e <meta charset>.
og:description influisce sul posizionamento SEO di Google?
<meta name="description"> per gli snippet di ricerca, non og:description. Tuttavia, una descrizione OG accattivante può aiutare indirettamente la SEO aumentando le condivisioni social e i tassi di clic dai social media, che possono generare segnali di traffico che Google considera. È buona norma impostare entrambi i tag.
Cos'è og:type e quale valore dovrei usare?
og:type dichiara il tipo di contenuto che rappresenta la tua pagina. I valori comuni sono: website (per homepage e pagine generali), article (per post di blog e articoli di notizie - abilita tag aggiuntivi come l'ora di pubblicazione), video.movie (per contenuti video) e product (per e-commerce). Usa website in caso di dubbio.
Posso generare tag OG per pagine dinamiche (es., pagine prodotto)?
og:title, og:description e og:image dinamicamente. Questo strumento ti aiuta a prototipare la struttura corretta dei tag, che puoi poi modellare nel tuo codice lato server.