Marco AgustoniMarco Agustoni

Adobe Muse: come correggere le anteprime errate dei post su Facebook

0 COMMENTI

anteprima-fb

Hai problemi nella condivisione di un link da Adobe Muse a Facebook? Spesso può capitare che Fb non riesca a generare automaticamente l’anteprima dei post e mostri informazioni errate (immagini, titoli e descrizioni).

In questo articolo vedremo come ovviare al problema sistemando ogni pagina web e garantendo anteprime Facebook perfette.

Sei pronto? Iniziamo!

Come correggere le anteprime errate dei post su fb

Devi sapere che le informazioni utilizzate da Facebook per generare le anteprime dei post, vengono scelte autonomamente dal suo crawler qualora nella pagina non vi siano indicazioni precise. Nel 2010 l’azienda statunitense ha introdotto il protocollo Open Graph ossia una serie di tag che consentono di aggiungere dati strutturati alle pagine web, in maniera da avere un maggiore controllo sui contenuti condivisi.

Anche se i bot di Facebook sono in continuo miglioramento può capitare che la condivisione di un contenuto da un sito web realizzato con Adobe Muse (e non solo) presenti qualche problemino come:

  • un’immagine piccola anziché grande;
  • un’immagine sbagliata o che non c’entra nulla con ll contenuto della pagina web;
  • un titolo poco utile e interessante;
  • una descrizione con del testo non significativo prelevato casualmente dalla pagina web.

In questi casi la miglior soluzione consiste nell’implementare manualmente i tag di Opengraph all’interno di ogni pagina Muse.

Come inserire i tag di Open Graph in Adobe Muse

Innanzitutto i tag vanno implementati all’interno del codice “<head>” di ogni pagina web quindi, dalla schermata di pianificazione di Muse, fai clic con il tasto destro su una pagina e scegli la voce “Proprietà di pagina”. Poi accedi alla scheda Metadati e aggiungi i seguenti tag nel campo “HTML per <head>”.

<meta property="og:title" content="Titolo del tuo post" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://link-alla-tua-pagina"/> <meta property="og:image" content="http://link-alla-tua-immagine"/>
  • All’interno del primo tag “og:title” devi inserire il titolo del post (attenzione non è in nessun modo collegato al <title> della pagina);
  • il secondo tag “og:type” rappresenta uno dei meta-dati considerati obbligatori. Esso specifica il tipo di oggetto rappresentato nella pagina (nel mio caso “article”);
  • nel terzo tag og:url devi aggiungere l’’URL da usare come ID permanente associato alla pagina web;
  • il quarto tag og:image deve comprendere l’URL associato all’immagine da mostrare nel post.

In Adobe Muse, puoi caricare un’immagine utilizzando la funzione “File>Aggiungi file da caricare…” che permette di trasferire un qualsiasi docuamento all’interno della cartella /assets, una volta che il sito sarà stato pubblicato.

Un consiglio: per una corretta visualizzazione del post anche su device ad alta risoluzione, carica immagini con misure 1200×630 px.

Correggere definitivamente il link con Facebook Debugger

Una volta inseriti i tag di Open Graph e aggiornato il sito web, potresti non visualizzare immediatamente le modifiche effettuate. I bot di Facebook infatti mantengono un sacco di dati nella cache e di conseguenza, per aggiornare l’anteprima, lo stesso Zuckerberg ha messo a disposizione un servizio apposito chiamato: Facebook Debugger.

Il Facebook Debugger è un pratico strumento utile a testare in anteprima il funzionamento dei meta tag Open Graph inseriti sul tuo sito, infatti:

  • analizza i dati (titolo, immagine, testo di descrizione) che Facebook ha in memoria (cache) per quel link e indica l’orario in cui l’ha scansionato l’ultima volta;
  • verifica i metatag inseriti nella pagina del sito web e segnala eventuali errori o metatag mancanti che non hanno permesso la corretta visualizzazione dell’anteprima;
  • ripropone a Facebook il link per una nuova scansione.

Ecco come procedere: vai su https://developers.facebook.com/tools/debug/, inserisci il tuo link all’interno del campo dedicato nella sezione “Sharing Debugger” e clicca sul pulsante “Debug”. A questo punto il tool effettua una scansione del tuo link, mostrando un’anteprima del post che verrà visualizzato su Facebook.

Grazie quindi ad alcuni piccoli accorgimenti puoi ottimizzare le pagine realizzate con Adobe Muse e condividerle a regola d’arte su Facebook.

Se l’articolo ti è stato utile, condividilo con i tuoi amici!

A presto.

Marco

Discussione: