Facebook può essere il luogo ideale per condividere i post e iniziare a pubblicizzare i propri contenuti. Tuttavia, potreste notare che alcuni dei vostri link condivisi non contengono le giuste immagini in evidenza. A volte Facebook può inserire un’immagine vecchia o, peggio ancora, nessuna immagine!

Per fortuna è possibile risolvere facilmente questo tipo di problemi con uno strumento chiamato Sharing Debugger. Questo strumento è in grado di individuare errori di visualizzazione specifici o problemi con i meta tag. Con questo software, potete consentire a Facebook di pubblicizzare correttamente i vostri post con le immagini corrette.

In questo articolo vi spiegheremo cos’è il Debugger di Facebook e come potete usarlo per correggere le immagini di WordPress. Iniziamo!


Come Funziona il Crawler di Facebook

Prima di iniziare a usare lo Sharing Debugger, è necessario capire come Facebook effettua il crawling dei vostri contenuti. Ogni volta che qualcuno usa un pulsante di condivisione social o copia e incolla un link alla vostra pagina, Facebook effettua una scansione dell’HTML del vostro sito web. Quindi, sulla base di queste informazioni, genera un’immagine di anteprima, un titolo e una descrizione.

Ecco alcuni requisiti generali che il vostro sito dovrebbe seguire per garantire che questo processo si svolga senza intoppi:

Ora che sapete un po’ di più sul crawler di Facebook e sul suo funzionamento, analizziamo alcuni problemi che potreste incontrare condividendo contenuti su questa piattaforma.

In Che Modo Facebook Recupera le Informazioni

Ogni volta che condividete contenuti con Facebook, le immagini vengono memorizzate nella cache dei suoi server e nel Content Delivery Network (CDN). Se si effettuano aggiornamenti sul sito, Facebook potrebbe mostrare ancora una vecchia immagine quando si va a condividerla: questo succede perché non recupera nuove informazioni, ma serve quelle già memorizzate nella cache.

Lo stesso vale per le informazioni sul vostro link e sul contenuto stesso: vengono recuperati i cosiddetti “Open Graph Meta Tags”. Secondo Facebook, il protocollo Open Graph trasforma una pagina web in un oggetto ricco in un social graph. In pratica, si tratta di tag (codice) che forniscono a Facebook informazioni su ciò che si sta condividendo.

Anche se non conoscete i meta tag Open Graph, probabilmente li state già utilizzando. Se avete installato plugin popolari come Yoast SEO o Social Warfare, questi aggiungono automaticamente i meta tag per voi dietro le quinte.

Prendiamo come esempio la nostra Guida introduttiva all’ottimizzazione delle prestazioni dei siti web. Se guardiamo il codice sorgente di quel post, possiamo vedere i seguenti dati relativi a Open Graph. Nota: Open Graph usa diversi attributi, come og:title e quello che ci interessa davvero per questo tutorial, ovvero og:image.

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" />
<meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." />
<meta property="og:url" content="https://kinsta.com/learn/page-speed/" />
<meta property="og:site_name" content="Kinsta®" />
<meta property="article:publisher" content="https://www.facebook.com/kinstahosting" />
<meta property="article:author" content="https://www.facebook.com/mark.gavalda" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
<meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />

Questo è il codice del nostro sito che Facebook esamina per determinare l’immagine in primo piano, il titolo e la descrizione da mostrare. Una volta che questi dati sono stati memorizzati nella cache, è necessario usare lo strumento Sharing Debugger per aggiornare i dettagli del post.

Come Usare lo Sharing Debugger di Facebook per Correggere le Immagini di WordPress

Ogni piattaforma o strumento presenta problemi o stranezze che vanno risolte. Lo strumento Facebook Sharing Debugger è stato creato per aiutarvi a risolvere i problemi con i meta tag Open Graph e a risolvere i problemi di caching.

È possibile trovare lo Sharing Debugger sul sito Meta for Developers alla voce Strumenti. Per eseguire il crawling di un post, è sufficiente inserire l’URL e fare clic su Debug:

Una schermata dello strumento Facebook Sharing Debugger dal sito di Meta for Developers
Strumento Facebook Sharing Debugger

Noi di Kinsta abbiamo recentemente aggiornato l’immagine del nostro articolo sull’ottimizzazione della velocità del sito web. Quando la inseriamo nel Debugger di Facebook, essa recupera innanzitutto le informazioni memorizzate nella sua cache:

