Ti sei mai imbattuto in una situazione in cui Facebook non visualizza l’immagine o il testo giusto quando qualcuno condivide un link del tuo sito? Bene, in questo post, ti mostreremo esattamente come utilizzare lo strumento Facebook Debugger per risolvere il problema!

Imparerai innanzitutto come Facebook decide quali informazioni far vedere quando qualcuno condivide un link del tuo sito. Quindi, ti mostreremo come utilizzare lo strumento Debugger Facebook per assicurarti che i link del tuo sito siano sempre perfetti quando vengono condivisi su Facebook.

Incominciamo!

Che cos’è Facebook Debugger?

Facebook debugger ti consente di vedere quali informazioni vengono raccolte da Facebook per un URL specifico. Se ad esempio desideri condividere su Facebook un post del blog, puoi utilizzare lo strumento debugger Facebook per vedere quale immagine, testo di anteprima e titolo verranno visualizzati nel newsfeed.

Come marketer, scriverai e promuoverai spesso post sul blog. Tuttavia, comprendere il codice o come è realizzata la pagina del tuo blog è una questione diversa.

Hai mai pubblicato un post del blog su Facebook e l’immagine che viene visualizzata come anteprima non è corretta o non è presente alcuna immagine? Questo perché la pagina del tuo blog non ha i tag open graph (meta titolo, descrizione e immagine) impostati correttamente.

Lo strumento debugger link Facebook semplifica questo processo, quindi tutto ciò che devi fare è comunicare allo sviluppatore i problemi rilevati dallo strumento di debug link Facebook. Potrebbe ad esempio essere qualcosa del genere, “il tag og: image punta a un URL errato”. Lo strumento di debug Facebook facilita la conversazione tra te come creatore di contenuti e i tuoi ingegneri web.

Ora che abbiamo spiegato lo scopo di questo strumento, occupiamoci del modo in cui funziona e come puoi utilizzarlo.

In che modo Facebook decide quali informazioni visualizzare

Ok, quindi sai che ogni volta che condividi un articolo, Facebook crea una scheda come questa che include le seguenti informazioni:

  • Immagine
  • URL
  • Titolo
  • Estratto / riassunto

Ecco come Facebook seleziona le immagini e le informazioni visualizzate:

Esempio di anteprima del collegamento Facebook

Quando qualcuno condivide il tuo sito web, il crawler di Facebook scansiona il codice HTML della tua pagina per generare l’anteprima.

Invece di forzare il crawler a intuire cosa usare per anteprima, puoi utilizzare i meta tag Facebook Open Graph (o og tag in breve). I meta tag Open Graph sono codici che indicano esattamente a Facebook quali contenuti utilizzare per la scheda di anteprima.

Ecco un esempio dei meta tag Open Graph del post in questione:

Un esempio di meta tag Open Graph

Nota come le informazioni in quei tag corrispondono esattamente a quelle che hai visto nell’anteprima sopra.

Anche se non hai mai sentito parlare dei meta tag Open Graph Facebook, è probabile che il tuo sito WordPress li stia già utilizzando. I più popolari plugin SEO o social media per WordPress infatti aggiungono i meta tag Facebook ai tuoi contenuti. Sia Yoast SEO che All in One SEO Pack offrono questa funzionalità.

Facebook memorizza nella cache le informazioni sui meta tag open graph

C’è un altro aspetto importante nel modo in cui funzionano le schede di anteprima. Quando Facebook effettua lo scraping HTML del tuo sito, memorizza nella cache i contenuti sui server di Facebook. Quindi la volta successiva che qualcuno condividerà lo stesso link, Facebook estrarrà semplicemente le informazioni dalla propria cache, anziché fare un nuovo scraping del tuo link.

Questo è importante perché significa che eventuali modifiche apportate ai meta tag Facebook del tuo sito non verranno aggiornate finché Facebook non cancella la sua cache. Per impostazione predefinita, Facebook esegue lo scraping di ogni collegamento ogni 30 giorni.

Ciò porta a due potenziali problemi:

  1. Se ci sono problemi con i meta tag Open Graph ( o se non stai usando un plugin che aggiunge meta tag Open Graph ), potresti vedere l’immagine o il titolo non corretti quando qualcuno condivide il tuo link su Facebook.
  2. Anche se risolvi questi problemi, potresti non vedere subito l’immagine giusta su perché Facebook ha memorizzato nella cache la versione precedente dei tag Open Graph .

Facebook open graph debugger ti aiuta a risolvere entrambi questi problemi.

Innanzitutto, ti aiuta a trovare problemi specifici con l’integrazione dei meta tag Open Graph Facebook nel tuo sito. In questo modo sarai certo che quando qualcuno condivide il tuo sito su Facebook vengano visualizzate l’immagine e le informazioni appropriate.

In secondo luogo, Facebook url debugger consente di forzare Facebook ad aggiornare la sua cache, il che garantisce che le anteprime dei tuoi collegamenti visualizzino le informazioni più recenti.

Prima di tutto dovrai usare Facebook Open Graph Debugger per vedere come Facebook sta attualmente visualizzando la pagina in questione.

Per farlo, vai alla pagina di Debugger Facebook , inserisci l’URL che desideri analizzare e fai clic su Debug:

Utilizzare lo strumento Facebook Debugger

Facebook quindi ti fornirà la versione che ha memorizzato nella cache. Se si tratta di un URL nuovo di zecca, lo strumento open graph Debugger di Facebook farà lo scraping per la prima volta.

Da Facebook share debugger puoi anche vedere esattamente l’ultima volta che Facebook ha scansionato l’URL, nonché eventuali avvisi:

