Hai presenta hai il detto “non si giudica un libro dalla copertina”? Bene, per il web non funziona così. Non per i contenuti come le pagine web (articoli, landing page, pagine interne di un sito ecc…). Devi fare in modo che ciò che pubblichi sul tuo sito web sia accattivante non solo per quello che c’è scritto ma anche per il modo in cui viene condiviso.

I social generano anteprime

I Social come Facebook e Twitter, le app di messaggistica istantanea come Whatsapp e Telegram ma anche aggregatori di notizie come Flipboard. Sono tutti portali che, con mezzi propri o di terzi, generano una anteprima del tuo articolo o della tua pagina non appena qualcuno tenta di condividere un tuo link.

É importante che quella anteprima non venga lasciata al caso e che tu sappia gestirla come si deve: per i siti statici puoi usare i meta tag, su WordPress puoi usare dei plugin specifici, su altri CMS come Ghost l’integrazione potrebbe essere nativa oppure potresti dover intervenire manualmente.

In questo articolo proverò a spiegarti come gestire la generazione dell’anteprima di un contenuto creato su un sito statico, su un sito WordPress e su un blog gestito con Ghost. Quello di cui avrai sicuramente bisogno è di una immagine da usare (controlla di avere i diritti per farlo), di un titolo accattivante e di una o due righe di riassunto.

“Non è bello ciò che è bello ma è bello ciò che piace” -> ecco come personalizzare le anteprime di #Wordpress, #GhostCMS e dei siti statici.

OpenGraph e Card dettano legge

Devi sapere che non è che ogni sito usa un suo sistema per definire l’anteprima da usare per i link che vengono condivisi dai vari utenti.

Ci sono due standard principali che dettano legge sui rispettivi social ma anche su altri siti internet che possono fare affidamento su di loro per avere un metodo semplice, veloce ed immediato da usare e che quasi sicuramente è già reimpostato da chi sta gestendo il servizio dietro ai link condivisi.

Dato che non sono funzioni obbligatorie sta ad ognuno dei gestori di siti web e blog introdurre i vari formalismi utili a creare un anteprima. Se non esistessero degli standard si verrebbe a creare un grandissimo problema perché sarebbe impossibile per un individuo preparare il proprio sito web per tutti i servizi esistenti su internet.

Come dicevo gli standard principali sono due: Open Graph di Facebook e Cards di Twitter. Entrambi sono semplici da implementare e si basano su dei meta tag da aggiungere ad ogni pagina del nostro sito all’interno della sezione <head></head>.

Ti faccio vedere cosa succede una volta che i metadati vengono implementati.

Se condividiamo questo link su Facebook, otterremo:

Su Twitter otterremo un risultato praticamente identico, ecco un esempio tratto da uno degli ultimi articoli che abbiamo pubblicato su PcGenius:

Come avrai capito puoi personalizzare tutto quello che si vede nell’anteprima ad eccezione dell’url del Publisher. Ovviamente nelle due immagini devi scartare ciò che il New York Times ha scritto nel primo post e ciò che io ho scritto nel mio tweet.

Personalizzare l’anteprima di un contenuto statico

Per contenuto statico intendo una pagina php o html scritta a mano e comunque non elaborata tramite CSM come WordPress, Magento, Drupal, Ghost e similari.

La spiegazione che segue vale anche per i CMS ma è un metodo troppo lento da usare per dei portali che tipicamente includono moltissimi contenuti. Puoi farlo, ma sai che perderai tantissimo tempo e che potresti facilmente sbagliare. Per i CMS di solito si fa affidamento a dei plugin che automatizzano l’inserimento del codice e che quindi minimizzano la possibilità di fare errori.

Ok, fatta la premessa possiamo continuare il discorso iniziale: personalizzare un anteprima generata per un contenuto statico.

Per farlo devi fare affidamento sui meta tag e sulla documentazione per sviluppatori di Cards e OpenGraph.

I meta tag si aggiungono nell’header e quindi, se la pagina è scritta in HTML5 nella parte di codice contenuta tra i tag <head> e </head>. Ogni meta tag fornisce una specifica informazione e quindi ometterne uno essenziale potrebbe portare ad un’anteprima non corrispondente al risultato atteso.

Ecco un piccolo riassunto sui principali metadati da aggiungere per le anteprime Facebook e Twitter:

FunzioneOpen GraphCards
URLog:urlNon necessario
Tipo contenutoog:typetwitter:card
Titoloog:titletwitter:title
Descrizioneog:descriptiontwitter:description
Immagineog:imagetwitter:image
App Sviluppatorefb:app_idN/D
Lingua contenutoog:localeN/D
Videoog:videotwitter:video
Autoreog:authortwitter:creato

