Twitter Cards: que son, como usarlas y configurarlas. - Carlos Santiago | Desarrollador de Aplicaciones Web
avatar

Carlos Santiago

Desarrollador de Aplicaciones Web.


Publicidad

dattahost

Twitter Cards: que son, como usarlas y configurarlas.

Hoy te voy a presentar una funcionalidad muy novedosa de la red social Twitter, que te ayudará a difundir tu contenido de forma que sea más atractivo para tus potenciales clientes y que se vea de forma más profesional.

Twitter sin duda alguna se ha convertido en la red social preferida por muchos ya que obtienen información en tiempo real de lo que sucede en el mundo basado en sus intereses, es por ello que si quieres atraer una audencia de calidad debes tener tweets de calidad, una forma de lograrlo, entre muchas, es haciendo que los tweets se vean mas elegantes y con un estilo más profesional.

Cuando comencé a tuitear sobre mis VideoTutoriales las impresiones de dichos tweets eran pocas, entre otros factores, se debía a que los tweets tenían un aspecto poco elegante.

Este fue uno de esos primeros tweets antes de conocer Twitter Cards

primer-tweet

Y así se ven mis tweets hoy en día, mejoraron cierto?

tweet-card

Este cambio en la manera de promocionar o mostrar el contenido de mi web se debe gracias a Twitter Card, que junto con otros sistemas de Twitter me permite conocer el alcance de mi contenido y me ha permitido llegar a una mayor y mejor audiencia.

Pero ¿qué son las Twitter Cards?

Bien, visualmente ya sabes lo que hacen o qué son las Twitter Cards (lo viste arriba cuando te mostré como se veían mis tweets antes y ahora), las Twitter Cards son un formato enriquecido para que un tweet contenga más información y el contenido se pueda destacar de una mejor manera.

Vamos a ellas! Twitter Cards en solo tres pasos

Existen muchos tipos de Twitter cards, sin embargo, cualquiera que sea el caso para configurarlas se siguen estos pasos.

  • Agregar una serie de metaetiquetas o meta tags a tu sitio web
  • Enviar tu URL a Twitter para obtener aprobación, esto se hace a través de una herramienta proporcionada por Twitter.
  • Tuitear contenido y disfrutar de lo mejor de Twitter Cards.

Tipos de Twitter Cards

Como debe ser lógico, no todos los tweets tienen el mismo tipo de contenido, por lo que existen varios tipos de Twitter Cards, te las presentaré y así tu ves cuál se adapta mejor al tipo de contenido que compartas.

1- Summary Card: título, descripción, y una imagen en miniatura.

summary-card

Las tarjetas de resumen son perfectas para ofrecer a los usuarios una muestra de lo que van a ver si hacen click en el enlace que acompaña al tweet. Este tipo de tarjeta incluye un título, una pequeña descripcion, una imagen en miniatura y por supuesto el enlace directo al contenido que acabas de compartir. Este tipo de cards es el que utilizo yo, ya que es el que se adapta a las publicaciones de mi web. Es ideal para promocionar contenido de un blog.

Para implementar esta tarjeta de presentación debes tener acceso al código fuente de tu sitio web, o del sitio web que estés desarrollando y debes incluir estas metaetiquetas o meta tags dentro de las etiquetas <head>
Acá te muestro un ejemplo sobre como implementarlas, asegúrate de cambiar los atributos y el contenido por el tuyo, así como no debes olvidar enviar la URL para la aprobación por parte de Twitter.

Otras recomendaciones:

  • Dimensiones recomendadas de la imagen: 120px x 120px
  • Las imagenes no pueden pesar mas de 1MB
  • Formatos aceptados: JPEG, JPG, PNG.
  • Formatos NO aceptados: BMP, TIFF, GIF

2- Summary with large image

summary-large-card

Este tipo de tarjeta es muy parecia a la anterior pero el tamaño de la imagen es más grande. Es muy útil si queremos generar un impacto en nuestros clientes o usuarios a través de una imagen, es posible acceder al contenido de la página haciendo click en la foto.

