Generatore di meta tag Open Graph

I tag Open Graph sono piccoli frammenti di HTML che determinano l'aspetto della tua pagina quando viene condivisa su Facebook, LinkedIn, Slack, Discord o X (Twitter). Inserisci qui sotto titolo, descrizione, URL, immagine e alcune opzioni, guarda l'anteprima della scheda aggiornarsi all'istante e copia i tag <meta> generati direttamente nel <head> della tua pagina. Tutto avviene nel browser — nulla viene inviato a un server.

Che cos'è questo strumento?

Open Graph è un protocollo, creato originariamente da Facebook, che permette a qualsiasi pagina web di descrivere se stessa tramite un piccolo insieme di tag <meta property="og:..."> inseriti nel <head> dell'HTML. Quando qualcuno incolla il tuo link in un'app social, un client di chat o uno strumento di messaggistica, quell'app legge questi tag per costruire la scheda di anteprima — titolo, descrizione e immagine in miniatura — invece di indovinare a partire dal contenuto della pagina.

Twitter (X) utilizza un insieme di tag correlato ma separato, <meta name="twitter:...">, per controllare specificamente come viene mostrata l'anteprima di un link sulla propria piattaforma. La maggior parte dei siti imposta entrambi: i tag Open Graph per un'ampia compatibilità e i tag Twitter Card per perfezionare l'anteprima su X (ad esempio scegliendo una scheda con immagine grande invece di un piccolo riepilogo).

Senza questi tag, un link condiviso non mostra alcuna anteprima, oppure la piattaforma cerca di indovinare un titolo e un'immagine dal contenuto grezzo della pagina — spesso scegliendo il titolo sbagliato, un'immagine casuale in linea, o nulla del tutto. Impostare esplicitamente og:title, og:description e og:image ti dà il pieno controllo su come viene presentato il tuo contenuto prima ancora che qualcuno clicchi.

Perché usarlo?

Anteprima live — vedi esattamente come apparirà la scheda di condivisione mentre digiti, prima ancora di pubblicare qualsiasi cosa.
Genera sia i tag Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) sia i tag Twitter Card in un solo passaggio.
Copre i campi che le piattaforme leggono davvero: titolo, descrizione, URL canonico, immagine, nome del sito, tipo di contenuto e stile della scheda Twitter.
Funziona interamente lato client — titolo, descrizione e URL non lasciano mai il tuo browser.
Gratuito, senza login, senza limiti — copia il risultato e incollalo nel tuo HTML.

Come si usa

Inserisci il titolo della tua pagina e una breve descrizione (punta a meno di ~60 caratteri per il titolo, ~155–160 per la descrizione).
Inserisci l'URL canonico della pagina e l'URL assoluto dell'immagine di anteprima (gli URL delle immagini devono essere completi, ad esempio https://example.com/immagine.jpg, non un percorso relativo).
Facoltativamente imposta il nome del sito, scegli un og:type (website, article, product, profile, video, music) e un tipo di Twitter Card (summary o summary_large_image).
Controlla la scheda di anteprima live per verificare che titolo, descrizione e immagine si abbinino bene.
Clicca su "Copia" e incolla i tag <meta> generati nel <head> della tua pagina, subito prima del tag di chiusura </head>.

Esempio

Input

Titolo: "10 strumenti gratuiti per sviluppatori che userai davvero"
Descrizione: "Una selezione di strumenti da browser per JSON, regex, UUID e altro — nessuna installazione richiesta."
URL: https://example.com/blog/dev-tools
Immagine: https://example.com/images/dev-tools-cover.jpg

Risultato

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Nel risultato compaiono solo i campi che compili: lasciare vuoto il nome del sito omette semplicemente og:site_name dall'output.

Errori comuni da evitare