Vecchia immagine e URL mostrati nello Sharing Debugger
Vecchia immagine e URL mostrati in Sharing Debugger

In questo caso, Facebook sta recuperando un’immagine vecchia, precedente all’aggiornamento del post. Possiamo anche vedere che og:image è un vecchio nome di file. Questo è ciò che le persone vedono quando condividono il nostro post.

Fase 1: Cancellare la Cache di WordPress per quell’URL

Per assicurarsi che Facebook acquisisca le informazioni più recenti sul post, è necessario cancellare la cache di WordPress. Se la vecchia immagine è ancora presente nella cache del sito, il Debugger di condivisione non sarà in grado di risolvere il problema, poiché si limiterà a recuperare le informazioni nella cache.

Con Kinsta server-level caching, ogni volta che un post viene aggiornato, la cache di quella pagina o di quel post viene cancellata automaticamente. Se si usa un’altra soluzione di caching o un plugin di terze parti, è necessario consultare la relativa documentazione per assicurarsi di sapere come cancellare la cache.

Se tutto il resto fallisce, potete sempre cancellare la cache sull’intero sito WordPress. Tuttavia, tenete presente che il vostro sito dovrà ricostruire la cache, il che può degradare la velocità del sito.

Se decidete che è necessario, aprite MyKinsta, navigate sul vostro sito WordPress e fate clic su Strumenti. Qui, fate clic su Cancella cache:

Cancellare la cache nella scheda Strumenti di MyKinsta.
Cancellare la cache nella scheda Strumenti di MyKinsta.

Se si verificano ancora problemi, l’immagine potrebbe essere memorizzata nella cache del CDN. In questo caso, potrebbe essere necessario svuotare la cache del CDN.

Fase 2: Nuovo Scraping nello Sharing Debugger

Ora che la cache è stata cancellata per il post o la pagina in questione, è necessario eseguire nuovamente lo scraping nello strumento Facebook Debugger. Per farlo, fate clic sul pulsante Scrape Again.

Pulsante Scrape again nello strumento Sharing Debugger
Scrape again nello Sharing Debugger

È possibile che si verifichino avvisi non sempre accurati. Per esempio, vediamo un avviso che indica che la nostra immagine ha superato la dimensione massima di 8 MB e che il server è troppo lento a rispondere. In realtà, la nostra immagine è di soli 160,63 KB e la pagina si carica in meno di 1 secondo.

Facebook mostra avvisi che dovrebbero essere corretti: schermata di una notifica di errore che dice "Warnings that should be fixed"
Avviso di Facebook

A questo punto si preme il pulsante Scrape Again per la seconda volta. Sì, può sembrare strano. Ma molte volte potrebbe essere necessario eseguire lo scraping due volte. Dopo questa operazione, si vedrà che ora viene estratta la nuova immagine in primo piano con il nuovo nome del file come attributo og:image:

Nuova immagine nello strumento Facebook Debugger
Nuova immagine nello strumento Facebook Debugger

È importante notare che questo non aggiornerà l’immagine per i post di Facebook già condivisi Questo ha un impatto solo sui post condivisi dall’utente o da altri dopo il fatto.

Altri Consigli sul Debugger di Facebook

Potete usare lo strumento Sharing Debugger non solo per aggiornare le vecchie immagini, ma anche il contenuto (testo) che vedete nei vostri post su Facebook. Il titolo e la descrizione sono entrambi Meta Tag di Open Graph. Quindi, se avete bisogno di riformulare qualcosa, aggiornatelo in WordPress e seguite esattamente gli stessi passaggi sopra descritti.

Correggere l’Avviso sulle Immagini “Properties Are Not Yet Available”

Inoltre, il fatto che abbiamo ignorato le avvertenze di cui sopra non significa che non siano sempre utili. Esistono infatti dimensioni consigliate per le immagini che si dovrebbero utilizzare. In caso contrario, l’immagine potrebbe non essere visualizzata affatto (come si vede in questo avviso):

Schermata Facebook Debugger che mostra un avviso di errore per via di un'immagine troppo piccola
Facebook Debugger – immagine troppo piccola

Le proprietà “og:image” fornite non sono ancora disponibili perché le nuove immagini vengono elaborate in modo asincrono. Per garantire che le condivisioni di nuovi URL includano un’immagine, specificate le dimensioni utilizzando i tag ‘og:image:width’ e ‘og:image:height’.

