Estamos en una época en la que las redes sociales copan nuestro día a día en internet. Nos pasamos horas en ellas compartiendo y consumiendo contenido y es por ello que a veces, estamos tan saturados que no podemos hacer caso a todo lo que nuestros contactos comparten. Un simple enlace enmascarado en un acortador no dice mucho y eso a vece hace que pasemos por encima sin fijarnos, sin quiera molestarnos en saber sobre qué trataba aquello que estaban compartiendo.

En Facebook quizás no nos pase eso ya que la previsualización de los contenidos es mucho más directa, tanto si te has molestado en etiquetar tus post con los metas de open graph como si se recoge automáticamente los metas Titulo y Descripción. Pero en Twitter no había forma de previsualizar contenidos, salvo los que la propia red iba incorporando (Vídeos de Youtube, Aplicaciones de la App Store, Fotos, Presentaciones de Slideshare y unos pocos más). Hasta ahora.

Hace unos meses, Twitter presentaba los Expanded Tweets para dar la oportunidad a todos los editores de poder dotar a sus contenidos de mayor visibilidad dentro de la red de microblogging, empezando las pruebas con The New York Times, The Wall Street Journal o Time. De esta forma, al visualizar un tweet de estos sitios con las apps oficiales o directamente desde la web de twitter, podíamos tener una previsualización de los contenidos compartidos:

Ejemplo de previsualización del contenido en Twitter

Pero ese periodo de prueba exclusivo ya ha finalizado y ahora cualquier medio, site o blog puede tener su etiquetado para hacer sus contenidos más atractivos en Twitter. Y por supuesto, en Mis Apis Por Tus Cookies ya lo tenemos implementado, así que vamos a ver como puedes hacer tu lo mismo.

Primeros pasos: el etiquetado

Lo primero que tenemos que tener en cuenta son los tipos de etiquetado que podemos usar. Y eso lo podemos ver en esta url, donde nos explican con gran claridad que tenemos 3 tipos de etiquetado: texto, imagen y contenido de vídeo (summary, photo o player). El primero lo utilizaremos para los artículos, el segundo para fotos y el tercero para vídeos. Nos centraremos en el más importante (o más usado) que es el de Summary o texto, ya que la mayoría de nuestros contenidos serán de este tipo. Los otros dos formatos son igual de sencillos de implementar. Solo habrá que tener en cuenta sus códigos propios.

Para ello tenemos que tener claro las etiquetas que deberemos usar:

Mediante estas etiquetas marcaremos el tipo de contenido, la url, el título la descripción y la pequeña imagen que acompañará a esa descripción. Como veis, las etiquetas URL, Título y descripción son obligatorias. El resto, es opcional utilizarlas, aunque si las usamos todas, el tweet contendrá más información.

Además, si queremos dar la autoría a los post, deberemos incorporar 2 etiquetas más. Una mostrará el usuario de twitter del editor del post y la otra, si existe, la cuenta de twitter del medio en el que se publica el contenido:

Una vez que tenemos claras las etiquetas que queremos utilizar, las deberemos insertar en nuestro código. Con cada CMS se hará de una forma u otra, pero por poner un ejemplo, en WordPress simplificaremos el proceso con las funciones que tiene WordPress y que nos hacen la vida mucho más fácil:

1 2 3 4 5 6 7

<meta name="twitter:site" content="@TWITTER_DE_LA_WEB" /> <meta name="twitter:creator" content="@TWITTER_DEL_REDACTOR" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="CODIGO_DE_IMAGEN" /> <meta name="twitter:url" content="<?php get_permalink(); ?>" /> <meta name="twitter:title" content="<?php the_title(); ?>" /> <meta name="twitter:description" content="<?php the_excerpt(); ?>" />

Para sacar la imagen hay que utilizar algún plugin o código más concreto, pero seguro que ya lo estáis usando en vuestros blogs, así que no habrá problema en utilizar esa misma llamada. Y para blogs como éste, en donde hay varios autores, nada mejor que una serie de IF concatenados para verificar cual de ellos es el autor y sacar su Twitter:

1 2 3 4 5 6 7 8

global $post; $author_id=$post->post_author; if($author_id == X){ $twitter = '@fanego' ; } elseif($author_id == Y){ $twitter = '@ElsaBonafonte' ; } elseif($author_id == Z){ $twitter = '@mercedesortizz' ; } elseif($author_id == A){ $twitter = '@chatunga' ; } elseif($author_id == B){ $twitter = '@CFigueiras' ; } else { $twitter = @ApisCookies; }

Estos códigos deberán ser insertados en la cabecera de la web, entre las etiquetas head del mismo y, a ser posible, obligando a que se muestren únicamente en los post individuales y no en la home, mediante el código de WordPress if(is_singular()).

Una vez que se carga la página, esto es lo que veremos en el código fuente:

1 2 3 4 5 6 7

<meta name="twitter:site" content="@ApisCookies" /> <meta name="twitter:creator" content="@rbksaez" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="http://www.misapisportuscookies.com/wp-content/uploads/2012/10/Thomas-Hawk-150x150.png" /> <meta name="twitter:url" content="http://www.misapisportuscookies.com/2012/10/como-trabajar-una-comunicacion-360o-basada-en-la-comunidad/" /> <meta name="twitter:title" content="Cómo trabajar una comunicación 360º basada en la comunidad" /> <meta name="twitter:description" content="Estamos en el momento de la conversación, en el cual la credibilidad se gana generando confianza en el usuario." />

Probemos si lo hemos hecho bien

Si has llegado hasta aquí, es posible que andes un poco liado y no sepas bien si lo has hecho todo de forma correcta. Por ello, Twitter dispone de un una herramienta para previsualizar todo lo que hemos hecho, verificando que el código es correcto y si no es así, mostrándonos qué parte es la que falla.

Unicamente deberemos indicar la URL de prueba o el código HTML final, y la herramienta nos dirá exactamente en qué nos hemos equivocado, si se nos ha olvidado algo.

En este caso, como vemos, faltaría la etiqueta “description”, que es obligatoria. Si lo hacemos todo correctamente, podremos ver como quedaría:

¡Genial! Parece que está todo bien. Vamos a por el último paso.

Diselo a Twitter

Ya tenemos nuestros post correctamente etiquetados, por lo que únicamente quedará decírselo a Twitter para que nos habiliten los tweets expandidos a nuestro blog. Para ello deberemos rellenar este cuestionario, dejando al menos una URL correctamente etiquetada para que confirmen que está todo bien hecho. En cuestión de unos días tendremos su confirmación nuestro contenido empezará a tener un aspecto mucho más atractivo cuando lo compartan los usuarios.

Así nuestro contenido tendrá una mayor relevancia y presencia en Twitter, facilitando una previsualización del mismo y, en un mundo ideal, aumentando el CTR de los contenidos en Twitter al hacerlos más atractivos y visuales.

A tener en cuenta son los acortadores, ya que no todos ellos dejarán a Twitter leer estos metadatos de los post, así que dependiendo de cual usemos, se perderá esta funcionalidad o no.

¿Dudas? Déjalas en los comentarios y lo vemos.

Escrito por @pep

Foto | AdileoBarone

Actualización: Como bien comenta TxemaCG, ya existe un plugin para WordPress para blogs de un solo autor. Lo puedes descargar desde aquí.