Configura tus Twitter Cards en WordPress

Las Twitter Cards son fragmentos de información que hacen que, cuando se enlaza una página desde Twitter (en este caso un post concreto de un blog), en lugar de verse así:

Ejemplo de una twitter card sin imagen

se vea asá:

Ejemplo de una twitter card con imagen grande

Hay varios tipos de Twitter Cards que se pueden llegar a configurar, pero hoy nos centraremos en cómo conseguir una imagen grande y vistosa en la tarjeta que acompañará a los tuits que enlacen a nuestras entradas. Una vez hecho, nuestros enlaces a artículos del blog se convertirán por arte de magia en bonitas tarjetas (magia = a metatags).

En este post te explico cómo configurar las Twitter Cards en un WordPress autoalojado.


¡Cuidao! WordPress autoalojado necesario

Para este tutorial necesitarás que tu blog esté alojado en alguna plataforma que te permita instalar plugins. El alojamiento gratuito en WordPress.com no lo permite. Para más información, en SiloCreativo explican muy bien las Diferencias entre WordPress.com y WordPress.org, y también las tienes en el propio WordPress.com en Com VS Org.


Si bien es cierto que algunos temas pueden tener ya incorporado algún tipo de complemento o configuración que permita ponerlas en marcha, vamos a partir desde cero.

El plugin que nos ayudará a tener unas twitter cards de lo más molón va a ser Yoast SEO (en su versión gratuita).

Instalar el plugin

Plugin Yoast SEO en el instalador de pluginsNos vamos a Plugins -> Añadir nuevo, y buscamos “Yoast SEO”. Lo instalamos y activamos.

Y me diréis: “Marta, pero este plugin hace muchas más cosas”. Sí, las hace.

Hablaremos de ellas en otra ocasión (o al menos de alguna de ellas), pero sabed que son cosas buenas y bonitas, entre ellas una que salta bastante a la vista: ayudas para elaborar contenido (da sugerencias, no normas que haya que seguir sí o sí, que quede claro).

Configurar las Twitter Cards

Nada más activar el plugin nos dirá si queremos hacer un “tour”. Os lo recomiendo si queréis saber las opciones que tiene disponibles, pero si no, lo podéis dejar para otro momento o visitar su sección de ayuda. 

Lo que nos interesa para este asunto de las tarjetas lo encontraremos en el menú: SEO -> Social.

Allí rellenamos nuestro usuario de Twitter y otras redes en las que tengamos cuenta, si nos interesa asociar el blog con ellas. Esto genera una serie de meta etiquetas en el código que indican la relación entre nuestros perfiles, además de permitirnos configurar las tarjetas:

Configuración del plugin: rellenando el nombre de usuario de twitter

Desde allí nos vamos a la pestaña de Twitter, y activamos las tarjetas (si es que no están ya activas), y elegimos el tipo de tarjeta que queremos mostrar. A mí me gustan las imágenes bien grandes, así que elijo “Resumen con imagen grande”:

Configurando el plugin: activando twitter cards en nuestro formato preferido

Guardamos los cambios. La imagen que suele salir es o bien la imagen destacada (en los temas que la implementan) o bien la primera imagen del post. Se puede elegir otra imagen diferente para añadir a las tarjetas. Lo explico más adelante.

Validar la Twitter Card

Para que Twitter se entere de que hemos implementado la tarjeta vamos a pasarnos por el Validador de Tarjetas.

Para usar la herramienta tendremos que iniciar sesión en esta parte de su plataforma con los datos de Twitter (lo solicita al entrar al validador). Cogemos la dirección de un post, lo pegamos en la parte izquierda y le damos al botón de validar:

Validación de una twitter card

Y si todo sale en verde y vemos una vista previa convincente, ya está hecho :D

Detalles a tener en cuenta

Twitter guarda las tarjetas que se generan a partir de cierta URL durante un tiempo.

Si un post se ha enlazado recientemente, pasará un tiempo hasta que aparezca con el formato nuevo que hemos configurado.

Paciencia, que si el validador dice que está bien, sólo es cuestión de tiempo.

Cómo elegir una imagen específica para la Twitter Card

Esto ya es para nota ;)

Cuando estés escribiendo un artículo, fíjate en la caja de Yoast SEO que sale justo debajo. Si pulsas en el icono de compartir, verás que aparecen pestañas de Facebook y Twitter.

06-Configuracion-para-nota

Esta caja te permite colocar títulos, imágenes, y textos de extracto manuales para cada post concreto.

Además, cada red social tiene sus tamaños de imagen “preferidos”. Verás que el propio plugin te los sugiere, aunque todas las redes son capaces de adaptar tus imágenes para mostrarlas.

Bonustrack

Por si te pica la curiosidad, el código de una twitter card es el siguiente:

¿Las tienes implementadas en tu blog? ¿Crees que ayudan a la difusión de un contenido?

¡Anímate y cuéntame! :)

 

Etiquetas:

4 pensamientos sobre “Configura tus Twitter Cards en WordPress”

Deja un comentario

You have to agree to the comment policy.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.