Seguici su Telegram, ne vale la pena ❤️ ➡ @trovalost
Vai al contenuto

Debug Facebook: verificare come FB “vede” gli URL

Tag:

Il Debugger di Facebook è uno degli strumenti più efficaci che si possano utilizzare per garantire la massima compatibilità  sia alle app che usano i social (ad esempio Hootsuite o IFTTT) che alle semplici condivisioni dei link dei nostri articoli su Facebook, al fine di mostrarli nel modo più adeguato. Serve a verificare come Facebook “veda” i nostri link, a controllare se tutti i tag del caso siano inseriti a dovere nella pagina, e a rilevare errori sulla parte HTML dell’Open Graph per poterli correggerli. Grazie a questo strumento, infatti, è possibile effettuare il debug lato Facebook del nostro sito, un po’ come faremmo con il debug del sito, classico compito da tecnici o webmaster, ma rapportato al comportamento ed alla “comunicazione” tra le pagine web del sito e quelle del nostro social network.

Nota: lo strumento facebook debugger può essere usato anche come WhatsApp debugger, per controllare come si vedranno gli URL all’interno del contesto delle chat.

Dove trovare il debugger di FB

Dove troviamo il debugger di Facebook? Il link non è molto immediato e non è presente all’interno del dominio principale facebook.com Per accedere al debugger di Facebook, infatti, bisogna andare sul sottodominio di Facebook dedicato agli sviluppatori, ovvero:

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

Per accedere in modo corretto, ovviamente è necessario essere registrati su Facebook ed accedere con un account valido e attivo, che potrà  essere il nostro oppure quello di un cliente, ad esempio. In genere comunque le attività  di gestione più avanzate come quelle delle facebook ads sono demandate alla sezione business del sito, ma in questo caso basta un account qualsiasi e non è quasi mai necessario essere proprietari del sito che si vuole testare.

A cosa serve il debugger

Il tool in questione permette di fare una cosa molto utile, ovvero 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 standard Open Graph.  Tutto questo permette anche di evitare di dover condividere il link in pubblico a casaccio, senza prima testarlo e verificare che l’anteprima si veda bene.

Ecco un esempio dell’uso del debugger sulla pagina di questo articolo, dove possiamo vedere che la richiesta è andata a buon fine (codice di risposta è 200, cioè “tutto ok”), che era già  presente un “mi piace” all’articolo e nella riga possiamo vedere come sarà  “visto” dagli altri utenti FB con cui lo andremo a condividere.

esempio facebook debugger

Che cos’è Open Graph

Open Graph (sito ufficiale) è uno standard web stabilito da Facebook che, di fatto, si integra in HTML nella parte <HEAD> e permette ad una qualsiasi pagina web, se correttamente implementato, di poter estendere le proprie funzionalità  e di poter controllare il suo aspetto lato social. Di fatto, Facebook lavora con “oggetti” interconnessi tra di loro che possono essere profili, gruppi, pagine e cosଠvia, regolamentati da una complessa politica di interazione ed alla base del successo che il social network blu ha avuto negli ultimi anni.

Alla base di tutto vi sono pertanto 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.

Plugin WordPress per abilitare il supporto a Open Graph

Open Graph, nonostante una marcata ambizione a livello progettuale, possiede una sintassi semplice e lineare, che nei vari siti web può essere implementata anche mediante plugin WordPress appositi, tra cui consigliamo di adottare questi due per il proprio sito:

  • WordPress plugin – Facebook’s official WordPress plugin, which adds Open Graph metadata to WordPress powered sites.
  • Alternate WordPress OGP plugin – A simple lightweight WordPress plugin which adds Open Graph metadata to WordPress powered sites.

Guida base ai metadata di Open Graph

L’obiettivo è quello di abilitare le pagine web a diventare degli “oggetti” che Facebook sia in grado di leggere ed interpretare, e questo in prima istanza in termini di:

  • URL canonico da cui Facebook deve prelevare i dati;
  • titolo dell’URL;
  • tipo di URL;
  • immagine di anteprima mostrata;

