Le cause di una condivisione non riuscita di un post su Facebook possono essere molteplici e alcune più insidiose di altre da risolvere. Negli scorsi giorni mi sono ritrovata a studiare il fenomeno a causa di due problemi differenti ma con il medesimo risultato: la mancata condivisione di un post su Facebook.
» Il primo riscontrato sul sito VeronikaGi: una volta pubblicato il sito online, non si riusciva a condividere niente su Facebook. Non comparivano ne il titolo del post ne la descrizione e tanto meno l’immagine. Oppure mancava una delle tre parti.
Dopo un attimo di perplessità mi sono subito messa all’opera per controllare cosa potesse essere andato storto. Per prima cosa ho controllato la SEO del post in caso ci fossero errori e, subito dopo, il settaggio del plugin SEO (WordPress SEO Plugin by Yoast) ma tutto era nella norma.
Ormai dopo anni di convivenza con WordPress ho messo in attuazione quello che chiamo “La prova antincendio” (The Drill) ovvero disabilitare tutti i plugin e attivarli uno a uno per vedere se ci sia un’interferenza tra di loro. Ho così notato che un plugin in particolare dava fastidio, bloccando in parte i codici che servono a condividere i vari elementi su Facebook. Era cosi invasivo che anche disabilitandolo annullava ogni mio tentativo di porre rimedio alla cosa.
Normalmente avrei deciso di disabilitare il plugin e farne a meno, ma per la mia cliente era fondamentale averlo in quanto le permetteva il Login Automatico tramite i Social Network per accedere ai commenti del proprio blog.
» Il secondo riscontro invece è stato nel sito di Valentina, Unwritten. A lei la condivisione andava bene su tutti i post tranne uno. Quando mi ha scritto (il giorno dopo aver scoperto il problema nell’altro sito) ho avuto un attimo di sano e puro panico. Il comune denominatore del problema era solo uno: entrambi i siti erano stati gestiti/creati da me! Passata la paranoia, ho capito che dovevano esserci altre cause del malfunzionamento e infatti avevo notato nel post di Valentina (a differenza di quello di Veronica) una meta-descrizione decisamente troppo breve.
La mia ricerca su Google ha portato alla luce molti articoli, alcuni troppo datati, altri non completi. Il più esaustivo è stato “Per una corretta condivisione su Facebook” (versione aggiornata e rivisitata di: “Dramma e disperazione: l’anteprima di Facebook“) che vi consiglio vivamente di leggere.
Le Cause di una condivisione non riuscita di un post.
• Mancanza dei Tag OpenGraph nell’Header: in base a come compare l’anteprima del link condiviso su Facebook potete capire quale tag manca. Questi tag sono l’elemento fondamentale per la condivisione su tutti i Social Network. (Qui potrete trovare la spiegazione di questi elementi direttamente nella sezione Developers di Facebook, in inglese.)
• Conflitto con altri Plugin di WordPress: generalmente creano conflitto quei plugin che richiedono l’attivazione tramite API/Secret Key di Facebook, quelli che dovete configurare tramite Facebook Developers. Questo accade perché vari plugin stanno cercando di sovrascrivere gli stessi valori, generando così un annullamento dei tag e del loro contenuto.
• Errore nel Settaggio del Plugin SEO: nelle impostazioni generali della sezione ‘Social’ non aver spuntato la casella apposita (come da immagine).
• Meta-descrizione Troppo Corta: Caso particolare e raro, quando si compila tramite il plugin la meta descrizione di un post (ovvero lo snippets che compare nella SERP) troppo corta può creare problemi di condivisione. Questa è la causa più remota e anomala, mi è successa solo con un singolo post e non sono riuscita a replicarla. Quindi potrebbe essere stato un bug temporaneo, ma preferisco segnalarlo.
[su_spoiler title=”Anatomia di un link condiviso su Facebook.” style=”fancy”]
Prima di parlare della soluzione al problema vi voglio illustrare in maniera sintetica l’anatomia di un link Facebook, in modo che possiate capire quale parte del protocollo OpenGraph manca.
[/su_spoiler]
[su_spoiler title=”Tag OpenGraph: cosa sono e come funzionano.” style=”fancy”]
Gli OpenGraph sono elementi fondamentali per la condivisione dei contenuti del vostro sito internet sui vari social network. Il primo pioniere è stato Facebook, che nel 2010 ha introdotto la possibilità di integrazione dei contenuti del proprio sito sulla piattaforma social come fossero degli oggetti appartenenti al sito stesso. Oggi anche altri Social stanno integrando gli OpenGraph (Google+ & Twitter, per fare un esempio).
Questi elementi servono per avere maggior controllo e potere di personalizzazione su come compaiono i contenuti una volta condivisi su Facebook (o su gli altri social network). In caso ci fosse la totale assenza di uno o più elementi all’interno del vostro theme/sito, Facebook va a ripescare in maniera autonoma i MetaTag standard. Anche da questo potrebbero nascere errori di condivisione, come l’inserimento di un’immagine all’interno del codice che non è inerente all’articolo (o pagina) da voi pubblicato. Qui potrete trovare la lista di tutti i tag esistenti e dei loro codici.
I vari tag, a meno che non usiate un CMS (come WordPress, o Joomla), vanno inseriti a mano nei siti statici (all’interno della sezione < head > ) e cambiati su ogni pagina che andrete ad aggiornare/aggiungere o condividere, perché sono univoci e dunque validi per tutto il sito.
Esistono 5 principali Tag che dovrebbero essere presenti in ogni pagina di un sito: il tipo, il titolo, l’immagine, la descrizione e l’url.
og:type
Descrive la tipologia di oggetto che state andando a condividere: se è un sito o un articolo. Esistono tantissimi tipi di tag ma quelli più comuni in ambito web sono website, article e blog. Quelli legati all’intrattenimento possono essere book, movie, game. Questo genere di tag è molto utile quando nel vostro sito è presente il bottoncino “mi piace” di Facebook perché in base al tag di appartenenza comparirà nelle sezioni specifiche del social network. Ad esempio siti come IMBD hanno il tag impostato su movie, ma cambia in base alla sezione, potrebbe essere actor o tv shows.
Ma passiamo a parlare dei 3 tag fondamentali per la corretta visualizzazione degli elementi su Facebook.
og:title
Questo è un tag che raramente non compare su Facebook, anche perché il social network ricerca subito il tag < title > che è impostato la maggior parte delle volte in maniera automatica.
Non c’è limite nella lunghezza dei caratteri che possiamo usare, ma Facebook ha di regola che ogni titolo che supera i 100 caratteri, vengono visualizzati solo i primi 88. Quindi consiglio di non superare mai i 90-100 caratteri.
og:description
E’ praticamente l’equivalente del tag HTML “Meta Description” con l’unica differenza che anziché comparire all’interno dei motori di ricerca, questa è la descrizione che comparirà sotto il titolo di Facebook. A differenza del tag in HTML questa descrizione non avrà nessun impatto On Page SEO, quindi non perdete tempo a scrivere il testo con le parole chiave o altro. Facebook visualizza all’incirca 200 caratteri all’interno delle descrizioni.
og:image
Questo è il tag più importante in assoluto perché è quello che cattura l’attenzione del lettore, e quello che Facebook ricerca in ogni parte del sito. Se non viene settato in modo corretto potreste ritrovarvi con un qualsiasi banner o immagine presente all’interno del vostro sito sul post di condivisione ma che non ha niente a che fare con il contenuto che state pubblicando.
Le immagini visualizzate da Facebook sono di tre tipi:
– Visualizzazione Orizzontale: sopra il post, succede quando l’immagine è più larga che lunga (appunto a inquadratura orizzontatale) e generalmente devono avere una grandezza superiore ai 500 pixels.
– Visualizzazione Verticale: al lato del box di condivisione, succede quando l’immagine è più lunga che larga (inquadratura verticale).
-Visualizzazione Thumbnail: quando l’immagine è inferiore ai 400×200 pixels, e viene visualizzato solamente un quadratino di anteprima.
og:url
Semplicemente l’url canonico di una pagina.
[/su_spoiler]
Come risolvere il Problema
Ci sono varie prove da fare, purtroppo il procedimento è un classico “Prova ed Errore“, sopratutto se si tratta di CMS complessi come WordPress dove le variabili sono tante quanti i plugin installati e la complessità del theme scelto.
Per prima cosa dovete analizzare la condivisione non riuscita del post.
Facebook ha messo a disposizione questo Debugger, un elemento molto comodo che vi evita di impazzire e vi indica che genere di problema ha il vostro post/sito/pagina.
Purtroppo è in inglese, ma è abbastanza semplice comprendere i risultati dell’analisi del link che vi avete inserito. Come potrete notare dall’immagine, la risposta ideale di ogni sito dovrebbe essere senza segnalazione di errori. Questo debugger vi permette anche di azzerare la cache di Facebook, cosicché se avete sistemato il problema, vi offre la possibilità di resettare le informazioni inerenti al post e poterlo pubblicare senza problemi.
Questo passaggio vi potrebbe permettere di risolvere tutto senza dover mettere mano al codice perché a volte Facebook – che non è infallibile – potrebbe aver problemi a caricare tutte le informazioni del caso e caricarvi un link incompleto. Passando il link attraverso il Debugger si forza cosi l’azzeramento della cache permettendovi di visualizzare il post come desiderate.
Alla fine della schermata infatti vi è l’anteprima della condivisione e se è corretta, con questo semplice passaggio avrete risolto i problemi.
Ma se il Debugger mi rimanda dei codici di errore?
… E l’anteprima non è corretta?
• Controllate i settaggi del vostro plugin SEO. Su Yoast vi ho già mostrato come dovete impostare la sezione “Social” inerente a Facebook. E inoltre controllate che abbiate compilato in maniera appropriata tutti i vostra metatag del caso: titolo, descrizione e che ci sia l’immagine in evidenza (sia nel post che nella pagina).
In caso usaste Yoast e avete un post ricco di foto, vi consiglio di impostare direttamente la foto che volete che compaia nell’anteprima di Facebook, così da evitare tempi di caricamento epici su tutte le foto contenute nell’articolo.
• Controllare i vostri plugin e, se necessario, disattivateli tutti e riattivateli uno a uno. Quando notate che un plugin vi crea problemi cercatene uno complementare. Io ho notato che quelli che creano più interferenze sono quelli che obbligano il settaggio tramite la sezione “Developers” dei profili. Come possono essere: Login automatico tramite Social Newtwork per i commenti, il tasto “Mi Piace” per Facebook e tutti quei plugin che richiedono l’accesso ai dati dei canali social.
… Niente, ancora non va. Cosa si fa?
Aggiunta manuale dei codici OpenGraph.
In caso non abbiate un plugin SEO (per favore, siamo nel 2014, scaricatevelo e installatelo immediatamente), oppure avete tutto settato nella maniera più corretta ma ancora non funziona… Si passa all’inserimento manuale degli OpenGraph, e qui vi consiglio vivamente di farlo fare a qualcuno che si intende di codici. Dovrete editare due file importantissimi per WordPress: il functions.php e header.php.
Per quanto riguarda le Immagini
Questo è il codice per stabilire l’immagine principale che si vuole assegnare al sito, quando in un post/pagina non vengono postate foto. Serve anche a inserire l’immagine per quei siti che hanno un Homepage di tipologia ‘blog’ senza un vero e Header grafico. Così Facebook non va a pescare chissà che foto dall’intero sito.
Ho trovato due possibili soluzioni:
1) Questo è un codice che va inserito all’interno della pagina header.php che prevede l’utilizzo dell’immagine in evidenza e quindi se non presente imposta un’immagine da noi scelta come predefinita. «/wp-content/themes/MyTheme/images/preview.jpg» va modificato con l’esatto url di dove abbiamo posizionato l’immagine.
2) Questo è un secondo modo che prevede l’inserimento di un codice sia nell’header.php che nel file functions.php
Funzionano entrambe, io preferisco la prima: veloce e semplice.
Per quanto riguarda la Descrizione
La soluzione migliore l’ho trovata all’interno del primissimo articolo che vi ho linkato. Questo funziona quando Facebook non riesce a recuperare le informazioni della pagina nelle prime righe dell’articolo, andando a creare una descrizione unica e statica per l’intero sito. Bisogna inserire queste righe in fondo alla pagina functions.php. Mentre questa riga va aggiunta all’interno della pagina header.php, prima della chiusura del tag di testata.
In caso non aveste letto la digressione su gli OpenGraph (ma vi consiglio di farlo, perché vi aiuta a comprendere in pieno cosa sono e come funzionano) vi ricordo che questi tag sono univoci e statici e valgono per l’intero sito. Quindi vanno settati in maniera oculata e solo se strettamente necessario. Le impostazioni che ho usato prendono in considerazione l’opengraph solo quando ha escluso la presenza degli altri elementi all’interno della pagina, così da non sovrascrivere niente di importante.
Non voglio rinunciare al plugin ‘incriminato’: cosa faccio?
Vi siete resi conto che l’assenza di quel plugin condiziona notevolmente l’esistenza del vostro stesso sito? Che proprio quel piccolo plugin è il tassello immancabile di cui non potete fare proprio a meno? Beh, forse, c’è una soluzione, ma vi dico fin da subito che è macchinosa e poco pratica. A me ha funzionato ed ho installato su wordpress: SEO Plugin by Yoast.
1) Prima di pubblicare il vostro articolo compilate ogni campo richiesto dal plugin SEO, sia nella sezione “Generale” che “Social”, il contenuto può anche essere uguale, ma devono essere entrambe le sezioni compilate.
2) Pubblicate il vostro articolo normalmente.
3) Copiate l’Url e incollatelo nel sito Debugger di Facebook, e fatelo analizzare.
4) Condividete il vostro articolo su Facebook.
Purtroppo questa non solo è una procedura poco comoda, ma non è nemmeno certo che funzioni. Io l’ho provata sul sito della mia cliente andando a modificare quegli articoli che venivano condivisi in maniera errata, e ha funzionato. Ma non posso assicurare al 100% che sia così ogni volta. Solo il tempo me lo dirà. Intanto sto continuando a studiare la situazione e se dovessi trovare altri sviluppi sarete i primi a saperlo!
Cosa proprio non funziona?
Modificare manualmente l’anteprima della propria condivisione Facebook. Se si è amministratori di una pagina, oppure di un profilo, si sa che si può modificare il titolo della condivisione e aggiungere un’immagine. Beh, per quanto possa sembrare una soluzione efficace, la prima persona che andrà a condividere il vostro post si ritrova a punto e a capo con un link mal-funzionate.
Se avete trovato questo articolo utile e interessante, per favore, condividetelo e salvate un povero Web Designer da una crisi di nervi!
