Qué son las Twitter Cards y cómo crearlas en WordPress

Los blogs, como las personas, no podemos dejarlos de la mano de dios, hay que mirar por su salud y hacerles revisiones de vez en cuando. Pues bien, en ello estaba, cuando en una de esas revisiones a mi otro blog con Wp Doctor (asistencia médica gratuita las 24 horas del día para tu WordPress cortesía de Webempresa) entre otros, me arroja este error (nótese el rojo intenso que hace pensar que es muy importante) en el que se me avisa de la inexistencia de Twitter Cards.

Error de la inexistencia de las etiquetas Twitter Cards

De inmediato me dispuse a solucionar el error. Y lo que en un principio parecía un mundo, no tardé más de 2 minutos en arreglarlo. Te digo cómo, pero antes, como siempre, ¿no vamos a ir a ciegas?:

¿Qué son las Twitter Cards?

Son meta etiquetas HTML (meta tag) que unidas o en combinación, otorgan una serie de propiedades a la tarjeta de Twitter definiendo su experiencia general. (Traducido del mismísimo Twitter)

Y ahora para entendernos:

Las Twitter Cards son fragmentos de información añadidos a través de un código HTML que hacen que cuando se comparta un enlace a través de Twitter, este aparecerá en forma de contenido enriquecido incluyendo imagen, sitio, autor…y no solo el enlace.

Con un ejemplo visual lo entenderás mejor:

Antes de activar las meta tag

La imagen de la izquierda es uno de mis post compartidos en Twitter desde el botón de compartir en esta red social que tengo debajo cada entrada (desde el que cualquiera puede compartir unos de mis posts).

La imagen de la derecha es una publicación ajena (desde una página que no es mi blog y que no pertenece a ningún post mío) compartida por mi misma en mi Twitter.

Como ves, al no tener activadas las Twitter Cards, no aparece la imagen, ni descripción del post, ni autor…na de na

Publicaciones sin Twitter Cards meta tag WordPress

Después de activar las meta etiquetas para Twitter

La imagen de abajo es un post propio compartido por mi misma a través de los botones de compartir de debajo de las entradas (podía haber sido compartido por cualquier visitante) .

Como ves…¡esto ya es otra cosa!. Con su imagen grande, su título, la descripción, la URL y y y algo muy importante mi autoría- “vía @mamarieummf”. Esto hace que me llegue una notificación en el momento de ser compartido y que además, en los sucesivos retweets se siga sabiendo de dónde procede la publicación…miaaaaa solo miaaaaa.

Tuit con Twitter Card para WordPress

 

En definitiva, las Twitter Cards son una forma de previsualización del contenido, un poco especial, dependiendo de como cada uno las cree o configure. Son tweets en los que se muestran más información (título, descripción, imagen, video…) haciéndolos más atractivos a la vista del usuario.

Tipos de Twitter Cards

Existen varios tipos de Twitter Cards (información traducida de Developer Twitter)

  • Summary Card: Título, descripción y miniatura.
  • Summary Card with Large Image: Como la anterior, pero con una imagen grande.
  • App Card: Tarjeta con descarga directa a una aplicación móvil.
  • Player Card: Tarjeta que puede incluir video, audio o media.

¿Por qué hay que activar las Twitter Cards en WordPress?

Twitter es una de las redes sociales más influyentes y utilizadas del mundo. Y por sus características, es ideal para compartir contenido propio o ajeno para informar a nuestros seguidores sin caer en el spam.

Pero, para llegar a un gran número de personas no basta con compartir contenido, sino que este tiene que ser atractivo para empujar al lector a hacer click para llegar a tu blog.

Algunas de las ventajas de tener activadas las Twitter Cards son:

Obtener mayor visibilidad en Twitter y, en consecuencia, aumentar los seguidores.

Tweets más atractivos que mejoran tu imagen y te consolidan como marca.

Aumento de visitas a tu blog, lo que se puede traducir en suscriptores y posteriormente en clientes.

Permite incorporar la autoría del contenido,  de esta forma, aunque te hagan retweet siempre aparecerás como autor. Además, en blogs con más de un administrador o autor, da la posibilidad de destacar uno de ellos.

 Uso de estadísticas para saber la repercusión que está teniendo tu contenido en esta red social.

¿Cómo crear Twitter Cards en WordPress?

Lo voy a hacer de dos formas, tu ya elijes la que mejor te vaya.

  • A través del Plugin WordPress Yoast Seo
  • Mediante inclusión de la meta etiqueta en el código de tu tema

