Può capitare di condividere su Facebook un articolo appena pubblicato o modificato e ritrovarsi con un’immagine tagliata, un titolo vecchio o una descrizione che contiene una frase pescata a caso dall’articolo.
Il Facebook Debugger serve proprio a evitare queste situazioni e a risalire alle cause di eventuali errori.
In questa guida vedremo cos’è e come funziona il Debugger di condivisione, come configurare i tag Open Graph per avere il controllo completo sull’aspetto dei tuoi link e come risolvere i problemi più frequenti, dall’immagine mancante al titolo incoerente. Così potrai ottenere delle anteprime più efficaci che valorizzino al meglio i contenuti del tuo sito.
Indice
Cos’è e a cosa serve il Facebook Debugger
Il Facebook Sharing Debugger – o Debugger di condivisione di Facebook – è lo strumento ufficiale di Meta che permette di sapere come la piattaforma visualizzerà l’anteprima di una pagina web. Questo permette di fare aggiustamenti e correggere eventuali errori prima che l’URL venga condiviso.
L’aspetto dell’anteprima dipende da alcuni meta tag presenti nel codice HTML che indicano a Facebook quali elementi mostrare: i tag Open Graph. Se sono configurati correttamente, l’anteprima sarà coerente con quello che hai impostato. Se invece mancano o sono errati, Facebook sceglierà da solo cosa mostrare.
Il Debugger di condivisione ti serve proprio a scoprire quali elementi Facebook intende visualizzare. Se inserisci l’indirizzo della pagina, il software esegue una scansione (o scraping) e ti dà l’anteprima dell’URL condiviso con titolo, immagine e descrizione.
Non bisogna confondere il Debugger di condivisione, che serve a controllare il singolo link, con lo Strumento di invalidamento batch, che si trova nella tab accanto e permette di forzare l’aggiornamento della cache per una lista di indirizzi in contemporanea ed è utile quando si effettua un restyling del sito.
Cos’è Open Graph
Open Graph è un protocollo che usa i meta tag inseriti nell’HTML di una pagina per istruire le piattaforme social su come interpretare e mostrare i contenuti di una pagina web.
I tag Open Graph sono meta tag inseriti nel codice HTML della pagina che indicano a Facebook quali informazioni usare per costruire l’anteprima del link. Se li configuri in modo corretto puoi avere il controllo completo sull’aspetto dell’URL condiviso.
Quelli fondamentali per l’anteprima sono:
- og:url – che identifica l’indirizzo canonico della pagina;
- og:title – che definisce il titolo visualizzato;
- og:description – che fornisce un breve riassunto del contenuto;
- og:image – che stabilisce quale immagine mostrare.
Altri utili per la condivisione sono:
- og:type – che descrive il tipo di contenuto (per esempio “sito web” o “articolo”);
- og:site_name – che indica il nome del sito su cui si trova il contenuto;
- og:image:alt – che contiene il testo alternativo dell’immagine.
Inoltre all’interno del Debugger di condivisione di Facebook potresti incontrare anche l’attributo fb:app_id, che non è un tag Open Graph ma un identificatore usato da Facebook per collegare il sito a una specifica applicazione Meta.
Oggi i tag Open Graph sono usati per gestire le anteprime dei link anche da piattaforme non Meta, come LinkedIn e Pinterest. Per X invece è sempre meglio controllare anche la corretta implementazione delle Twitter Cards, un insieme di meta tag specifici per questa piattaforma.
Differenza tra tag Open Graph e meta tag SEO
È importante non confondere i tag Open Graph con i meta tag SEO – come il title e la meta description – perché sono attributi diversi con obiettivi diversi.
Per esempio il title SEO deve rispondere alle query di ricerca degli utenti, mentre l’og:title deve catturare l’attenzione nel feed della piattaforma e invogliare gli utenti a cliccare.
In alcuni casi però, può essere comodo generare i tag Open Graph in automatico a partire dai valori dei meta tag SEO.
Vantaggi di un’anteprima Facebook ottimizzata
Il debugger di Facebook non influisce direttamente sul posizionamento SEO, ma ha un impatto sulle prestazioni dei contenuti all’interno dei social, sia in termini di numero di clic che di qualità del traffico generato.
Configurando i tag Open Graph attraverso un plugin o il codice eviti che le piattaforme social generino le anteprime in modo automatico pescando elementi dalla pagina in modo imprevedibile. Così puoi allo stesso tempo offrire un’immagine più professionale e assicurarti che compaiano dei testi efficaci.
Un’anteprima Facebook ottimizzata può aumentare il CTR in modo significativo perché permette di trasmettere un messaggio più chiaro; soprattutto se il titolo e la descrizione non sono ricavati dai meta tag SEO ma studiati appositamente per i social. E da questo punto di vista, i plugin SEO e Open Graph sono l’unico sistema davvero pratico per farlo, pagina per pagina.
Come sempre, devi capire se il tempo necessario a intervenire manualmente sulle anteprime social delle singole pagine viene ripagato dalle prestazioni migliori e dalle conversioni.
Come Facebook seleziona gli elementi da mostrare
Quando condividi un URL, Facebook scansiona l’HTML della pagina per capire come costruire l’anteprima, con un sistema automatico, cioè un crawler.
Se i meta tag Open Graph sono presenti e corretti, l’anteprima sarà coerente con ciò che hai impostato. Se mancano, Facebook potrebbe sostituirli ricorrendo ai meta tag SEO e altri elementi che trova nell’HTML: per esempio se non trova og:title e og:description potrebbe visualizzare il title come titolo e la meta description come descrizione.
In questo modo riesce a costruire l’anteprima anche in assenza di informazioni specifiche. Ma se vuoi promuovere bene un contenuto del tuo sito o del tuo blog WordPress sui social, devi specificare le proprietà Open Graph in modo da rendere più efficace ogni elemento dell’anteprima.
In realtà, anche quando i tag Open Graph sono presenti e corretti, può capitare che Facebook li interpreti in modo non coerente con le tue impostazioni, e vedremo tra poco perché e come risolvere.
Un altro concetto da tener presente quando si parla di anteprima dei link condivisi su Facebook è quello di cache, cioè una copia temporanea dei dati salvata per essere recuperata in fretta. Infatti quando vede l’URL per la prima volta, Facebook salva una versione dell’anteprima e così, ogni volta che un utente condivide lo stesso indirizzo, la piattaforma può caricare l’anteprima senza dover ri-scansionare la pagina.
Questo significa che eventuali modifiche successive ai tag Open Graph della pagina non vengono visualizzate subito, perché la piattaforma continua ad attingere ai dati memorizzati in precedenza. Le due versioni si riallineeranno solo al successivo aggiornamento della cache, che avviene in automatico dopo un periodo imprecisato: diversi giorni, a volte anche 30. Ma non devi preoccuparti. È infatti possibile aggiornare i dati subito forzando una nuova scansione, come vedremo tra poco.
Grazie alla cache centralizzata l’anteprima viene visualizzata allo stesso modo da tutti gli utenti Facebook, a prescindere da chi condivide il link. Un motivo in più per configurarla nel modo migliore.
Usare il Debugger di Facebook per controllare l’anteprima
Sfruttare il Debugger di Facebook per controllare come appare un’anteprima social prima di condividere un link è molto facile.
Vai sulla pagina ufficiale del Debugger di condivisione, inserisci l’indirizzo e fai clic sul pulsante Debug.
Se l’URL non è mai stato condiviso fino a ora, ti verrà segnalato. Ma potrai comunque procedere cliccando su Recupera nuove informazioni.
In questo caso il debugger effettuerà la prima scansione estrapolando le informazioni dai tag Open Graph della pagina.
La schermata aggiornata conterrà 3-4 sezioni, che mostrano:
- eventuali avvisi relativi a proprietà mancanti
- data e modalità dell’ultima scansione
- l’elenco delle proprietà Open Graph del contenuto.
È abbastanza comune che la prima sezione segnali la necessità di aggiungere la proprietà fb:app_id. In realtà non è necessaria per ottenere un’anteprima corretta, e se il tuo obiettivo è solo questo puoi ignorare il messaggio.
Devi rimediare, invece, se vuoi accedere ai dati di Facebook Insights o integrare alcune API.
Nella sezione Data e modalità dell’ultimo scraping dell’URL trovi invece:
- l’orario dell’ultima scansione
- il codice HTTP della risposta
- l’URL della pagina
- l’URL canonico
- l’anteprima del link.
Più in basso puoi vedere le proprietà Open Graph che il debugger di condivisione ha ricostruito a partire dall’HTML della pagina, per esempio og:url, og:title, og:description e og:image.
Nel mio caso c’è anche una serie di proprietà Open Graph associate a X.
La sezione URL contiene le impostazioni più avanzate, dedicate agli sviluppatori, o meglio contiene i link per accedere agli strumenti dedicati, come il Tool di esplorazione per la API Graph, l’interfaccia di Facebook che permette di accedere e interagire con i dati della piattaforma tramite richieste automatiche.
Modificare l’anteprima dei link Facebook con i tag Open Graph
Se qualcosa non ti piace nell’anteprima del link su Facebook, puoi andare a correggerlo dal pannello di amministrazione del tuo sito. Fatte le modifiche, puoi cliccare su Esegui lo scraping di nuovo per svuotare la cache e fare in modo che l’anteprima del link venga subito aggiornata.
Il discorso è lo stesso sia per i tag Open Graph configurati male che per quelli mancanti.
Per lo stesso motivo, che il link venga inserito in un post nel feed, in un commento o in un messaggio privato, l’anteprima visualizzata (o card) attinge sempre dalla stessa cache centralizzata del social network.
Su WordPress ci sono 2 modi per configurarli in modo corretto:
- usare un plugin che supporta Open Graph, per la SEO o dedicato;
- modificare l’HTML del sito.
Qualunque metodo tu scelga, se usi un plugin di cache devi svuotarla prima di rifare la scansione con il debugger, come vedremo a breve.
Modificare l’anteprima via plugin
I plugin sono il metodo più pratico per intervenire sull’anteprima degli URL condivisi, e permettono di farlo dall’editor di WordPress, personalizzando le informazioni visibili a Facebook per la singola pagina del sito.
Se usi WordPress puoi scegliere un plugin SEO o un plugin Open Graph. La prima opzione è di solito la più sensata perché uno strumento di questo tipo è probabilmente già presente sul tuo sito.
Gli strumenti più popolari per la SEO – AIOSEO, Rank Math e Yoast – sono capaci di generare in automatico i meta tag Open Graph a partire dall’immagine in evidenza, dalla meta description e altre informazioni inserite nel contenuto. In più offrono la possibilità di fare modifiche locali alle proprietà Open Graph sul singolo contenuto. Con questi plugin le impostazioni per la condivisione della pagina sui social sono disponibili all’interno dell’editor di WordPress e si possono vedere in tempo reale i risultati delle modifiche all’anteprima.
Se usi AIOSEO, sotto l’editor vero e proprio trovi tutte le impostazioni SEO del contenuto, compresa la scheda Social. Qui puoi definire, anche sfruttando i tag preimpostati:
- il titolo Facebook;
- la descrizione Facebook;
- la sorgente dell’immagine di anteprima, scegliendola tra gli elementi della pagina condivisa;
- il tipo di oggetto che stai condividendo – per esempio articolo, sito, azienda, causa, ecc.
Come vedi, c’è anche una sezione dedicata a Twitter (X).
Rank Math include impostazioni analoghe in una finestra che si apre dalla barra laterale facendo clic su Social.
Anche Yoast SEO contiene la sezione Aspetto dei social media, che negli ultimi anni è diventata una funzionalità premium.
Se usi WordPress ma non un plugin SEO, puoi comunque accedere alle impostazioni Open Graph attraverso un plugin dedicato come Open Graph and Twitter Card Tags.
Modificare l’anteprima via codice
Se usi un CMS diverso da WordPress o non vuoi installare un plugin WordPress, puoi configurare i tag Open Graph via codice, ma il procedimento è molto più complesso e richiede la conoscenza di HTML e PHP. Inoltre questa modalità ha qualche limitazione in più, perché con i CMS e i framework di solito non è possibile modificare i tag Open Graph pagina per pagina.
È possibile, i nvece, gestirli in modo dinamico attraverso il template delle pagine o i file del tema che controllano la sezione <head> del sito, che spesso sono modificabili da una schermata apposita del pannello di amministrazione. Per esempio, su WordPress di solito trovi il file header.php nella sezione Aspetto delle impostazioni.
Puoi cercare i tag Open Graph principali nella sezione <head> del codice e modificarli per ottenere il risultato che desideri, o aggiungerli se non ci sono.
In questo caso, non potendo inserire le informazioni specifiche della pagina che vuoi condividere, dovrai fare in modo che il CMS vada a recuperarle di volta in volta in elementi già presenti. La soluzione più pratica consiste nell’usare:
- come og:title il titolo o il titolo SEO
- come og:description la meta description o il riassunto
- come og:image l’immagine in evidenza
- come og:url l’URL canonico generato dal CMS
- come og:type il tipo di contenuto
- come og:site_name il nome del sito configurato nelle impostazioni del CMS.
Qui trovi un esempio di script per configurare i tag Open Graph nel codice del tuo sito.
Come forzare l’aggiornamento dell’anteprima Facebook
Se dopo aver fatto un intervento sui tag Open Graph o altri elementi, vuoi vedere subito le modifiche nell’anteprima Facebook, devi forzare l’aggiornamento svuotando la cache del sito e avviando una nuova scansione da parte di Meta.
Qui vedremo come gestire la cache su WordPress, ma il principio vale su tutti i CMS.
Svuotare la cache di WordPress per la pagina
Quando modifichi una pagina su WordPress, può capitare che il debugger di Facebook non rilevi subito le modifiche perché il sito sta ancora mostrando una versione salvata in cache, cioè una copia temporanea non aggiornata della pagina. Ecco perché se usi un plugin di cache, come LiteSpeed Cache o WP Rocket, è importante svuotarla prima di eseguire la scansione con il debugger.
Puoi farlo dal pannello di amministrazione di WordPress nelle impostazioni del plugin, dove troverai un pulsante per svuotare la cache manualmente.
Per esempio se usi LiteSpeed Cache, nella sezione Toolbox > Purge trovi le funzionalità Purge All, per svuotare tutta la cache, e Purge Current Page, per svuotare solo la pagina che stai modificando.
Mentre in W3 Total Cache puoi usare il pulsante Empty All Caches, che elimina tutte le risorse memorizzate nella cache.
Qualunque plugin usi, dopo aver svuotato la cache puoi tornare sul debugger e forzare l’aggiornamento dell’anteprima.
Eseguire una nuova scansione con il Debugger di condivisione
Dopo aver svuotato la cache del sito puoi tornare sul Debugger di condivisione e forzare l’aggiornamento della cache di Facebook.
Inserisci l’URL della pagina che vuoi aggiornare nel campo apposito.
Nella schermata successiva clicca su Esegui lo scraping di nuovo.
A questo punto dovresti vedere le modifiche applicate.
Se così non fosse, o se dovessero comparire degli avvisi che bloccano il processo, esegui un’altra scansione. Non sempre Facebook rileva subito le informazioni corrette.
Tieni conto che queste modifiche non avranno effetto sui link alla pagina condivisi in precedenza, quindi l’unico modo per correggere le vecchie anteprime è cancellare i link e sostituirli.
Quando hai la necessità di aggiornare la cache di molti URL, puoi usare lo Strumento di invalidamento batch e farlo in un unico clic.
Risoluzione dei problemi più comuni
Quando il Facebook Sharing Debugger non mostra un’anteprima corretta, di solito dipende dalla cache, dai tag Open Graph o dalla configurazione di WordPress.
I problemi più frequenti sono:
- l’anteprima non aggiornata dopo modifiche alla pagina
- l’immagine di anteprima mancante o errata
- l’immagine visualizzata male
- il titolo o la descrizione sbagliati o incoerenti.
Puoi prevenire la maggior parte dei problemi se esegui la prima condivisione solo dopo aver ottimizzato i meta tag seguendo i consigli che vedremo, in modo da far registrare subito a Facebook la versione corretta della pagina.
Anteprima non aggiornata dopo una modifica
Se vedi la vecchia anteprima dopo aver modificato la pagina, significa che devi eseguire una nuova scansione con il debugger nel modo che abbiamo già visto. Prima però svuota la cache del sito, se la usi, accedendo alle impostazioni del tuo plugin di cache o della CDN.
Se il problema persiste anche dopo aver richiesto una nuova scansione, potrebbe dipendere dalla configurazione del server. Infatti sistemi di compressione come Gzip o firewall a livello server possono impedire al crawler di leggere correttamente l’HTML della pagina. In più Facebook può interrompere la connessione prima ancora di leggere la pagina se ci sono problemi con la connessione SSL. Per escluderlo puoi seguire la nostra guida e testare la validità del tuo certificato SSL.
Se invece riscontri errori di accesso come il Bad HTTP Response Code, verifica che il file robots.txt non stia bloccando il crawler di Facebook.
Immagine mancante nell’anteprima
Se nell’anteprima non compare nessuna immagine o compare l’immagine sbagliata, le cause più probabili sono due e bisogna andare per esclusione.
Controlla che il tag og:image sia presente nel codice HTML della pagina e che contenga l’URL corretto dell’immagine da mostrare. Dovresti vedere qualcosa del genere:
<meta property="og:image" content="https://tuosito.it/immagine.jpg"> Se il problema non si è ancora risolto, verifica che il file sia accessibile a tutti gli utenti, senza richieste di login o blocchi via robots.txt.
Se necessario, sostituisci l’immagine tramite plugin SEO o rivedi le impostazioni Open Graph del tema o del template della pagina.
Immagine visualizzata male
Se l’immagine compare ma è di scarsa qualità o tagliata, il problema di solito nasce dalle dimensioni inadeguate o dalla composizione. Infatti se il file non rispetta i requisiti, l’immagine di anteprima può essere ridotta o tagliata in modo imprevedibile. Tieni conto che:
- la dimensione ottimale è 1200×630 pixel;
- se usi un formato diverso, è importante che rispetti le proporzioni 1.91:1;
- le dimensioni minime accettate sono di 600×315 pixel.
Un file inferiore a 600×315 pixel potrebbe essere visualizzato male, mentre uno inferiore a 200×200 pixel verrà rifiutato: non comparirà nell’anteprima e vedrai un avviso di errore nel debugger.
Per una resa migliore delle immagini di anteprima può esserti utile specificare anche le dimensioni nei meta tag og:image:width e og:image:height, soprattutto se si discostano da quelle consigliate. Ecco un esempio per la larghezza:
<meta property="og:image:width" content="1200">E uno per l’altezza:
<meta property="og:image:height" content="630">Titolo o descrizione errati
Se il titolo o la descrizione nell’anteprima non corrispondono a quello che hai impostato, potrebbe esserci un conflitto tra più fonti che cercano di definire i meta tag.
Verifica che non ci siano conflitti tra plugin SEO e altri plugin per Open Graph, o le impostazioni del tema o del template.
È consigliabile mantenere il titolo dell’anteprima (og:title) sotto i 60 caratteri e la descrizione (og:description) sotto i 110 per evitare tagli nelle anteprime su mobile.
Per prevenire errori, l’indirizzo specificato in og:url dovrebbe corrispondere a quello canonico della pagina.
Domande frequenti
Come fare il debug di un link Facebook?
Inserisci nel Debugger di condivisione di Facebook l’URL della pagina che vuoi condividere, avvia l’analisi e controlla l’anteprima e i tag Open Graph. Se i dati non sono aggiornati, svuota la cache del tuo sito, vai nel debugger e usa il pulsante Esegui lo scraping di nuovo.
Devo usare il Facebook Debugger ogni volta che condivido un contenuto esterno?
Se usi Rank Math, AIOSEO o Yoast premium o un plugin Open Graph, puoi vedere l’anteprima del link dal pannello del tuo sito WordPress. Ma se non hai a disposizione questi strumenti il debugger di Facebook ti permette di controllare ed eventualmente correggere l’anteprima prima della condivisione.
Il Facebook Debugger non funziona: cosa fare?
Di solito se il Facebook Debugger mostra un’anteprima con errori la causa è nella configurazione dei tag Open Graph o nella cache del sito. Prova a svuotare la cache e richiedere una nuova scansione. Se non funziona, verifica il codice della pagina e la sua accessibilità.
Perché Facebook non mostra l’immagine di anteprima?
Può capitare se il crawler non riesce ad accedere alla pagina o se l’immagine non è accessibile senza login o se l’immagine non rispetta le dimensioni richieste da Facebook.
Perché il Debugger restituisce un codice di risposta HTTP errato?
Significa che Facebook non riesce ad accedere alla pagina. Verifica che l’URL sia accessibile e che il server o un plugin di sicurezza non stiano bloccando l’IP del crawler.
Cosa significa l’avviso “mancano le proprietà necessarie: fb:app_id”?
È uno degli avvisi più comuni nel debugger, ma nella maggior parte dei casi puoi ignorarlo perché il tag fb:app_id non è necessario per ottenere un’anteprima corretta.
Il Debugger funziona anche per Instagram?
Il Debugger di condivisione è progettato per Facebook, ma siccome anche Instagram sfrutta il protocollo Open Graph, i meta tag configurati correttamente aiutano anche lì.
Conclusioni
Se non usi un plugin SEO o Open Graph, il Debugger di Facebook è lo strumento più pratico per controllare come la piattaforma visualizzerà l’anteprima del link prima di condividerlo, ed è sempre indispensabile per forzare l’aggiornamento della cache di Meta dopo le modifiche alla pagina o per risalire alle cause di eventuali errori nell’anteprima.
In questa guida abbiamo visto che possiamo configurare i meta tag da cui dipende l’anteprima via plugin WordPress o via codice e che la cache del sito e quella di Facebook possono rallentare la visualizzazione delle modifiche, ma possono essere svuotate per velocizzare l’aggiornamento.
E tu stai già ottimizzando le anteprime dei tuoi link prima di condividerli? Se ti va, parliamone nei commenti.
Pronto a costruire il tuo sito WordPress?
Prova il nostro servizio gratuitamente per 14 giorni. Nessun impegno, nessuna carta di credito richiesta.
