Seo Guru

Twitter Cards + Open Graph Protocol su WordPress senza plugin

Tanto per ripartire dopo l’estate con un minimo di grinta vi propongo un post [potenzialmente] utile, facile e – spero – non troppo noioso.

Considerando la mia scarsa stima di Facebook sono senza dubbio l’ultimo arrivato sul terreno dell’Ogp, e in ogni caso in questo post sarà assente ogni possibile elucubrazione di tipo ‘teorico’ in materia.
Non a caso l’idea di scrivere questo post nasce mentre stavo guardando le più recenti Twitter Cards, che invece non vedo l’ora di vedere in funzione.

Il web semantico, certo. Ma anche la ‘guerra’ di metatags tra i grandi player, che vogliono a tutti i costi personalizzare la nostra esperienza di navigazione… mentre utilizziamo i loro network, però.

Costringendo i webmaster a piegarsi ai loro codici, mentre i pur flebili intenti di standardizzazione vacillano non poco.

E noi seo, tutti eccitati, ci rimettiamo lì a montare metatags come ai tempi di Altavista, in onore alla portabilità delle informazioni formattate-pacchettizzate-standardizzate e puntualmente riproposte sulla bacheca tale o sul profilo tal’altro.

Ma, appunto, non si voleva fare filosofia ma evidenziare un problema che mi pareva di aver notato, da buon ultimo arrivato.

Plugin per utilizzare i metadati ogp su istanze WordPress se ne trovano diversi, ci mancherebbe altro.

Le Twitter Cards sono state annunciate nello scorso giugno ma nel repository di WordPress mi è sembrato di aver già visto un plugin anche per le Twitter Cards.

Ma è anche vero che si tratta di un paio di metatags, e montare gli ennesimi plugin non mi sembrava proprio il caso.
E fra le altre cose molti di questi plugin, per non parlare delle soluzioni che si trovano in molti blog, omettono sempre qualche tag di quelli ‘di base’.

O propongono soluzioni non proprio ottimali, mi è sembrato nel corso delle mie brevi indagini sui plugin in materia.

In seconda istanza, con i tempi che corrono in tema di metatags, forse vale la pena di tenere tutto sotto traccia hardcodando direttamente nel tema una possibile soluzione.

Anche perchè un minimo di flessibilità sarà pur necessaria se vorrremo farci trovare pronti dal prossimo metatag di turno, quindi tanto vale organizzarsi.

In conclusione, mi sono chiesto, siamo proprio sicuri che WordPress non avesse già tutti gli elementi per offrire dei dati sull’altare dell’Open Graph Protocol, senza scomodare plugin e possibilmente senza ingombrare il database di campi customizzati e quant’altro?

E se contestualmente volessimo predisporre il nostro blog per le future Twitter Cards?

Davvero dobbiamo rassegnarci ad usare tutti questi plugin?

Twitter Cards

Il fallback delle Twitter Cards verso l’Open Graph Protocol

La prima risposta seria in merito al problema della caoticità di questi metatag che si moltiplicano riguarda proprio il fallback che Twitterbot opera in favore di Ogp in tutti i casi in cui non trova la sua marcatura per alcuni di quegli ‘elementi condivisi’ che i due protocolli prevedono.

Non siamo costretti ad implementare 3 volte il titolo del nostro post nei metatag, insomma, uno per Googlebot, uno per Facebook e uno per Twitter.

:)

“[...] If you’re already using OpenGraph to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience. [...]“

Dalla documentazione ufficiale sulle Twitter Cards

[...] Se stai già utilizzando OpenGraph per descrivere i contenuti sulle tue pagine sarà semplice generare una Twitter Card senza duplicare i tuoi metatag. Quando il crawler che genera le Twitter Cards cerca i metatag sulla tua pagina controlla come prima cosa la marcatura di Twitter, ma se non la trova ripiega sulla marcatura di OpenGraph, ugualmente supportata. Questo consente ad entrambe di esssere definite in forma indipendente, ma minimizza il quantitativo di marcatura duplicata necessaria per descrivere il tuo contenuto e la tua esperienza. [...]

Meno male che ripiegano, la vita è già abbastanza complessa senza impazzire con i metatag…

Twitter Cards + Open Graph senza plugin

Dopo aver studiato le corrispondenze di fallback tra Twitter Cards e Ogp, ho pensato che senza dubbio sarebbe stato possibile aggiungere entrambe le marcature su WordPress, contemporaneamente e risparmiando codice, sfruttando il più possibile il framework nativo di WordPress stesso.