Twitter Cards WordPress a través del Plugin Yoast Seo

No sé habrá alguien aun en este planeta o galaxias vecinas que aun no tenga la versión gratuita de Seo by Yoast activada en su WordPress. Por si hay algún despistado, lo haremos paso a paso.

Instalamos el plugin

Esto es cómo siempre, te vas al repositorio de plugins y pones Yoast Seo (en el enlace también lo puedes descargar). Una vez instalado lo activas. Si miras en el menú de la izquierda de tu escritorio verás que ha aparecido una nueva opción SEO, pues ahí está concentrada la inmensa sabiduría de este plugin.

Configuramos las Twitter Cards

Entras en SEO (esa nueva opción que te he dicho que aparece a la izquierda). Dentro de SEO en Social. Pincha arriba en la pestaña de Cuentas, porque lo primero que hay que hacer es asociar tu cuenta de Twitter. Introduce en la ventanita correspondiente tu usuario de Twitter. Guarda cambios.

Asociamos la cuenta de Twitter en Seo Yoast-Social

 

Seguimos en Social-Yoast SEO. Ahora ve a la pestaña de Twitter. En Ajustes de Twitter tiene que estar seleccionada la opción Activado. Un poco más abajo en el desplegable, puedes elegir el tipo de tarjeta; solo resumen o resumen con imagen grande. Guarda cambios.

Activar meta datos de tarjeta de twitter y elegir formato de twitter cards

 

*El siguiente paso es validar las Twitter Cards, pero como es común a las dos opciones de incluirlas en WordPress (plugin o código) lo voy a dejar para el final.

#TipsparaBlogs: Con Yoast SEO puedes personalizar la imagen que aparecerá en Twitter para cada post individual 😉

Cambiar la imagen que se mostrará como Twitter Cards con Yoast Seo

Qué apañaísimo que es este plugin. Vengaaaa vale, si me lo pedís con ese entusiasmo intentaré hablar próximamente de forma más detallada de él.

Peeeeroooooo por si hay alguien que no lo tiene, no lo quiere, no le interesa o vive en una galaxia muy lejana…también podemos hacerlo sin plugin.

Activar las Twitter Cards con meta etiqueta en el código del tema

Ya sabes, antes de nada, haz una copia de seguridad. Aquí tienes como hacerla con Xcloner.

Para activar una tarjeta de resumen de Twitter en nuestro blog solo tienes que incluir este fragmento de código HTML en la cabecera de tu tema.

<meta name=“twitter:card” content=summary_large_image />
<meta name=“twitter:site” content=@creagestiona />
<meta name=“twitter:title” content=Qué son las Twitter Cards y cómo crearlas en WordPress />
<meta name=“twitter:description” content=En este post te hablo de las Twitter Cards />
<meta name=“twitter:image” content=https://creaygestionatublog.com/twitter-cards-posts.jpg />

Solo tienes que modificar lo que te he puesto en azul con tus datos. Te recuerdo que tienes que hacerlo en un Child Theme (tema hijo) para poder llevar a cabo las actualizaciones de tu plantilla sin perder estas modificaciones. En el editor busca con Ctrl+F la etiqueta de cierre </head> y justo por encima tienes que meter el código de aquí arriba.

Si tienes un tema como el mío que te permite el uso de Hooks, solo tienes que copiar el código e introducirlo en el apartado de wp-head o el equivalente a la cabecera (header.php).

Te preguntarás, ¿y con que datos sustituyo yo los azules de esta mujer?. Pues con los tuyos. En el caso del title, description e image, puedes introducir los del cualquier post. Así ya se activará para todos.

*Pero eso sí, ¿recuerdas que antes dejamos pendiente la validación? Pues vamos a ello.

 Validar las Twitter Cards

Este paso es simplemente para corroborar que todo lo hemos hecho correctamente.

Para validar las tarjetas de Twitter tienes que entrar en esta página https://cards-dev.twitter.com/validator . Inicia sesión en tu cuenta de Twitter. Introduce la URL que has puesto en el código HTML. Si pinchas sobre Preview card podrás ver el resultado y si lo has hecho correctamente.

Validar Twitter Cards

Otros posts relacionados con las Redes Sociales que te pueden interesar

Ya está ¿a que no ha sido para tanto? ¿Vas a renunciar a unos tweets bien vistosos por 5 minutillos escasos? No lo dejes para luego, que estas son de las cosas que parecen una tontería pero son importantes. ¿Activas tus Twitter Cards?

5 comentarios en “Qué son las Twitter Cards y cómo crearlas en WordPress

Deja un comentario