In questo articolo ti racconto come risolvere i problemi tra client-side rendering e Facebook preview. Probabilmente sono uno dei pochi su questo pianeta che difende il client-side rendering, in ogni caso questa è una discussione che preferisco rimandare e che non deve entrare nel merito di questo articolo.

Se ti interessa puoi sempre leggere: Client-Side e Server-Side Rendering – Pro, Contro e SEO.

Client-side rendering e Facebook Preview

Questo articolo parla della preview di Facebook, ma nella realtà dei fatti diventa un articolo valido per praticamente il 90% del web, delle preview e di tutto ciò che ti permette di condividere il tuo sito web.

Mentre scrivo questo articolo, ho bene in mente alcune cose e situazioni.

Per prima cosa non importa se stai costruendo la tua web app con Angular, React o GeppettoJS (ironico). Sono più che sicuro che questo discorso vale per tutti.

Nel momento in cui scrivo l’articolo ho testato il reale funzionamento di quanto dico e ti riporto le prove di tutto ciò.

Su cosa ho testato?

Ho testato il client-side rendering e Facebook preview su una nuova piattaforma che sto costruendo per cambiare il modo di fare formazione ai programmatori.

Si chiama DiventareProgrammatore ed è sviluppata con ReactJS + Java + SQL (PostgreSQL). Se vuoi scoprirne di più su ReactJS ho scritto un’intera guida che sembra funzionare con molti programmatori a questo indirizzo 🙂 .

Al momento la piattaforma è in costruzione e quindi utilizza un piano gratuito (Heroku) che è un po’ lento al primo accesso (diventerà rapida ad inizio 2018, una volta conclusi studi e sviluppi).

Deep Learning Specialization on Coursera

La pagina Index della web app

Per iniziare ad avere client-side rendering e Facebook preview insieme è necessario entrare nella pagina index.html della web app.

Questa pagina è quella che il server fornisce subito al client e che solitamente contiene un div con id “root” o “app” (o qualsivoglia) nel quale poi il codice JavaScript va a “scrivere” la nostra applicazione.

A questo punto è necessario inserire dei meta-tag particolari.

Open Graph

Open Graph è un protocollo open-source nato nel 2010 che ha lo scopo di offrire dei campi “meta” facilmente leggibili che estendono le informazioni su un sito web.

Facebook, per esempio, utilizza Open Graph per leggere le informazioni nei riguardi dei siti web. Nel caso di mancanza di meta tag di tipo OG allora cerca altro nel contenuto del sito web.

Una cosa che quindi puoi sicuramente fare per avere un’anteprima Facebook sulla tua client-side rendered app e che è valida anche per Google +, Twitter, LinkedIn ed il 90% delle restanti piattaforme Social è inserire tra i tag <head></head> alcuni meta come questi:

<meta property="og:title" content="DiventareProgrammatore"/>
<meta property="og:url" content="https://www.diventareprogrammatore.it/"/>
<meta property="og:image" content="http://www.lolivoitaliano.it/wp-content/uploads/2016/09/gesto-mano-mani-ciao.jpg"/>
<meta property="og:site_name" content="SitoFantastico"/>;
<meta property="og:description" content="Ciao, sono una descrizione"/>

P.S. Ho modificato alcuni pezzi, ma queste sono a tutti gli effetti le property che utilizzo su DiventareProgrammatore.

Immagine Nascosta

Un altro modo che si può utilizzare, un po’ più grezzo, è quello di inserire un’immagine nascosta (e si anche il crawler di Google legge i tag con display:none, leggi quì).

Per esempio, prima del div con id “root” ho inserito un’immagine nascosta:

<img src="hhttp://www.lolivoitaliano.it/wp-content/uploads/2016/09/gesto-mano-mani-ciao.jpg" style="display:none;" alt="Diventare Programmatore"/>

Come controllare che funziona veramente?

Pensavi fosse più difficile risolvere i famosi problemi di client-side rendering e facebook preview? Bene è stato facile e se non ti fidi ecco tutte le prove.

Facebook

Puoi provare a condividere il sito web:

Oppure puoi utilizzare lo strumento di Facebook chiamato Debugger di Condivisione.

Questo è molto utile anche se per caso hai già provato a condividere la tua client-side web app. Facebook e molti altri siti/social infatti tengono in cache la preview.

Quindi se ci avevi già provato a condividere il tuo link potresti non vedere subito i tuoi risultati senza usare questo strumento!

Ecco cosa accade:

Se non vedi la Facebook Preview che ti aspetti clicca più volte su “Esegui lo scraping di nuovo”.

Andiamo avanti con questo articolo su client-side rendering e Facebook preview parlando anche di altri social.

Google +

Anche quì ti basta tentare la condivisione:

Puoi scoprire di più su cosa fa Google in merito alle preview a questo indirizzo.

Twitter

Per quanto riguarda Twitter e il client-side rendering direi che puoi testare la tua preview utilizzando lo strumento per sviluppatori di Twitter a questo indirizzo.

Twitter è in grado di leggere dei tag “meta” personali e i tag Open Graph come descritto nella guida del social a questo indirizzo.

In ogni caso se vuoi aggiungere dei tag personalizzati per Twitter puoi aggiungerli in questo modo:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="https://www.diventareprogrammatore.it/" />
<meta name="twitter:title" content="Vuoi diventare un programmatore?" />
<meta name="twitter:description" content="Descrizione !" />
<meta name="twitter:image" content="http://www.lolivoitaliano.it/wp-content/uploads/2016/09/gesto-mano-mani-ciao.jpg" />

E’ importante che il primo tag, ovvero “twitter:card”, contenga nel content uno tra questi due valori:

summary
summary_large_image

Se ancora non ti basta quanto detto in questa guida sui client-side rendering e Facebook preview andiamo avanti.

Tumblr

Anche con Tumblr ti è sufficiente copiare il link. Leggerà i dati relativi ad OpenGraph:

Potrei andare avanti una vita. Concludo questa guida sui client-side rendering e Facebook preview dando uno sguardo a LinkedIn.

Anche su LinkedIn funziona alla perfezione:

Conclusione

Siamo giunti alla fine di questa guida su client-side rendering e Facebook preview. Spero ti sia stata utile.

Cosa succede se però vuoi mostrare l’anteprima di un prodotto o di una pagina interna e differente? Per quel che abbiamo fatto la preview comprensiva di immagine, titolo e descrizione sarà sempre la stessa per ogni pagina condivisa.

Per cambiare questo comportamento (sempre se ti interessa davvero!) hai la possibilità di introdurre una logica per cui con determinati url i tag meta cambiano. Ti basta saper usare ExpressJS come spiegato in questa rapida guida e potresti modificare la pagina index.html prima di spedirla al client (modificando i meta tag) 🙂 .

Ti farò vedere come si fa il prima possibile in un prossimo articolo (ma so che puoi riuscirsi da solo!).

Se vuoi approfondire ReactJS con dei libri ti consiglio questo articolo.

Vuoi scoprire anche altro sulla programmazione? Guarda questo articolo.

Se vuoi iscriviti alla newsletter e non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Commenti