Risultati del debugger di Facebook

Più in basso, puoi vedere i meta tag reali Open Graph trovati da Facebook Debugger:

i tag open graph

Supponiamo che non ti piaccia come vengono visualizzate alcune informazioni, che cosa fai?

Passaggio 1: aggiorna i meta tag Open Graph Facebook sul tuo sito WordPress

Per cambiare l’immagine utilizzata da Facebook o per modificare il testo nell’anteprima della scheda, devi aggiornare i meta tag Open Graph sul tuo sito WordPress.

Per questo esempio useremo Yoast perché è l’opzione più conosciuta. Ma se stai utilizzando un plugin SEO diverso o un plugin per social media, dovrai aggiornare i meta tag Open Graph Facebook da quello.

Se il tuo sito non ha ancora meta tag Open Graph, puoi utilizzare un plugin dedicato come Open Graph and Twitter Card Tags.

Per impostazione predefinita, Yoast SEO genera i meta tag Open Graph dall’immagine in evidenza, dalla meta descrizione e da altre informazioni che hai già inserito nel post.

Se lo desideri, tuttavia, puoi controllare manualmente tali informazioni utilizzando la scheda Social dal meta box di Yoast SEO:

La modifica dei tag Open Graph in Yoast SEO

Assicurati di salvare le modifiche.

Nota: la maggior parte degli altri plugin SEO gestisce i tag open graph Facebook in modo simile .

Passaggio 2: svuota la cache di WordPress (ove applicabile)

Se stai utilizzando un plugin di memorizzazione nella cache per migliorare le prestazioni del tuo sito, ad esempio WP-Rocket, dovrai prima svuotare la cache sul tuo sito WordPress. In questo modo sarai sicuro che Facebook possa recuperare l’ultima versione dei meta tag Open Graph.

La maggior parte dei plugin di cache per WordPress fornisce un’opzione per cancellare la cache nell’editor di WordPress, ma questo dipende dal plugin che stai utilizzando

Ecco i tutorial su come svuotare la cache per alcuni plugin di cache più conosciuti:

Passaggio 3: forza Facebook open graph debugger ad effettuare di nuovo lo scraping

Ora che sei sicuro che sul tuo sito WordPress siano visualizzati i meta tag Open Graph appropriati, dovrai forzare Facebook ad effettuare nuovamente lo scraping della pagina web. In questo modo sarai certo che abbia la versione più aggiornata della tua pagina web e dei suoi tag og.

Per fare ciò, devi solo fare clic sul pulsante Esegui lo scraping di nuovo in Debugger link Facebook. Il crawler di Facebook rivisiterà il tuo sito e recupererà la versione più recente:

Il pulsante Esegui lo scraping di nuovo su Facebook Debugger

Ora, quando qualcuno condividerà il tuo link in futuro, sarai sicuro che visualizzerà le informazioni di anteprima appropriate.

Suggerimenti aggiuntivi per il debug Facebook di problemi relativi alle immagini

Se vuoi essere sicuro che Facebook sia in grado di far vedere correttamente le anteprime delle immagini ogni volta, ci sono alcuni passaggi di ottimizzazione che dovresti valutare.

1. Usa le dimensioni corrette per le immagini di Facebook

Facebook consiglia di utilizzare immagini di risoluzione almeno 1200 x 630 pixel per massimizzare la qualità su schermi ad alta risoluzione. Ma le tue immagini dovrebbero essere almeno di risoluzione 600 x 315 pixel.

Cerca di mantenere queste proporzioni anche se utilizzi dimensioni dell’immagine diverse perché Facebook ritaglierà le immagini se utilizzi una proporzione diversa.

Se l’immagine è inferiore a 600 x 315 pixel, non otterrai l’anteprima dell’immagine completa . Ecco come appare l’anteprima per le immagini più piccole:

Immagine di anteprima facebook piccola

Infine, se la dimensione dell’immagine è inferiore a 200 x 200 pixel, non otterrai un’immagine di anteprima. Inoltre, riceverai un errore nel Debugger di condivisione Facebook.

2. Pre-caching dei contenuti per risolvere il problema di nessuna immagine di anteprima per un post nuovo

Quando qualcuno condivide uno dei tuoi link per la prima volta, Facebook potrebbe non far vedere subito un’immagine di anteprima . Questo perché “Il crawler deve vedere un’immagine almeno una volta prima che possa essere renderizzata.”

In parole povere: “Ciò significa che la prima persona che condivide un contenuto non vedrà un’immagine renderizzata”.

Esistono due modi per risolvere questo problema.

Innanzitutto, puoi effettuare lo scraping di tutti i tuoi nuovi post sul blog tramite Facebook Open Graph Debugger subito dopo averli pubblicati. Ciò consente a Facebook di salvare nella sua cache l’immagine del tuo post. Questo garantisce che venga visualizzata isubito, anche per la prima persona che condivide il post.

In secondo luogo, è possibile aggiungere i meta tag og: image: width e og: image: height .

Ciò consente al crawler di renderizzare subito l’immagine senza dover scaricare ed elaborarla in modo asincrono.

Maggiori informazioni sul pre- caching delle immagini Facebook.

Conclusione

Utilizzando Facebook Debugger e i meta tag Open Graph, puoi assicurarti che i contenuti del tuo sito WordPress siano sempre perfetti quando vengono condivisi su Facebook.

Ricorda solo che la memorizzazione nella cache a volte può fare brutti scherzi! Quindi, se non vedi le informazioni corrette, svuota la cache sul tuo sito WordPress. Dopodichè forza Facebook ad effettuare di nuovo lo scraping con lo strumento Debugger di condivisione Facebook.