I Metadati vanno impostati correttamente, per farlo bisogna vedere come scrivere ognuno di quelli che ho riportato ma anche in generale tutti quelli che vuoi pubblicare.

Twitter:cards ad esempio si scrive così:

<meta name="twitter:card" content="summary"></meta>

possiamo cambiare il tipo di Card utilizzato da summary a summary_large_image, app o player perché è previsto nella documentazione per sviluppatori.

Og:title, usato per dare il titolo ad un contenuto per l’anteprima generata da Open Graph, è più semplice:

<meta property="og:title" content="Questo è il mio titolo" />

come puoi vedere qui il metatag ha un property e non un name, in più non va chiuso con il tag </meta> perché termina già esso stesso con il formato <meta />

Ti invito a non dare questi dettagli per scontati, sopratutto per quando lavori manualmente, scrivendo tu stesso il codice da utilizzare. Ricordati inoltre che io ti ho mostrato solo i metadati principali da usare ma ce ne sono veramente tanti altri, studiali per strutturare al meglio i tuoi contenuti.

Puoi controllare di aver fatto un buon lavoro se nel Facebook Sharing Debugger per l’Open Graph e sul Card Validator per Twitter Cards ottieni esattamente ciò che volevi far vedere. Se così non fosse non preoccuparti, ti basterà modificare i metadati errati ed aggiornare la pagina, per Facebook se l’errore persiste potresti dover eliminare il contenuto in cache inserendo qui l’url che da problemi.

Personalizzare l’anteprima di un contenuto WordPress

WordPress è un CMS che estende moltissime delle sue funzionalità attraverso i plugin. Puoi scaricarli dalla directory gratuita di WordPress.org o cercarne alcuni su marketplace privati, solitamente a pagamento, come CodeCanyon e sui siti dei vari sviluppatori.

La personalizzazione di un contenuto generato su WordPress solitamente significa ottimizzare una pagina interna del sito o uno specifico articolo per essere condiviso sui vari social.

Lo puoi fare attraverso plugin specifici o tramite le suite SEO.

Se vuoi un plugin solo per questo potresti usare Open Graph and Twitter Card Tags o Open Graph, Google Plus/Schema.org, Twitter Card Tags for WordPress. Entrambi sono gratuiti e disponibili su WordPress.org

Se vuoi usare una plugin suite allora dovresti usare Yoast SEO, SEOPress o Rank Math. Tutti e tre i plugin integrano la personalizzazione dei contenuti per i social nella loro versione gratuita. Ricordati che puoi installare una sola suite alla volta, installarne più di una potrebbe portare a spiacevoli problemi sulle intere performance del sito agli occhi dei motori di ricerca.

Se imposti nulla i plugin faranno il possibile per impostare comunque dei valori di default per te. Avrai quindi un titolo corrispondente al titolo impostato per l’articolo o la pagina, la descrizione sarà equivalente alle prime righe del contenuto e l’immagine verrà ricavata automaticamente.

Ovviamente per non lasciare nulla al caso dovrai agire tu stesso.

Per fare tutte le modifiche all’anteprima devi entrare dentro l’editor e quindi andare su nometuosito.ext/wp-admin, cliccare su Articoli o Pagine, cliccare sul nome del contenuto da modificare e nella barra laterale di destra e trovare la sezione del plugin scelto (per i WordPress “vecchi” la barra laterale non esiste e non viene utilizzata per i plugin non compatibili con Gutenberg, l’editor in WordPress 5. In questi casi troverai la sezione sotto l’editor testuale).

Personalizzare l’anteprima di un contenuto Ghost

Ghost è uno dei CMS alternativi a WordPress, non è molto utilizzato ma secondo me avrà molto successo nel breve periodo e per questo ho deciso di dedicare qualche riga anche per coloro che decidono di utilizzare questa soluzione (per ora) non molto mainstream.

Se sei uno di questi utenti ho buone notizie per te: Ghost 0.5.3 e Ghost Pro includono di per sé tramite la sezione Metadati presente nella dashboard laterale all’interno dell’editor dei contenuti.

Come puoi vedere la stessa sezione include l’aggiunta di codice personalizzato tramite il Coe Injection, ciò significa che se preferisci scrivere il codice a mano sei libero di farlo. Il mio consiglio però rimane quello di lavorare con gli strumenti disponibili senza andarti a complicare troppo la vita.

L'autore Massimiliano

Ciao sono Massimiliano. Ho 21 anni e studio informatica all'università. Tra un esame e l'altro scrivo articoli sulla tecnologia e sul mondo del web nei miei due blog, MassiFormentin e PcGenius.

Altri articoli di Massimiliano


MassiFormentin.it
di Massimiliano Formentin
Questo blog non può considerarsi un prodotto editoriale ai sensi della legge n° 62 del 07/03/2001

Disclaimer – Termini & Condizioni


 

ajax-loader