Tutto questo è possibile mediante semplici meta-dati che son simili, per intenderci, ai meta tag <meta> usati per la metadescription lato SEO. I meta-data indispensabili lato Open Graph sono di fatto i seguenti quattro, almeno ad oggi:

  • og:title – Il titolo dell’articolo, nel nostro esempio: “Facebook Debugger: impostare le anteprime dei link“
  • og:type – Il tipo di URL, che in questo caso è semplicemente un articolo (riferito nell’HTML come article)
  • og:image – L’indirizzo assoluto dell’immagine che rappresenta la pagina web a livello di anteprima
  • og:url – L’URL canonico da cui prelevare i dati, che viene specificato a parte perchè in genere non è detto che vogliamo che Facebook prenda in automatico quello della pagina corrente (potrebbe ad esempio voler prendere l’URL del logo dalla home page del nostro sito

A livello di HTML, nella pagina con supporto Open Graph avremo qualcosa del genere:

<html prefix="og: https://ogp.me/ns#">
<head>
<title>Facebook Debugger: impostare le anteprime dei link</title>
<meta property="og:title" content="Facebook Debugger: impostare le anteprime dei link" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://trovalost.it/facebook-debugger/" />
<meta property="og:image" content="https://trovalost-e96d.kxcdn.com/wp-content/uploads/2019/08/Open_Graph_anteprime_link_facebook.png" />
...
</head>
...
</html>

Si tratta solo di un esempio che, nel vostro caso, potrebbe non essere seguito alla lettera, ma che si pone come modello standard per quello che riguarda la corretta messa a punto degli Open Graph di Facebook nel vostro sito. àˆ anche implicito che, a seconda dei casi, dei theme usati dal sito e delle personalizzazioni presenti nello stesso, questi dati possano cambiare ed incrociare una varietà  di casi differenti (ad esempio l’immagine, nel caso di questo sito, viene prelevata dalla CDN di KeyCDN).

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.

Metadati opzionali di OG (Open Graph)

The following properties are optional for any object and are generally recommended:

  • og:audio – URL dell’audio associato al contenuto (ad esempio canzone o audio del podcast dell’articolo)
  • og:description – Descrizione che apparirà  sotto al titolo in Facebook
  • og:locale – La lingua del contenuto, dovrebbe essere it_IT per l’Italia e  en_USdi default.
  • og:locale:alternate – Lista o array di lingue supportate, se più di una
  • og:site_name – Nome standard del sito web da cui è tratto il contenuto
  • og:video – URL del video associato al contenuto

Coem fare il check via debugger di Facebook

Problema: 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?

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

  1. 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.
  2. Bisogna adesso aprire il debugger e fare login con un account Facebook.
  3. 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…“.
  4. Adesso bisogna cliccare su Debug, ed attendere qualche istante.
  5. 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“
  6. Per inserire in automatico gli Open Graph in un sito WordPress si possono installare uno dei plugin consigliati in precedenza.
  7. 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.

Schermata 2019 08 18 alle 10.31.24

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.

Un esempio di quello che è possibile vedere con il Facebook Debugger con il  è il seguente, in cui possiamo vedere:

  • la data in cui è venuta l’operazione di scraping dell’URL;
  • l’orario dello scraping
  • il codice HTTP status di risposta (200 significa che è tutto ok, e la pagina funziona correttamente, ad es.)
  • gli URL canonici e recuperati dall’app (possono essere diversi, in genere coincidono)
  • l’anteprima del link, che mostrerà  come verrà  mostrato l’URL del nostro sito su Facebook una volta che viene condiviso.

Facebook Debugger esempio

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)

👇 Da non perdere 👇

Questo sito web esiste da 4469 giorni (12 anni), e contiene ad oggi 7559 articoli (circa 6.047.200 parole in tutto) e 16 servizi online gratuiti. – Leggi un altro articolo a caso
5/5 (62)

Ti sembra utile o interessante? Vota e fammelo sapere.

Leggi anche:
Questo sito contribuisce alla audience di sè stesso.
Il nostro network informativo: Lipercubo.it - Pagare.online - Trovalost.it.