Non impostare affatto og:image — senza di essa, la maggior parte delle piattaforme non mostra alcuna immagine di anteprima oppure ne prende una casuale dalla pagina, il che di solito sembra rotto o poco professionale.
Usare un percorso di immagine relativo come /images/cover.jpg invece di un URL completo come https://example.com/images/cover.jpg — i crawler social generalmente non riescono a risolvere i percorsi relativi.
Proporzioni dell'immagine sbagliate — un'immagine quadrata o verticale viene ritagliata in modo scomodo quando la piattaforma la forza nel formato orizzontale 1,91:1; progetta sempre la tua immagine di condivisione vicino a 1200×630.
Titoli o descrizioni che vengono troncati — mantieni og:title sotto ~60 caratteri e og:description sotto ~155–160 caratteri così da non venire tagliati con i puntini di sospensione sulla maggior parte delle piattaforme.
Dimenticare di aggiornare le anteprime in cache — dopo aver modificato i tag og su una pagina già pubblicata, la vecchia anteprima può rimanere nella cache di Facebook o LinkedIn finché non forzi manualmente una nuova scansione con i loro strumenti di debug.

Dove viene usato ciascun tag

og:title, og:description e og:image sono i tre tag che quasi tutte le piattaforme leggono per costruire un'anteprima. og:url indica ai crawler il link canonico a cui associare l'anteprima, il che è importante se lo stesso contenuto è raggiungibile tramite più URL. og:site_name mostra una piccola etichetta (come il nome della pubblicazione o del brand) sopra il titolo su alcune piattaforme, come Facebook.

og:type cambia il tipo di oggetto che la pagina rappresenta per i crawler che supportano il modello di oggetti più ricco di Open Graph — ad esempio article abilita og:article:published_time e og:article:author sulle piattaforme che le leggono, anche se la maggior parte delle anteprime social ignora questi campi extra e usa solo il trio principale titolo/descrizione/immagine.

twitter:card controlla il layout specificamente su X: summary mostra una piccola miniatura quadrata accanto al testo, mentre summary_large_image mostra un'immagine a larghezza piena sopra il testo — quest'ultima è quasi sempre la scelta migliore per contenuti con un'immagine di copertina significativa.

Domande frequenti

Che dimensioni dovrebbe avere la mia og:image?

1200×630px è la dimensione consigliata — abbastanza grande per schermi ad alta densità e vicina al rapporto d'aspetto di circa 1,91:1 usato da Facebook, LinkedIn e X per il ritaglio. Mantieni il file sotto i 5–8MB, usa JPG o PNG e assicurati che l'URL dell'immagine sia assoluto e completo, non un percorso relativo — la maggior parte dei crawler non risolve correttamente i percorsi relativi.

Perché la mia anteprima non compare quando condivido il link?

Le cause più comuni sono: og:image mancante, URL dell'immagine relativo invece che assoluto, crawler bloccato dal robots.txt, oppure la piattaforma mostra una versione in cache di una vecchia anteprima. Facebook e LinkedIn mettono entrambi in cache le anteprime in modo aggressivo — usa il Sharing Debugger di Facebook o il Post Inspector di LinkedIn per forzare una nuova scansione dopo aver aggiornato i tag.

Qual è la differenza tra i tag og: e twitter:?

I tag og: (og:title, og:description, og:image, ecc.) fanno parte dello standard Open Graph, letto da Facebook, LinkedIn, Slack, Discord, WhatsApp e dalla maggior parte delle altre piattaforme. I tag twitter: sono il formato proprietario di Twitter/X. Se twitter:title o twitter:image mancano, X ricade automaticamente sul tag og: equivalente — ma impostare entrambi esplicitamente ti dà più controllo, incluso scegliere summary_large_image per un'immagine di anteprima grande.

Quale og:type dovrei usare?

"website" è la scelta predefinita più sicura per la maggior parte delle pagine, incluse homepage e contenuti generici. Usa "article" per post di blog e notizie (sblocca tag aggiuntivi specifici per gli articoli, come la data di pubblicazione), "product" per pagine e-commerce e "profile" per pagine di profilo personale o utente. Il tipo influisce soprattutto su quali proprietà Open Graph aggiuntive sono valide, non sull'aspetto base della scheda di anteprima.

Questo strumento memorizza o invia i miei dati da qualche parte?

No. Tutta la generazione avviene localmente nel tuo browser tramite normale JavaScript. Nulla di ciò che scrivi viene trasmesso, registrato o memorizzato — chiudendo la scheda tutto viene cancellato.