← Blog

Errori comuni con i tag Open Graph

Anche gli sviluppatori esperti commettono questi errori nei tag OG. Ecco quelli più comuni e come risolverli.

Controlla la presenza di errori nei tag OG

Usa Proovd: incolla un URL e vedi immediatamente come appare su X, LinkedIn, Slack, Discord, WhatsApp e Reddit.

Risposta rapida

  • Utilizzo di URL relativi per og:image: le piattaforme non possono recuperarli
  • Tag twitter:card mancante: X non visualizzerà la tua carta
  • Immagine troppo piccola per la piattaforma: LinkedIn richiede un minimo di 1200×627
  • Non svuota la cache dopo gli aggiornamenti: le piattaforme memorizzano nella cache i tag OG per giorni

Errore 1: utilizzare URL relativi per og:image

Questo è l'errore più comune. Gli sviluppatori scrivono:

✗ Sbagliato

<meta property="og:image" content="/images/preview.jpg" />

I crawler delle piattaforme non sono in grado di risolvere gli URL relativi. Hanno bisogno di un URL assoluto:

✓ Corretto

<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />

Utilizza sempre https:// nel tuo URL og:image. Ciò riguarda ogni piattaforma: X, LinkedIn, Discord, Slack, WhatsApp e Reddit.

Errore 2: tag twitter:card mancante

Molti sviluppatori impostano solo Open Graph tag e saltano Twitter Card tag. X/Twitter preferisce twitter:card e potrebbe non visualizzare correttamente la tua carta senza di essa.

✗ Incompleto

<meta property="og:image" content="https://yoursite.com/image.jpg" />

✓ Completa

<meta property="og:image" content="https://yoursite.com/image.jpg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Imposta sia og:image che twitter:image per una copertura completa. Consulta la nostra guida Open Graph vs Twitter Card per i dettagli.

Errore 3: immagine troppo piccola per la piattaforma

Ciascuna piattaforma ha dimensioni minime di immagine diverse. Un'immagine che funziona su Discord (minimo 300×300) potrebbe non funzionare su LinkedIn (minimo 1200×627).

Platform Minimum Recommended
X / Twitter800 × 4181200 × 628
LinkedIn1200 × 6271200 × 627
Discord300 × 3001200 × 630
WhatsApp300 × 1571200 × 630
Reddit120 × 1201200 × 628

Utilizzando 1200 × 630 come dimensione standard copre tutte le piattaforme. Consulta la nostra guida alle dimensioni dell'immagine Open Graph per l'analisi completa.

Errore 4: non svuotare la cache dopo gli aggiornamenti

Aggiorna i tuoi tag OG. Le piattaforme mostrano ancora la vecchia anteprima. Il problema: le piattaforme memorizzano nella cache i tag OG e non li recuperano automaticamente.

Dopo aver aggiornato i tag, devi svuotare la cache di ciascuna piattaforma:

Consulta la nostra guida Come svuotare Open Graph Cache per la procedura dettagliata completa piattaforma per piattaforma.

Errore 5: og:description mancante o testo troncato

Alcuni sviluppatori impostano og:title e og:image ma saltano og:description. Altri scrivono descrizioni troppo lunghe e vengono troncate.

Migliori pratiche:

Errore 6: non impostare og:url

Senza og:url, le piattaforme potrebbero utilizzare l'URL sbagliato nell'anteprima (ad esempio, un URL con parametri di tracciamento). Imposta sempre l'URL canonico:

✓ Corretto

<meta property="og:url" content="https://yoursite.com/your-page" />

Errore 7: utilizzo del tipo MIME dell'immagine errato

Se il tuo server restituisce l'intestazione Content-Type errata per la tua immagine (ad esempio, offrendo un PNG con image/jpeg), alcune piattaforme la rifiuteranno. Assicurati che il tuo server di immagini restituisca il tipo MIME corretto:

LinkedIn è particolarmente severo riguardo alla convalida del tipo MIME.

Errore 8: pagine dinamiche senza tag OG univoci

Se disponi di una SPA o di un sito dinamico in cui ogni pagina condivide gli stessi tag OG (solitamente i tag della home page), le piattaforme mostreranno la stessa anteprima per ogni pagina. Ogni pagina necessita di un titolo, una descrizione e un'immagine univoci.

In Next.js, usa generateMetadata(). In WordPress, utilizza le impostazioni per pagina di Yoast/RankMath. In HTML semplice, imposta i tag individualmente su ciascuna pagina.

Elenco di controllo per la correzione rapida

  1. Utilizza URL assoluti (https://...) per tutti i percorsi og:image
  2. Imposta entrambi i tag og: e twitter:
  3. Utilizza immagini da 1200×630 pixel per una compatibilità universale
  4. Cancella le cache della piattaforma dopo aver aggiornato i tag
  5. Imposta tag OG univoci per ogni pagina
  6. Includi og:description (150-160 caratteri)
  7. Imposta og:url sull'URL canonico
  8. Verifica che il tipo MIME corrisponda al formato immagine effettivo
  9. Prova con Proovd per individuare tutti gli errori in una volta

Domande frequenti

Qual è l'errore Open Graph più comune?

Utilizzando un URL relativo per og:image anziché un URL assoluto che inizia con https://. Le piattaforme non possono recuperare URL relativi, quindi l'immagine non verrà mai visualizzata nell'anteprima.

Perché la mia immagine OG funziona su una piattaforma ma non su un'altra?

Ogni piattaforma ha requisiti diversi per le dimensioni delle immagini. LinkedIn richiede un minimo di 1200x627, X richiede 800x418 e Discord accetta un minimo di 300x300. Un'immagine che funziona su una piattaforma potrebbe essere troppo piccola per un'altra.

Come posso verificare se i miei tag OG contengono errori?

Usa Proovd per incollare qualsiasi URL e vedere esattamente come viene visualizzato su tutte e sei le piattaforme contemporaneamente.

Articoli correlati

Controlla la presenza di errori nei tag OG

Usa Proovd: incolla un URL e visualizza l'anteprima su X, LinkedIn, Slack, Discord, WhatsApp e Reddit.