Para implementar esta tarjeta de presentación debes tener acceso al código fuente de tu sitio web, o del sitio web que estés desarrollando y debes incluir estas metaetiquetas o meta tags dentro de las etiquetas <head>
Acá te muestro un ejemplo sobre como implementarlas, asegúrate de cambiar los atributos y el contenido por el tuyo, así como no debes olvidar enviar la URL para la aprobación por parte de Twitter.

Otras recomendaciones:

  • Dimensiones recomendadas de la imagen: 280px x 150px
  • Relación de aspecto: 1.867:1
  • Las imagenes no pueden pesar mas de 1MB
  • Formatos aceptados: JPEG, JPG, PNG.
  • Formatos NO aceptados: BMP, TIFF, GIF

3- App Card: para promover una aplicación

La tarjeta de App, es una gran manera de promover la descarga e instalación de una aplicación. Algo interesante de Twitter Cards es que no tienes que gastar tus 140 caracteres en el nombre o la descripción de tu enlace, además, con esta tarjeta específicamente puedes añadir atributos como el precio o el rating de tu aplicación. Twitter tiene un manejo especial con el App Store y con Google Play, pues se encarga de crear automáticamente app cards para cualquier tuit que contenga un link que les pertenece. Intenta tuitear el enlace de una aplicación y verás la tarjeta en los detalles de tu tuit.

Para implementar esta tarjeta de presentación debes tener acceso al código fuente de tu sitio web, o del sitio web que estés desarrollando y debes incluir estas metaetiquetas o meta tags dentro de las etiquetas <head>. 
Acá te muestro un ejemplo sobre como implementarlas, asegúrate de cambiar los atributos y el contenido por el tuyo, así como no debes olvidar enviar la URL para la aprobación por parte de Twitter.

Otras recomendaciones:

Al probar esta tarjeta, asegúrate de que la aplicación está disponible públicamente en una tienda de aplicaciones, de lo contrario Twitter no será capaz de mostrar la información. Por defecto Twitter busca en la tienda de Estados Unidos, así que si tu aplicación está en un país diferente, asegúrate de definir esto con la línea:

<meta name="twitter:app:country" content="US">

La imagen de la tarjeta de aplicación también se descarga directamente desde la tienda de aplicaciones en el que reside la aplicación. Para que te asegures de que tu tarjeta de aplicación funciona correctamente, la imagen subida a la tienda iTunes/Google Play debe ser inferior a 1 MB de tamaño.

4- Player Card: audio y video

Esta tarjeta es especial para tweets que contengan videos y audio. La implementación de Twitter Cards es muy parecida entre los diferentes tipos de tarjetas, pero esta tiene un proceso especial pues es necesario hacer una validación previa para su buen funcionamiento.

Veamos como implementarla:

  • Descarga el paquete que ofrece Twitter
  • Sube el contenido del paquete al directio public_html de tu sitio web, abre el archivo index.html y asegúrate de que los valores de twitter:image, twitter:player y twitter:player:stream apunten a tu servidor.
  • Actualiza el contenido cambiando el video de muestra por el que vas a utilizar y asegúrate de que las especificaciones de las rutas sean seguras (https://).
  • Una vez completado este proceso deberás validar tu Player Card con el Card Validator de Twitter y esperar la aprobación de Twitter.

Si seguiste los pasos y la implementación es correcta no deberías tener problemas. Aquí lo que está buscando el equipo validador de Twitter es que el contenido de tu tarjeta sea responsive para que la experiencia de usuario sea la adecuada en cualquier dispositivo.

5- Otros Tipos de Twitter Cards

Si ya haz leído otro artículo sobre las Twitter Cards seguramente habrás visto que existen otros tipos como: Photo Card, Gallery Card y Product Card, sin embargo, la misma documentación de Twitter para desarrolladores nos dice que estos tipos de cards están obsoletas desde Julio, 2015.

Para finalizar

Puedes aprovechar Twitter Analytics para monitorear el rendimiento de tus tarjetas, y de tus tuits en general. Esto es importante, no solo para hacerle seguimiento a tu actividad, sino también para hacerte una idea clara de cómo se está compartiendo tu contenido en Twitter.

Encuentra más información detallada sobre Twitter Cards y su implementación en la documentación de Twitter para desarrolladores.

DEJA UN COMENTARIO

Your email address will not be published. Required fields are marked *

0 COMENTARIOS



© 2017 Carlos Santiago - Todos los derechos reservados.