E senza richiedere al blogger un impegno maggiore del normale (come l’eventuale compilazione di campi personalizzati o altri metodi similari).
E’ una soluzione, come al solito, studiata per seo e blogger pigri.

Basta infatti inserire il seguente codice nel file header.php del vostro template, all’interno del tag <head> … </head>.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Seo__Guru" />
<meta name="twitter:creator" content="@Seo__Guru" />
<meta property="fb:app_id" content="XXXXXXXXXXXXXXXXXX" />
<meta property="fb:admins" content="XXXXXXXXXXXXXXX" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:locale" content="it_IT" />
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php echo substr(strip_tags($post->post_content), 0, 170).' [...]';?>" />
<meta property="og:image" content="<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
<?php $image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'post-thumbnail', true);
echo $image_url[0];  ?>
<?php
} else {
?>
<?php bloginfo('template_directory'); ?>/immagine-default.jpg<?php
} ?>" />
<?php } ?>
<?php if (is_home() && !is_paged() ) { ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php bloginfo('template_directory'); ?>/immagine-homepage.jpg" />
<?php } ?>

Questa soluzione prevede solo 3 condizioni preliminari:

- Essere iscritti a Facebook;
- Aver registrato un’applicazione per il vostro sito presso il centro sviluppatori di Facebook, avendo quindi ottenuto una AppId;
- Avere un template WordPress che supporta la funzione post-thumbnail nativa di Wp (cosa che al limite richiede l’aggiunta di una mezza riga di codice al vostro file functions.php…).

Le stringhe di testo in verde devono evidentemente essere compilate con i dati corrispondenti.

In ordine, dovrete sostituire le scritte in verde con:

- Lo username su Twitter del sito che implementa i codici
- Lo username su Twitter del creatore di contenuti che si suppone verranno visualizzati mediante le Twitter Cards (può coincidere o divergere con lo username associato al sito)
- L’ID dell’applicazione relativa al sito che avete registrato sul Centro sviluppatori di Facebook. E’ la chiave Api necessaria ad autenticare il vostro sito come fonte per Facebook
- L’ID del vostro profilo Facebook personale. Metatag non indispensabile, e a dir la verità potreste anche cancellare quella riga per ragioni di privacy. Ma è invece indispensabile se si vuole avere pieno controllo, ad esempio, delle caselle di commento tramite Facebook, implementate ormai su moltissimi siti
- Il percorso completo, relativo alla cartella del vostro template WordPress, in cui upperete la vostra ‘immagine di cortesia‘, per i post che non offrono un’immagine in evidenza o non hanno una thumbnail associata
- Come sopra dovrete inserire il path, relativo alla directory del vostro tema (con slash / iniziale), dell’immagine che vorrete associata alla homepage del vostro blog

Come si può notare dal codice sono state previste anche delle opzioni – a mio avviso molto utili – che riguardano, sostanzialmente, la gestione delle immagini in caso di assenza e l’ottimizzazione dei metadati della vostra homepage.

Sulla gestione delle immagini in relazione al like button di Facebook ho letto in giro peripezie di ogni genere.

Con questa soluzione si utilizza semplicemente l’immagine in evidenza del post.
Il post non ne ha una? Nessun problema, c’è l’immagine di rimpiazzo (idealmente il vostro logo etc etc).

La buona notizia è che ormai credo quasi tutti utilizzino le immagini in evidenza per gestire le varie thumb-gallery dei vari blog.
Quindi dovrebbe funzionare in moltissimi casi, e per moltissimi temi..

Evidentemente dovrete uppare su server le corrispondenti immagini ‘sostitutive’ nella cartella del vostro template, dopo aver customizzato il qui presente pezzo di codice secondo le vostre esigenze.

Per quanto riguarda la homepage del vostro blog o sito, ho ritenuto utile prevederne l’ottimizzazione.
Potreste avere un like button in homepage, per esempio. O in futuro le Twitter Cards potrebbero essere generate anche per twittare in forma più strutturata i link in genere, compreso l’indirizzo del vostro blog.
Insomma, una discreta casistica mi ha suggerito di prevedere fin da subito l’ottimizzazione della root dell’istallazione WordPress, e non solo dei singoli post.

Se qualcuno ha voglia di provarla, come è ovvio, è a suo rischio e pericolo.

:)

Al momento gira nel blog che leggete.

Ben vengano anche suggerimenti, critiche, puntualizzazioni.



Aggiungi un commento