Facebook Debugger: configurare le anteprime dei link che postiamo

Facebook Debugger: configurare le anteprime dei link che postiamo

La storia è sempre uguale: provi a condividere un articolo del tuo sito su Facebook, e l’immagine di anteprima non appare, oppure si vede quella sbagliata. In questo articolo vedremo come sia possibile usare il debugger di Facebook per diagnosticare e correggere questo tipo di problemi.

Come usare il Facebook Debugger per cambiare l’immagine di anteprima di un link che viene condiviso su Facebook?

Le basi: Open Graph

Alla base di tutto vi sono i meta-tag noti come Open Graph, che sono le meta-informazioni inserite nel markup HTML allo scopo di generare informazioni utili che Facebook possa leggere ed interpretare. Lo standard in questione prevede vari generi di campi, che funzionano un po’ come meta keyword e meta description per la SEO: se siete dei programmatori potrete anche generarli a mano all’interno del vostro sito, diversamente dovrete usare un addon o un plugin adatto allo scopo. Detta in modo molto semplice, si tratta di tag invisibili ad occhio nudo che forniscono a Facebook dati strutturati su quello che si sta condividendo, quindi ad esempio titolo, descrizione ed immagine che sarà condivisa.

Pubblicità:

Esempio codice Open Graph

Di seguito riporto un template di Open Graph con tutti i dati che vengono utilizzati più spesso.

Il template è disponibile anche su GitHub per vostra comodità, pronto per il copia-incolla.

