L’immagine di anteprima per le twitter card

L’immagine è fondamentale per chi vuole pubblicizzare i propri articoli . E’ l’immagine più che il testo a catturare l’attenzione degli utenti .

Un’immagine è un richiamo, un grido “Ehi sono qua” per chiamare i lettori a leggere il proprio articolo .

Sui social network, su facebook in particolare, sono praticamente solo i post con immagine a essere condivisi con gli altri . E’ molto più raro che si condivida un post di solo testo .

Per non parlare di Pinterest, dove l’immagine è diventata essa stessa il contenuto .

Perciò quando si pubblica un link nei social network è importante associarvi oltre ad un testo riassuntivo anche una bella immagine .

Per quanto riguarda twitter, con poche righe di html, è possibile che i nostri link, pubblicati da noi o da altri, contengano un testo riassuntivo e un’immagine .

Questo è possibile grazie alle Twitter Card .

twitter-card

Come inserire le twitter card sul proprio sito wordpress

Dal punto di vista tecnico inserire nel proprio sito le twitter card è facile. Basta inserire dei tag html secondo il modello predisposto, consultabile qui: https://dev.twitter.com/cards/types, nell’ <head> del proprio sito e poi controllarne l’effettivo funzionamento tramite la validazione a questo indirizzo: http://cards-dev.twitter.com/validator

Abilitando le twitter card per le notizie del tuo sito, tutte le volte che qualcuno inserirà all’interno di un tweet un link al tuo sito, il tweet sarà automaticamente integrato con un’anteprima della notizia.

Il formato della twitter card summary è questo:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tuoaccounttwitter" />
<meta name="twitter:title" content="titolo" />
<meta name="twitter:description" content="contenuto" />
<meta name="twitter:image" content="indirizzo immagine" />

Naturalmente se lasciamo del contenuto statico l’anteprima sarà poco pertinente con il link .
I meta devono essere dinamici con il contenuto della notizia che divulghiamo .

Quindi il meta name title con wordpress diventa:
<meta name="twitter:title" content="<?php echo get_the_title(); ?>">

il meta name description diventa
<meta name="twitter:description" content="<?php echo get_post_meta($post->ID, '_aioseop_description', $single = true); ?>">

il meta name immagine può contenere il logo del sito, quindi un’immagine statica .

Immagine di anteprima nella twitter card

Ma non sarebbe meglio se l’immagine pubblicata su twitter fosse la stessa che abbiamo scelto come anteprima per il nostro articolo ?

La soluzione è un po’ complicata, perchè la twitter card richiede l’url dell’immagine, ma non c’è una funzione diretta in wordpress che ricavi questa informazione dall’immagine di anteprima del post .

Quindi bisogna prima ricavare il codice di pubblicazione dell’immagine con la funzione get_post_thumbnail_id() e poi estrarre da questa l’url con la funzione wp_get_attachment_image_src()

Quindi il tag name image diventa:
<?php
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full"); ?>
<?php if(isset($imgsrc[0])): ?>
<meta name="twitter:image" content="<?php echo $imgsrc[0];?>">
<?php else: ?>
<meta name="twitter:image" content="url immagine statica" />
<?php endif; ?>

Con il php else provvediamo a fornire il logo del sito nel caso in cui il post non abbia un’imamgine di anteprima o il link punti ad una pagina o all’home page.

Con questo meta name=”twitter:image” abbiamo sempre l’immagine giusta sia se pubblichiamo un Thumbnail con <meta name="twitter:card" content="summary" > sia se scegliamo invece l’immagine grande con <meta name="twitter:card" content="summary_large_image">

 

Questo che segue è il risultato della condivisione di questo articolo su twitter:

Naturalmente qui si pone un’altro problema: la scelta dell’immagine migliore da porre in anteprima, che possa essere ritagliata nel modo corretto .

L’immagine di anteprima per le twitter card ultima modifica: 2016-09-15T11:46:30+02:00 da Salvatore

You May Also Like

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Utilizziamo i tuoi dati solo per poter pubblicare il tuo commento.Leggi la pagina della privacy policy per sapere come proteggiamo i dati che inserisci per commentare. I commenti sono protetti da spam da Akismet. Leggi la privacy policy di Akismet per sapere come trattano i tuoi dati.