Habilitar Twitter Cards para tu blog WordPress

Las Twitter Cards son una especie de tweets  autoexpandibles, de tal forma que cuando seleccionamos uno de estos tweets especiales se muestra directamente en nuestro Time Line una especie de resumen, el cual, como veremos más adelante, podemos configurar.

Twitter Cards para blog WordPress

Ya esta opción hacía años que estaba habilitada para algunas webs y/o publicaciones, por ejemplo, “Mashable”, de tal forma, que cuando en un tweet poníamos un enlace a dicha web, automáticamente Twitter mostraba la Twitter Cards correspondiente.

Desde hace unos días, Twitter nos permite el uso de esta tecnología a cualquier usuario con un blog/web (auqnue previamente hemos de validar el mismo).

A continuación voy a explicar paso a paso como configurarlo.

 

PASO 1.- Sitio web de Desarrolladores Twitter

Utilizamos nuestras credenciales Twitter (nombre usuario/password) para hacer login en el sitio web de desarrolladores Twitter: http://dev.twitter.com/

Una vez logeados, tenemos toda la información necesaria sobre las Twitter Cards en el apartado de documentación específico para las Twitter Cards: http://dev.twitter.com/docs/cards/app-installs-and-deep-linking

PASO 2.- Acceso al validador de una Twitter Cards

El siguiente paso es validar una Twitter Cards, para lo cual hemos de hacer click en el enlace “Validate your meta tags

En este punto, Twitter nos mostrará los tipos de Twitter Cards. Actualmente tenemos 7 tipos de Twitter Cards:

  • Sumario: nos muestra un resumen con una pequeña foto a la derecha (ideal para blogs).
  • Producto:  ideal para mostrar productos con sus propiedades (precio, tipo,….).
  • Foto: nos muestra una foto destacada ocupando el ancho disponible del Time Line, con un título, autor, y enlace al artículo. (Esta opción es la que usa Mashable).
  • Sumario con imagen larga: similar a foto, pero incluyendo un resumen (el resúmen es extraído de la etiqueta “Meta Description”).
  • Reproductor : para reproducir vídeo y audio (por ejemplo contenido de Youtube).
  • App: ideal para apps (nos muestra versión, ratings, …).
  • Galería: es ideal para un álbum, galería o colección de imágenes.
Tipos de Twitter Cards
Tipos de Twitter Cards

Los más interesantes, desde el punto de vista de WordPress, son Sumario, Sumario con imagen larga, y Foto. (Entre otras, porque el plugin que utilizaremos para WordPress solo trata estos tipos de Twitter Cards).

PASO 3.- Configuración de las etiquetas Meta correspondientes

Llegados a este punto tenemos dos opciones:

  1. Lo hacemos a mano, insertando el código hmtl que nos genera el asistente de Twitter, concretamente una serie de etiquetas meta. Si optamos por esta opción,  para cada contenido que generemos tendremos que insertar este código entre las correspondientes etiquetas “head”.
  2. Utilizar plugins específicos para tal efecto que nos automaticen la generación de estas etiquetas meta.

WordPress nos facilita una serie de plugins para configurar las Twitter Cards en un blog basado en este CM. En principio he probado los dos siguientes plugins:

  • Yoast WordPress SEO: un maravilloso plugin para gestinar el SEO de todo nuestro sitio web, que además incluye una opción muy simple, aunque efectiva, para añadir meta datos de Twitter Card.  Dicha opción se encuentra en el menú “Social” de dicho plugin, ahí simplemente hemos de activar la opción para añadir meta datos de Twitter Card y especificar el usuario Twitter.
Twitter Cards con Plugin para WordPress SEO by Yoast
Configurar Twitter Cards con Plugin para WordPress “SEO by Yoast”
  • JM Twitter Cards : este plugin es específico para gestionar Twitter Cards. Personalmente es el que más me gusta, y paso a describirlo en la siguiente sección.

 

PASO 4.- Plugin JM Twitter Cards

Una vez instalado el plugin, nos creará una entrada con el mismo nombre dentro de la sección de “Ajustes” de nuestro WordPress.

Aquí tenemos una serie de opciones, donde las más importantes son:

  • Elegir el tipo de Twitter Cards: solo podemos elegir entre sumario, sumario con imagen larga, y foto.
  • La cuenta Twitter de usuario, y de web.
  • URL de la imagen por defecto : se utilizará en caso de que un post concreto no tenga foto destacada.
  • La posibilidad de utilizar las etiquetas “meta title” y “meta description” que nos facilita el plugin SEO by Yoast.
Configurar Twitter Cards con plugin "JM Twitter Cards"
Configurar Twitter Cards con plugin “JM Twitter Cards”

Hay que tener en cuenta una serie de consideraciones:

  1. Tener cuidado de no utilizar elementos como comillas y similares dentro de las “meta description”, porque Twitter solo mostrará el texto hasta la comilla.
  2. Si tenemos un plugin de caché (por ejemplo, W3 Total Caché), borrar la caché.

 

PASO 5.- Vista previa de nuestra Twitter Card y solicitud de Aprobación

Tras haber configurado nuestra Twitter Card en WordPress utilizando alguno de los plugins anteriores, continuamos con nuestro validador de Twitter Card ( http://dev.twitter.com/docs/cards/validation/validator ), el cual,  por un lado, nos permite  una vista previa de las mismas (hemos de introducir la URL de nuestro blog y/o artículo), y por otro, nos permite solicitar la aprobación de la Twitter Card (haciendo click en correspondiente botón “Request Approval“).

Validar una Twitter Cards

Tras haber hecho click en el enlace para solicitar la aprobación, y rellenado el correspondiente formulario;  Twitter nos enviará un correo electrónico indicando la validación de las mismas.

Solicitud de aprobación de una Twitter Cards
Formulario que hemos de rellenar al solicitar la aprobación de una Twitter Cards

Nota: En mi caso particular, la aprobación tardó aproximadamente un minuto.

Aprobación de una Twitter Cards
Correo confirmando aprobación de una Twitter Cards

 

Referencias Externas


 

 

Si te ha gustado la entrada comparte en Twitter y Facebook clicando los botones de abajo.

Muchas gracias!
Licencia Creative Commons

Este obra está bajo una licencia Creative Commons Reconocimiento-CompartirIgual 3.0 Unported.

socialmediatfe

Analista de Sistemas de Información (Cabildo de Tenerife). Social Media. Social CRM. Business Intelligence. OLAP. Data Mining.

More Posts - Website

Marcador