Sia che siate blogger, social media marketer o anche solo piccoli imprenditori, a un certo punto probabilmente vi troverete di fronte al problema di Facebook che non mostra l’immagine corretta del vostro sito WordPress. A volte Facebook potrebbe prelevare una vecchia immagine o, peggio ancora, nessuna immagine! Per fortuna, potete facilmente trovare una soluzione a questo tipo di problema utilizzando uno strumento chiamato Facebook Debugger. QUi di seguito sono riportate alcune situazioni comuni in cui potreste imbatterti e come affrontarle.

In che Modo Facebook Recupera le Informazioni

Ogni volta che condividete contenuti su WordPress, Facebook memorizza le vostre immagini sui propri server e CDN (si legga qui cosa è un CDN e come funziona). Potete immaginarlo allo stesso modo in cui funziona il caching del vostro sito: a volte dovete svuotare la cache per far funzionare di nuovo le cose. Lo stesso vale a volte per Facebook. Se apportate aggiornamenti al vostro sito, quando andate a condividerli Facebook potrebbe ancora mostrare una vecchia immagine. Questo perché non recupera le nuove informazioni, ma piuttosto fornisce le informazioni che ha già memorizzato nella cache.

Lo stesso vale per le informazioni sul link e sul contenuto stesso. Facebook recupera quelli che chiamano Open Graph Meta Tags. Secondo quanto afferma Facebook, il protocollo Open Graph consente a qualsiasi pagina Web di diventare un oggetto significativo in un social graph. Fondamentalmente, si tratta di tag (codice) che forniscono a Facebook informazioni su ciò che si sta condividendo.

Non siete sicuri di star utilizzando i Meta Tag di Open Graph sul vostro sito? Beh, probabilmente li state utilizzando, solo che potreste non saperlo. ? Se state utilizzando plugin popolari come Yoast SEO o Social Warfare, questi infatti aggiungono automaticamente questi tag per voi.

Prendiamo ad esempio la nostra guida all’ottimizzazione della velocità dei siti web. Se analizziamo il codice sorgente di quel post, possiamo vedere i dati relativi a Open Graph riportati di seguito. Nota: Open Graph utilizza diversi attributi, come og:title e quello che ci interessa davvero per questo tutorial, che è og.image. Questo è il codice presente nel nostro sito che Facebook cerca per determinare l’immagine in evidenza, il titolo e la descrizione da mostrare.

<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 Managed WordPress Hosting" />
<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" />

Utilizzare il Debugger di Facebook

Come con qualsiasi piattaforma o strumento, ci saranno problemi o anomalie che dovrete risolvere, soprattutto se non seguite le linee guida stabilite come migliori pratiche. Il Debugger di Facebook è stato creato per aiutarvi a risolvere le anomalie che possono generarsi con i meta tag Open Graph e per risolvere i problemi relativi al caching.

Potete trovare il Facebook Debugger nel sito Facebook for developers, alla voce Strumenti e assistenza. Se siete tra quelli che condividono molti contenuti su Facebook, questo è un buon link da aggiungere ai segnalibri per futuri riferimenti.

Facebook Debugger

Facebook Debugger

Per eseguire la scansione di un post è sufficiente inserire la URL e fare clic su “Debug”. Nel nostro esempio utilizzeremo un caso reale. Abbiamo recentemente aggiornato l’immagine del nostro articolo sull’ottimizzazione della velocità dei siti web. Quando lo inseriremo nel Debugger di Facebook, per prima cosa estrarrà le informazioni memorizzate nella cache che sono presenti dal loro lato (come mostrato di seguito).

Questo è ciò che le persone vedono realmente quando condividono il nostro post. Tuttavia, in questo caso, sta prelevando una vecchia immagine, esistente prima che aggiornassimo il post. ? Possiamo anche vedere che il valore di og:image è il vecchio nome del file.

L'immagine e la URL precedenti in Facebook Debugger

L’immagine e la URL precedenti in Facebook Debugger

Quindi cosa possiamo fare? Ci sono due cose che devono essere fatte. Seguite i passaggi qui sotto.

Passaggio 1: Cancellate la Cache di WordPress per Quell’URL

La prima cosa che dobbiamo fare per garantire a Facebook di prendere le informazioni più recenti è cancellare la cache nel nostro sito WordPress. Esatto, tecnicamente ci sono due livelli di caching che potrebbero essere qui coinvolti. Se la vecchia immagine è ancora memorizzata nella cache del vostro sito, il Debugger di Facebook non sarà in grado di aiutarvi a risolvere il problema, poiché recupererà semplicemente le informazioni presenti nella cache.

Per quanto riguarda il caching di WordPress, però, siamo OK (e possiamo procedere al passaggio 2), perché con la cache Kinsta a livello di server, ogni volta che un post viene aggiornato, la cache di quel post o di quella pagina viene cancellata automaticamente. Si legga di più su come funziona la cache di Kinsta. Se state utilizzando una soluzione di caching diversa, o un plugin di terze parti, dovrete consultare la loro documentazione per accertarvi di come svuotare la cache per una URL. Ecco alcuni link ad alcune delle soluzioni di caching più popolari:

