Cosa Sono i Tag Open Graph? Una Guida alle Anteprime dei Link e alla Condivisione Sociale

Quando condividi un link su Facebook, LinkedIn, Slack o Twitter, solitamente appare una scheda di anteprima — con un titolo, una descrizione e un'immagine. Queste anteprime non sono magia. Sono controllate dai tag Open Graph (OG) nell'HTML della tua pagina.

Fare bene i tag Open Graph significa che i tuoi link condivisi hanno un aspetto professionale e ottengono più clic. Farli male significa anteprime brutte, immagini mancanti o testo generico di fallback.

Cos'è il Protocollo Open Graph?

Open Graph è un protocollo creato da Facebook nel 2010 che permette alle pagine web di definire come appaiono quando condivise sulle piattaforme social. Utilizza meta tag nella sezione <head> dell'HTML:

<meta property="og:title" content="Il Titolo della Tua Pagina" />
<meta property="og:description" content="Un breve riassunto della pagina" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Quando una piattaforma social rileva un URL condiviso, recupera la pagina e legge questi tag per costruire la scheda di anteprima.

Tag Open Graph Essenziali

og:title

Il titolo visualizzato nella scheda di anteprima. Mantienilo sotto i 60 caratteri per la migliore visualizzazione su tutte le piattaforme.

<meta property="og:title" content="Come Creare Link Accorciati con Branding" />

Suggerimenti:

Non duplicare semplicemente il tuo tag <title> — ottimizza per il coinvolgimento social
Posiziona le parole importanti all'inizio
Evita il clickbait (le piattaforme potrebbero penalizzarlo)

og:description

Un breve riassunto visualizzato sotto il titolo. Punta a 120-160 caratteri.

<meta property="og:description" content="Crea link accorciati con branding personalizzato con tracciamento dei clic e analitiche. Configura in 5 minuti." />

og:image

L'immagine visualizzata nell'anteprima. Questo è il tag più impactante — i post con immagini ottengono un engagement significativamente più alto.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Requisiti delle immagini per piattaforma:

Piattaforma	Dimensione Consigliata	Rapporto d'Aspetto
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px min	Qualsiasi

Usa 1200 × 630 pixel per coprire tutte le piattaforme.

og:url

L'URL canonico per la pagina. Questo dice alle piattaforme quale URL visualizzare e aiuta a prevenire i contenuti duplicati.

<meta property="og:url" content="https://example.com/page" />

og:type

Descrive il tipo di contenuto. Valori comuni:

website — per homepage e pagine generali
article — per blog post e articoli
product — per pagine di prodotto

Tag Twitter Card

Twitter utilizza i suoi meta tag (in aggiunta a Open Graph) per le schede di anteprima:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Il Tuo Titolo" />
<meta name="twitter:description" content="La tua descrizione" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Se i tag Twitter card non sono presenti, Twitter torna ai tag Open Graph. La maggior parte dei siti imposta entrambi per il massimo controllo.

Quando condividi un URL:

1Il crawler della piattaforma visita l'URL
2Legge l'HTML <head> per i tag OG
3Mette in cache i dati della scheda di anteprima
4Le condivisioni successive dello stesso URL utilizzano la versione in cache

Importante: Le modifiche ai tag OG non si riflettono immediatamente. Le piattaforme memorizzano aggressivamente in cache, quindi potrebbe essere necessario cancellare manualmente la cache (vedi debug di seguito).

Personalizzare le Anteprime dei Link con Linkly

E se stai condividendo un URL che non controlli — o vuoi schede di anteprima diverse per contesti diversi?

La funzione anteprime social personalizzate di Linkly ti permette di sovrascrivere i dati Open Graph per qualsiasi link accorciato:

Imposta un titolo, descrizione e immagine personalizzati
Anteprime diverse per audience diverse
Non è necessario modificare l'HTML della pagina di destinazione
Funziona per qualsiasi URL, anche pagine che non possiedi

Questo è particolarmente utile quando:

Condividi contenuti di terze parti con il tuo branding
Fai test A/B di diverse schede di anteprima per vedere quale ottiene più clic
La pagina di destinazione ha tag OG scadenti o mancanti

Debug dei Tag Open Graph

Lo strumento di Facebook ti permette di visualizzare in anteprima e aggiornare i dati OG in cache:

1Inserisci il tuo URL
2Fai clic su Debug
3Vedi cosa Facebook legge dalla tua pagina
4Fai clic su Scrape Again per cancellare la cache

Twitter Card Validator

Il validatore di Twitter mostra come apparirà la tua scheda ed evidenzia eventuali problemi.

LinkedIn Post Inspector

Lo strumento di LinkedIn visualizza in anteprima la tua scheda link e aggiorna i dati in cache.

Suggerimenti Generali

Controlla la fonte: Visualizza il sorgente della tua pagina e cerca og: per verificare che i tag siano presenti
Usa URL assoluti: Gli URL delle immagini devono essere assoluti (iniziare con https://), non relativi
Testa dopo le modifiche: Cancella sempre la cache della piattaforma dopo aver aggiornato i tag OG
Controlla il rendering JavaScript: Alcune piattaforme non possono eseguire JavaScript, quindi i tag OG devono essere nella risposta HTML iniziale

Errori Comuni

1Manca og:image: I post senza immagini ottengono 2-3 volte meno clic
2Immagine troppo piccola: Usa almeno 1200 × 630 pixel
3Rapporto d'aspetto sbagliato: Le immagini vengono ritagliate in modo strano
4Cache obsoleta: Hai aggiornato i tuoi tag OG ma hai dimenticato di cancellare le cache della piattaforma
5Tag duplicati: Multipli tag OG dello stesso tipo causano comportamenti imprevedibili
6Immagini HTTP: Usa HTTPS per gli URL delle immagini — alcune piattaforme bloccano le immagini HTTP
7URL relativi: I crawler della piattaforma non possono risolvere percorsi relativi

Open Graph per Diversi Tipi di Contenuto

Blog Post

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Il Tuo Nome" />

Prodotti

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Video

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Conclusione

I tag Open Graph sono una piccola aggiunta al tuo HTML che hanno un grande impatto su come il tuo contenuto appare su tutto il web social. Farli bene — con il titolo, la descrizione e l'immagine corretti — aumenta direttamente i tassi di click-through quando i tuoi link vengono condivisi.

Vuoi anteprime di link personalizzate senza modificare l'HTML? Inizia con Linkly e personalizza la scheda di anteprima social per qualsiasi link accorciato — imposta il tuo titolo, descrizione e immagine.