Hoy en día Twitter nos permite publicar más que 140 caracteres, a través de formatos enriquecidos de los enlaces que estamos publicando, así podemos entregar mayor información en los mismo 140 caracteres.

Esta aparente ampliación de los 140 caracteres son las Twitter Cards, que según el tipo, las podemos utilizar para señalar de que va el enlace que publicamos, con imagen incluida, generar llamadas a la acción o mostrar una galería de imágenes.

Dependiendo del uso que le daremos existen varios tipos de Twitter Cards:

  • Summary Card: es la por defecto, incluye titulo, descripción una pequeña imagen y la cuenta de twitter a quien corresponde la publicación.
  • Summary Card with Large Image: Muy similar a la anterior, pero en esta ocasión la imagen toma protagonismo
  • Photo Card: Con esta tarjeta se muestra una imagen solamente.
  • Gallery Card: Similar a la anterior, pero en esta ocasión se muestran hasta 4 imágenes.
  • App Card: A través de esta tarjeta podremos mostrar un enlace hacia la descarga de una aplicación móvil, sea para Android o iOS.
  • Player Card: Se muestra un reproductor, ya sea, de vídeo o audio.
  • Product Card: Ideal para mostrar tus productos, con la posibilidad de incorporar una imagen, la descripción y dos características más.

Existe otro grupo de Twitter Cards, en las que se incorpora una llamada a la acción, las que son generadas a través de la Plataforma para Anunciantes de Twitter.

Incorporación Manual

Para la implantación de las Twitter Cards citadas en el listado anterior es necesario incorporar algunos Meta-Tags en el código de tu sitio web, por lo que tendrás que editar cada archivo de tu sitio web incorporando las meta-etiquetas necesarias.

En el caso de Summary Card, las metaetiquetas serian las siguientes,

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@luisolavea" />
<meta name="twitter:title" content="Qué son las Twitter Cards y Cómo implementarlas" />
<meta name="twitter:description" content="Incorporando las Twitter Cards en tu sitio web" />
<meta name="twitter:image" content=" https://luisolavea.cl/redes-sociales/que-son-twitte…implementarlas/twittercards.jpg" />
<meta name="twitter:url" content=" https://luisolavea.cl/redes-sociales/que-son-twitte…implementarlas/" />

Y en el caso de la Summary Card with Large Image seria como el siguiente codigo

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image:src" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Si se observan ambos códigos son muy similares, la diferencia esta en la etiqueta con nombre “twitter:card”, en el segundo se ha incorporado “twitter:creator”, el cual no es exclusivo de él y se refiere al autor del contenido; en algunas ocasiones, como el caso de mi blog, es el mismo perfil de twitter que el del sitio web.

Para mayor información puedes visitar la documentación que twitter proporciona.

Incorporación a WordPress

En WordPress, el instalado en tu hosting, tienes varias opciones para incorporar las Twitter Cards, cada uns excluyente entre si.

SEO Ultimate

Varios de los plugins para SEO en WordPress implementan la funcionalidad de las Twitter Cards, en este caso en SEO Ultimate, tienes que tener activo el modulo Open Graph Integrator.

Ingresa a SEO -> Open Graph y en la pestaña Sitewide Values incorpora los datos de twitter que estaran disponibles para todo el sitio y en Default Values el tipo de Twitter Card, dependiendo del tipo de la publicación, página, articulo o media.

SEO Ultimate configuracion de Twitter Cards

Ahora bien, en la venta de edición de contenido podrás incorporar los datos pertinentes a dicha publicación, como el título, la descripción, la imagen que acompaña la tarjeta, la que por lo general es la misma imagen destaca, y puedes señalar que tipo de tarjeta es la que acompañara ese contenido.

Twitter Card en pantalla de Editor de Contenidos

WordPress SEO by Yoast

Este otro plugin de SEO, que muchas personas utilizan, tambien incorpora la posibilidad de usar las Twitter Cards, para lo cual has de ingresar a SEO -> Social y en la pestaña Twitter marcar el cuadro al lado de Añade Meta datos de Twitter Card. Ingresa el usuario de twitter del sitio y elige el tipo de tarjeta por defecto, en este caso solo puedes elegir una de las dos Summary.

Twitter Cards con WordPress SEO

En la venta del editor de contenidos encontraras las opciones para modificar/agregar el titulo, la descripción y la imagen para ser usadas en la Twitter Card correspondiente, a diferencia del anterior no puedes modificar el tipo de tarjeta.

Jetpack

Otro plugin largamente usado, también incorpora las Twitter Cards, dentro de su modulo Compartir, no tiene grandes opciones, solo has de conectar con tu cuenta de twitter. Este plugin, elige por si mismo que tipo de tarjeta es la que va a utilizar según las características de cada artículo.

Al no tener casi opciones, es muy sencillo, hasta que se necesita hacer alguna modificación, las que hay que realizarlas vía el fichero function.php del tema o un plugins propio de funciones.

Plugin Oficial

Por último Twitter tiene un plugin oficial que incorpora las Twitter Cards junto con otras caracteristicas como la opción de incrustar Tweets de forma sencilla, Twitter Analytics y los botones para twittear y que te sigan en Twitter.

Aun es un plugin muy nuevo, por lo que no lo he probado

Qué esperas para incorporar las Twitter Card a tu blog.