Questo avviso si è verificato perché la nostra immagine era troppo piccola. La dimensione minima dell’immagine richiesta da Facebook è di 200 x 200 pixel. Di solito più grandi sono, meglio è quando si tratta di immagini di Facebook.

In generale, 1.200 x 630 pixel sembrano funzionare meglio per la maggior parte delle persone. È possibile creare un’immagine più grande, ma Facebook la ritaglierà. Nel determinare le dimensioni dell’immagine, tenete presente questo rapporto di aspetto.

Se usate un plugin come Yoast SEO, vi consigliamo di impostare manualmente l’immagine. Le immagini in primo piano sul vostro tema WordPress potrebbero avere un rapporto di aspetto o una dimensione diversa. O magari non avete nemmeno usato le immagini in primo piano!

In questo caso, il plugin Yoast SEO consente di caricare manualmente un’immagine di dimensioni diverse solo per Facebook. È sufficiente trovare le impostazioni social di Yoast SEO per un post e aggiungere una nuova immagine per Facebook:

Social box Facebook di Yoast SEO nell’editor di WordPress
Social Box di Yoast SEO

Una volta caricata un’immagine di dimensioni corrette, questa popolerà i meta tag Open Graph che Facebook sta cercando. Inoltre, è possibile continuare a impostare manualmente il titolo e la descrizione, se necessario.

Aggiungere la Proprietà fb:app_id

Potrebbe anche essere visualizzato un avviso relativo a un ID app di Facebook mancante. È importante notare che questo non interferisce in alcun modo con la possibilità di condividere i post su Facebook. Spesso questo problema può essere semplicemente ignorato, ma limita la possibilità di usare i dati di Facebook Insights:

Schermata di un messaggio che avvisa che mancano le seguenti proprietà richieste: fb:app_id
Proprietà mancanti

Se volete ottenere questi dati aggiuntivi di Insights, dovete aggiungere l’ID dell’app di Facebook al vostro sito. Innanzitutto, create la vostra applicazione Facebook. Quindi copiate l’ID della vostra app di Facebook dalla bacheca dell’app.

Una volta impostata un’applicazione live di Facebook, potete aggiungere un meta tag per essa al vostro sito. Sebbene Yoast SEO supportasse questo processo, ha recentemente rimosso questa funzionalità. In alternativa, installate il plugin gratuito Meta Tag Manager:

Banner del plugin Meta Tag Manager
Meta Tag Manager

Per iniziare a usare questo strumento, andate su Impostazioni > Meta Tag Manager. Quindi impostate il Tag Type come “property” e il Property Value come “fb:app_id”:

Valori di Meta Tag Manager nella bacheca di WordPress
Valori di Meta Tag Manager

Nel campo Content Attribute incollate l’ID dell’app di Facebook. Una volta premuto Save Changes e cancellata la cache, queste informazioni verranno aggiunte ai meta tag del sito. Ora è possibile eseguire nuovamente lo scraping dell’URL per verificare se il problema è stato risolto!

Riepilogo

Speriamo che ora abbiate capito qualcosa in più sullo strumento Facebook Sharing Debugger e su come potete usarlo per risolvere i problemi e correggere le immagini sul vostro sito WordPress. In questo modo, tutti i vostri link condivisi conterranno immagini, titoli e descrizioni corrette.

Dopo aver notato un’immagine in primo piano non corretta nello Sharing Debugger, cancellate tutti i livelli di cache del vostro sito web e fate un nuovo scrape. Le nuove immagini dovrebbero apparire correttamente per essere condivise su Facebook.

Spesso si possono evitare problemi con i link di Facebook cancellando regolarmente la cache del sito. Con un piano di hosting Kinsta, la cache della vostra pagina verrà automaticamente cancellata ogni volta che aggiornate il contenuto!


Tieni tutte le tue applicazioni, database e Siti WordPress online e sotto lo stesso tetto. La nostra piattaforma cloud ad alte prestazioni è ricca di funzionalità e include:

  • Semplici configurazione e gestione dalla dashboard di MyKinsta
  • Supporto esperto 24/7
  • I migliori hardware e network di Google Cloud Platform, con la potenza di Kubernetes per offrire la massima scalabilità
  • Integrazione di Cloudflare di livello enterprise per offrire velocità e sicurezza
  • Copertura globale del pubblico con 35 data center e 275+ PoP in tutto il mondo

Prova tu stesso con 20 dollari di sconto sul primo mese di Hosting di Applicazioni o Hosting di Database. Esplora i nostri piani oppure contattaci per trovare la soluzione più adatta a te.