¿Qué son las Twitter Cards?¿Cómo puedo aprender a configurarlas?

Con el lanzamiento de Twitter Analytics, el sistema de Analíticas de Twitter, que fue lanzado hace 9 meses, el cual puede ayudarnos con nuestros tweets, se crearon las Twitter Cards, de las que te hablo a continuación:

Deribado de este producto, nacieron las Twitter Cards, y seguro que las conoces pero no sabes que eso que ves es una Twitter Card.

Les explicaré que es una Twitter Card basándonos en un ejemplo, he aquí un tweet de la cuenta de desarrolladores de Google que nos comparte un video de YouTube:

Si se fijan es un Tweet normal, pero abajo podemos ver un enlace a la cuenta de YouTube, un preview del video, un título, el cual es el del video, una descripción y un enlace. Todos esos componentes hacen la Twitter Card y nos ayudan de la siguiente manera:

Al colocar unas etiquetas "meta" en el head de nuestro HTML cada persona que haga un tweet y añada nuestro link tendrá una Twitter Card debajo de su tweet con la información que hemos preoporcionado. Esto nos puede ayudar con publicidad o con brindar a los usuarios un acceso directo como YouTube, que nos da un preview del video sin tener que ir al sitio.

Ejemplos de Twitter Cards

Me encantaron! Ahora, ¿cómo puedo implementarlas? En este segmento te voy a dar los pasos a seguir para implementar una en tu sitio, toda la documentación oficial la puedes encontar aquí: https://dev.twitter.com/cards/overview

  • Entra en https://dev.twitter.com/cards/types y explora todos los tipos de Twitter Card que puedes implementar, elige uno y tenlo en mente.

  • ¡Añadamos meta tags! Dejé un ejemplo práctico que puedes usar para un sitio personal, le puse mis datos, puedes cambiarlo y usarlo como quieras C:

Si necesitas más cosas porque vas a hacer otro tipo de card tienes toda la documentación aquí: https://dev.twitter.com/cards/markup

  • Listo! Para verificar que tu card sea correcta no tienes que perder el tiempo con Tweets, Twitter ha habilitado un verificador:

  • Finalmente, para ver el impacto que tienen tus Twitter Cards accede a tus Twitter Analytics(Actívalos al entrar si no los tienes) y empieza a trackear.

¡Conseguimos nuestra Twitter Card! Veamos cómo se ve la mía:

PD: Dale FAV o RT ;)

Lo tenemos! ¿Te gustaron las Twitter Cards? Cuéntame en los comentarios para qué vas a usarlas C:

Escrito por...

Miguh Ruiz

Geek & Full Stack JavaScript Developer.