Cómo usar las “Twitter Cards”

Mejorar los tweets, enriquecerlos y dirigir mejor el tráfico a tu sitio web son algunas de las cualidades de las Twitter Cards.

Cuando hice La Mimbresía decidí hacer un experimento para mejorar la experiencia de compra en el sitio. Este experimento consistía en agregar las Twitter Cards a los links compartidos en Twitter que vienen desde el sitio web, la idea era mostrar más información de los artículos sin tener que ir directamente al sitio.

¿El resultado? Algo así:

Link al tweet: https://twitter.com/alvaroveliz/status/471937366362685440

Ahora bien, sería ideal aplicar esto en todos nuestros sitios; pero si no sabemos cómo, no podemos. Por "suerte" hoy — y por encargo de la importadora — les voy enseñar cómo y por qué debemos usar ésta característica especial de Twitter y lo simple que es implementarla.

¿Qué son las Twitter Cards?

Las Twitter Cards son una herramienta para compartir información enriquecida en Twitter, y cuando digo "enriquecida", me refiero a que es mucho más que un Tweet. Con una Twitter Card se puede compartir mayor información, incluyendo imágenes, videos, links, precios y descripciones. La idea es que el Tweet no solo sea informativo sino que también útil.

Existen 7 tipos de "Cards" que podemos crear:

  • Summary Card: Card por defecto, incluye título, descripción, vista previa y una relación con una cuenta de Twitter
  • Summary Card with Large Image: Igual a la Summary Card pero con una imagen más grande
  • Photo Card: Una Card con una sola imagen
  • Gallery Card: Permite destacar un grupo de imágenes
  • App Card: Para aplicaciones mobiles con un link de descarga
  • Player Card: Una card que permite compartir videos, audio u otro tipo de contenido.
  • Product Card: Card optimizada para información de productos

Entre estos 7 tipos elegi la última: Product Card.

Para utilizar este tipo tuve que agregar ciertas etiquetas meta a la página donde se ve el producto en el sitio web, y luego validar la URL para que al compartir el link entregara la información necesaria como una Product Card.

¿Qué son las etiquetas META?

Antes de pasar a armar nuestras cards vamos a entender uno de los ingredientes principales de las Twitter Cards: las etiquetas meta.

Las etiquetas meta o también conocidas como "meta tags" son etiquetas que se agregan al encabezado — veáse <head> — de sitio un web. Estas etiquetas están hechas para entregar información de referencia a los exploradores y sitios web.

Un metatag tiene el siguiente formato:

<meta name="" content=""/>

Donde "name" es el nombre de la etiqueta y "content" el valor.

Por ejemplo, si quisieramos definir el "autor" del sitio web usaremos:

<meta name="author" content="Alvaro Véliz"/>

De este modo estamos diciendo que el Autor es Alvaro Véliz. Así es como funcionan los meta tags.

Para las Twitter Cards debemos considerar un grupo de metatags dependiendo del tipo de Card, y agregar estos metatags entre el tag <head></head>.

Comenzando con las Twitter Cards

Ahora que ya entendimos qué son los metatags, comenzaremos con las Twitter Cards. Para esto, usaré mi propio sitio web y los artículos que escribo.

El objetivo será crear un Card que permita compartir los links de los artículos de una manera enriquecida. Para esto, usaremos el tipo por defecto llamado "Summary Card". Si vamos al link veremos que nos entrega un ejemplo de Flickr y abajo, el siguiente código:

<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="@flickr" />
<meta property="twitter:title" content="Small Island Developing States Photo Submission" />
<meta property="twitter:description" content="View the album on Flickr." />
<meta property="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
<meta property="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />

Lo primero que nos damos cuenta que los meta tags acá escritos no están usando el atributo "name" sino que el atributo "property", esto es porque básicamente, es el atributo "content" el importante en este tipo de etiquetas. Lo segundo es que todas las propiedades que estamos agregando, a través del atritbuto "property" tienen un prefijo "twitter:", entonces es fácil concluir que se refiere a una configuración específicamente de Twitter.

Usando el ejemplo anterior, los metatags para un artículo de mi sitio web deberían lucir así:

<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="@alvaroveliz" />
<meta property="twitter:title" content="Tutorial de AngularJS #4" />
<meta property="twitter:description" content="La cuarta parte del Tutorial tendra como principal objetivo la comunicación entre controladores y la creación de nuevas directivas." />
<meta property="twitter:image" content="http://alvaroveliz.cl/images/logo.png" />
<meta property="twitter:url" content="http://alvaroveliz.cl/blog/tutorial-de-angularjs-4" />

Así que para lograrlo, tendré que modificar mi propio template* de artículos y agregar estas etiquetas.

Los últimos pasos

Para ver los resultados de nuestro trabajo, y asumiendo que ya agregaron las cabeceras a sus sitios, deberán validar sus meta tags usando el "Card Validator". Este paso háganlo con Chrome porque Twitter es medio quisquilloso y exige que sea un explorador como Chrome.

Al ingregar al sitio verán el selector de Cards en primera instancia, ahí vamos a seleccionar Summary.

Luego, a la izquierda veremos la configuración de los tipos de Cards y un Tab que dice "Validate & Apply". Usaremos ese segundo tab y agregaremos el link que necesitemos validar. En nuestro caso, usaremos el siguiente: http://alvaroveliz.cl/blog/tutorial-de-angularjs-4

Al escribir el link, presionaremos "Go!" y veremos el resultado de nuestra Card:

Ahora, debemos pedir que nos aprueben el link, usando el botón "Request Approval". Ahí agregaremos la información correspondiente para que nos aprueben los links.

Y esperaremos por una respuesta vía e-mail.

Cuando esta respuesta esté aceptada podremos compartir los links en formato Card, incluyendo este mismo tutorial.

Conclusiones

Las Twitter Cards son herramientas que nos sirven para agregar información útil a nuestros Tweets. Tenemos 7 opciones para componer mejores tweets usandolo solo las configuraciones dadas por metatags.

Para implementar este método solo debemos saber modificar nuestros meta tags en nuestros sitios. En el caso de los sitios que están en WordPress, existe una guía que les permitirá mediante plugins, implementar las Cards.

Espero que les haya gustado este pequeño tutorial, si existiera una segunda parte se va a tratar de lo que podemos medir con estas Cards, pero siempre y cuando descubra como utilizar Analytics de Twitter.

¡Nos vemos en el próximo!

Nota
El cambio de headers ya está hecho en el sitio, miren el código fuente de esta página y verán lo siguiente:

<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="@alvaroveliz" />
<meta property="twitter:title" content="Cómo usar las "Twitter Cards"" />
<meta property="twitter:description" content="Mejorar los tweets, enriquecerlos y dirigir mejor el tráfico a tu sitio web son algunas de las cualidades de las Twitter Cards. Cuando hice La Mimbresía decidí hacer un experimento para mejorar la experiencia de compra en el sitio. Este experimento consistía en agre..." />
<meta property="twitter:image" content="http://alvaroveliz.cl/images/logo.png" />
<meta property="twitter:url" content="http://alvaroveliz.cl/blog/como-usar-las-twitter-cards" />
Blog, Tutorial
4 minutos