Se tutto il resto fallisce, potete sempre cancellare la cache del vostro intero sito WordPress (come mostrato più sotto). Tuttavia, per motivi di performance, di solito questo non è raccomandato in quanto il sito dovrà ricostruire la cache, alzando, nel frattempo, i tempi di caricamento.

Svuotare la cache di WordPress

Svuotare la cache di WordPress

E se rilevate ancora problemi, la vostra immagine potrebbe anche essere memorizzata nella cache del vostro CDN. In tal caso potrebbe essere necessario svuotare la cache del CDN.

Passaggio 2: Eseguire di Nuovo lo Scraping nel Debugger di Facebook

Ora che la cache è stata cancellata per il post o per la pagina in questione, sarà necessario analizzarla nuovamente in Facebook Debugger. Quindi inseriamo la URL e clicchiamo sul pulsante “Esegui lo scaping di nuovo”.

Esegui lo scaping di nuovo in Facebook Debugger

Esegui di nuovo lo scaping in Facebook Debugger

Potresti visualizzare un avviso. Nella nostra esperienza, questi non sono sempre molto precisi. Ad esempio, viene visualizzato un avviso che indica che la nostra immagine ha superato la dimensione massima di 8 MB, o che il server era troppo lento per rispondere. Prima di tutto, la nostra immagine non è affatto vicina a quella dimensione, infatti, è solo 160,63 KB. In secondo luogo, il nostro server è veloce e l’intera pagina si carica in meno di 1 secondo.

Avviso di Facebook superata dimensione massima

Avviso di Facebook

Quindi abbiamo semplicemente premuto il pulsante “Esegui lo scaping di nuovo” per la seconda volta. Sì, potrebbe sembrare strano. Ma potrebbe succedere spesso di aver bisogno di eseguire lo scraping due volte. Ci vogliono solo pochi secondi. E boom! Eccoci. Di seguito possiamo vedere che Facebook sta prelevando la nostra nuova immagine in primo piano e se analizziamo l’attributo og:image, questo corrisponde effettivamente al nuovo nome del file.

Alle prese con i tempi di inattività e problemi di WordPress? Kinsta è la soluzione di hosting progettata per farvi risparmiare tempo! Scopri i nostri servizi
Nuova immagine in Facebook Debugger

Nuova immagine in Facebook Debugger

È importante notare che questo non aggiornerà l’immagine per i post di Facebook già condivisi, ma ha effetto solo sui post che voi o altri condividerete da questo momento in avanti.

Altri Suggerimenti sul Debugger di Facebook

Potete utilizzare il Debugger di Facebook non solo per aggiornare le vecchie immagini, ma anche il contenuto (testo) che vedete sui vostri post di Facebook. Sia il titolo che 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 precedenti.

Inoltre, solo perché abbiamo ignorato gli avvertimenti di cui sopra non significa che questi non siano mai utili. In effetti, ci sono dimensioni consigliate per le immagini che dovreste considerare. Altrimenti, possono accadere cose brutte. Ad esempio un’immagine può non essere visualizzata affatto (come mostrato di seguito in questo avviso).

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

Facebook Debugger - immagine troppo piccola

Facebook Debugger – immagine troppo piccola

Quanto sopra si è verificato perché la nostra immagine era troppo piccola. La dimensione minima dell’immagine richiesta da Facebook è di 200 x 200 pixel. Di solito le dimensioni maggiori sono da preferire quando si tratta di immagini per Facebook. Buffer ha un ottimo post con tutte le dimensioni di immagine consigliate per i social media. 1.200 x 630 pixel sembra funzionare meglio per la maggior parte delle persone. Va bene anche utilizzare dimensioni maggiori, infatti la nostra immagine del post nel primo esempio era 1460 x 730. Ricordate solo che Facebook taglierà qualunque cosa sia più grande, e quindi il mantenimento delle proporzioni diventa una delle questioni più importanti.

Se state utilizzando un plugin come Yoast SEO, può anche essere consigliato impostare manualmente l’immagine. Forse le vostre immagini in primo piano sul vostro tema WordPress hanno proporzioni o dimensioni diverse. O forse non utilizzate nemmeno le immagini in primo piano!

In questo caso, il plug-in Yoast SEO vi consente di caricare manualmente un’immagine di dimensioni diverse solo per Facebook, che andrà a popolare i Meta Tag di Open Graph. È anche possibile impostare manualmente il titolo e la descrizione, se necessario.

Il social box di Facebook in Yoast SEO

Il social box di Facebook in Yoast SEO

Riepilogo

Speriamo di aver chiarito qualcosa in più per quel che riguarda il Facebook Debugger e come potete usarlo per adattare le immagini del vostro sito WordPress. Ricordatevi di cancellare tutti i livelli di caching prima di effettuare lo scraping. Le vostre nuove immagini dovrebbero quindi apparire correttamente per essere condivise da tutti su Facebook.


Se ti è piaciuto questo tutorial, allora apprezzerai molto il nostro supporto. Tutti i piani di hosting di Kinsta includono supporto 24/7 da parte dei nostri sviluppatori e tecnici veterani di WordPress. Chatta con lo stesso team che supporta i nostri clienti Fortune 500. Scopri i nostri piani