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:
- Gzip e codifica deflate nel server
- Elencare le proprietà dell’open graph all’interno di 1 MB di HTML
- Limitare il tempo di caricamento della pagina a pochi secondi
- Aggiungere stringhe dell’user agent o gli indirizzi IP del crawler all’elenco dei permessi del vostro sito
- Assicurarsi che l’informativa sulla privacy sia scansionabile
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:
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:
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:
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.
È 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.
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:
È 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):
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:
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:
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:
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”:
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!