Ricordatevi che bisogna valorizzare i campi nel modo corretto, quindi seguendo la sintassi chiave-valore in cui abbiamo da un lato property (che rappresenta il nome della proprietà) e dall’altro content (che invece rappresenta il valore di quella proprietà), e che i meta tag essenziali sono questi quattro:

  • og:locale: deve essere impostato nella lingua del sito, ad esempio italiano it_IT
  • og:title: il titolo del link
  • og:description: la descrizione sotto al link
  • og:image: l’immagine di anteprima che apparirà (deve essere valorizzato con un’immagine che restituisca codice 200, quindi che sia esistente a quel path, di dimensioni

Ovviamente queste informazioni devono essere utilizzate in modo corretto, ovvero:

  1. la prima possibilità è quella di usare questo template per generare in modo dinamico, via codice (ad esempio theme child di WordPress) informazioni corrispondenti per ogni singola pagina, in modo che ogni pagina possa essere correttamente condivisa. Quindi dovrete programmare in PHP questa parte…
  2. La seconda possibilità è quella di usare un codice Open Graph statico, solo che in questo caso ogni pagina avrà la stessa immagine, titolo e descrizione (non consigliato)
  3. La terza possibilità è quella di sfruttare un plugin del CMS che state usando per generare in automatico i meta-tag Open Graph.

Come Facebook recupera le informazioni

In prima istanza Faceboom cerca di prelevare le informazioni che trova dall’URL della pagina; questo è quello che avviene a prima vista, ed è abbastanza semplice da capire. Se pero’ non trova informazioni utili, ad esempio se manca il meta tag og:image, prova a cercare immagini all’interno dell’URL, e prende “per buona” la prima immagine che troverà nella pagina (ad esempio quella dell’articolo). In caso di presenza di tag og:image, comunque, a quanto pare quest’ultima avrà la precedenza.

Formato, dimensione e best practice per le immagini

Facebook memorizza l’immagine iniziale che gli passi via og:image, quindi se l’URL resta identico e l’immagine cambia sarà sempre mostrata l’immagine vecchia. Pertanto, per aggiornare un’immagine dopo la pubblicazione devi usare un nuovo URL per la nuova immagine. Ricordati sempre che le immagini vengono salvate nella cache di Facebook in base all’URL e non vengono aggiornate, a meno che non cambi l’URL.

Si consiglia di adottare immagini di almeno 1080 pixel di larghezza per mostrarle sui dispositivi ad alta risoluzione, e di almeno 600 pixel di larghezza per le inserzioni con link (in questo caso le immagini quadrate sono consigliate rispetto a quelle rettangolari).

Plugin WordPress per Open Graph

I plugin consigliati sono i seguenti:

  1. Open Graph for Facebook, Google+ and Twitter Card Tags, che imposta in automatico e mediante interfaccia grafica gli Open Graph non solo per Facebook ma anche per le card di Twitter.
  2. All In One SEO Pack, che presenta una sezione Meta dei social che è molto semplice da impostare. Le impostazioni standard per le immagini sono riportate di seguito.

Cache: una cosa importante da capire

Può capitare di non vedere l’immagine giusta quando si fanno aggiornamenti in questo campo. Non basta aggiornare l’immagine origine, come abbiamo visto, perchè è molto meglio cambiare l’URL dell’immagine dato che Facebook ha una cache che si basa sull’URL dell’immagine, non su quello del link alla pagina. Può sembrare complicato da capire all’inizio, ma una volta chiarito questo aspetto sarà agevole fare debug.

Ricordatevi quindi che ci sono tre livelli di cache:

  1. la cache del vostro sito, quella lato server (quella che aggiornate e controllate mediante plugin di cache);
  2. la cache del vostro browser (quella che aggiornate pulendo cookie e cronologia)
  3. la cache di Facebook (che non potete controllare direttamente, salvo cambiando dal sito l’URL dell’immagine, per intenderci)

Dove trovare il debugger di FB

Per accedere al debugger di Facebook basta andare su:

https://developers.facebook.com/tools/debug/

Per accedere in modo corretto è necessario essere registrati su Facebook ed accedere con il proprio account.

A cosa serve il debugger

Il tool in questione permette di visualizzare l’anteprima di come sarà il tuo link una volta che verrà pubblicato su Facebook, evidenziando ogni genere di problema possa capitare a livello di Open Graph ed evitando, soprattutto, di dover condividere il link senza prima testarlo.

Procedura passo-passo per il check

Per controllare che l’URL del nostro sito sia correttamente interpretata e visualizzata da Facebook, basta seguire la seguente procedura passo-passo.

Vuoi un server ultra-potente?

Prova un dedicato PRO!

  • Server con processore AMD 7281
  • RAM: ben 32 GB!
  • Spazio su disco: 2 x 500 GB SSD
  • 299 € / mese con protezione anti-DDoS inclusa
Guarda questa offerta:


Keliweb
  • Come prima cosa, bisogna copiare da qualche parte l’URL che non viene mostrato correttamente su Facebook. Per farlo, è sufficente copiarlo ed incollarlo all’interno di un file di testo e tenerlo da parte.
  • Bisogna adesso aprire il debugger e fare login con un account Facebook.
  • A questo punto bisogna selezionare Debugger di condivisione, ed incollare l’URL del punto 1 all’interno della casella di testo in cui c’è scritto “inserisci un URL…“.
  • Adesso bisogna cliccare su Debug, ed attendere qualche istante.
  • Nella schermata successiva, vedremo il risultato del test: in alto ci saranno le notifiche di eventuali errori o mancanze a livello di Open Graph, mentre in basso vedremo l’anteprima di come il contenuto viene visualizzato. Le immagini, in particolare, potrebbero comunque apparire nell’anteprima anche se vengono generati messaggi di errore. Per quello che riguarda le anteprima, se vediamo l’immagine sbagliata tipicamente apparirà l’errore “Mancano le seguenti proprietà necessarie: og:url, og:type, og:title, og:image, og:description, fb:app_id
  • Per inserire in automatico gli Open Graph in un sito WordPress si possono installare uno dei plugin consigliati in precedenza.
  • Successivamente sarà necessario rifare la scansione dal tool, cliccando su Esegui lo scraping di nuovo.

Di seguito una schermata di esempio del debugger di Facebook, in cui viene evidenziata la parte con errori e l’anteprima, oltre al link per eseguire lo scraping daccapo.


Informazioni sull'autore

Salvatore Capolupo

Consulente SEO, ingegnere informatico e fondatore di Trovalost.it, Pagare.online, Lipercubo.it e tanti altri. Di solito passo inosservato e non ne approfitto.
Ti piace questo articolo?

2 voti

Su Trovalost.it puntiamo sulla qualità dei contenuti da quando siamo nati: la tua sincera valutazione può aiutarci a migliorare ogni giorno.

Facebook Debugger: configurare le anteprime dei link che postiamo

Votato 10 / 10, da 2 utenti