Como añadir Twitter cards a tu web o blog

Hoy he descubierto para que servía unos metadatos para añadir Twitter Cards que había agregado hace bastante tiempo, gracias al plugin de “Yoast WordPress SEO“, el cual es fundamental para tener un SEO decente en tu web o blog, y bueno los tenía integrados pero realmente pensé que con incluirlos valdría y tampoco le dí muchas vueltas.

Esto es lo que veía desde el panel del plugin de SEO:

wordpress seo añadir twitter cards

Añadir Twitter Cards en WordPress

Como digo esta funcionalidad te la puede dar el plugin que antes he comentado, o cualquier otro, tan sólo con buscar “Plugin WordPress Twitter Cards” en Google te saldrán bastantes, te aconsejo que elijas el que tenga mejor soporte y esté más actualizado.

Añadir Twitter Cards en otras webs

Sino tienes WordPress y no lo puedes hacer instalando un simple plugin y olvidándote de “picar” código, no te preocupes 😉 la verdad que la integración es super fácil.

La documentación oficial la tienes en https://dev.twitter.com/docs/cards

Tienes que escoger que tipo de “card” quieres que se muestre en tu tweet, acorde con tu web o producto.

Este blog está integrando las card de tipo sumario, que son los predeterminados:

añadir twitter card código html

Como ves no hay mucho misterio, tan sólo necesitas recuperar de manera dinámica éstos datos de tu artículo o página para mostrar correctamente los datos de la twitter card, y esto cada uno lo hará a su manera.

Para nota! 😉 si usas el plugin de Yoast

Trasteando en la integración de este plugin y mirando en su clase de twitter, se puede comprobar que el desarrollador ha dejado un código y una implementación magnífica. Puedes sobrescribir ciertos valores con filtros de wordpress, agregándolos a tu archivos functions.php. Te dejo lo que he hecho.

add_filter('wpseo_twitter_card_type','tipoDeCard');
function tipoDeCard() {
	return 'summary_large_image';
}
add_filter('wpseo_opengraph_image_size','tamanoImagen');

function tamanoImagen() {
	return 'large';
}

OJO!! que hay que hacer otra cosa mas!!

Pero hoy haciendo pruebas he descubierto, que ésta integración es la primera fase que hay que llevar a cabo. A parte me ha parecido curioso, porque me he puesto a googlear y la mayoría de los artículos en español e inglés no hablan de esta segunda parte.

Pues bien aunque tengas los metadatos de la twitter card, ésta no se visualizará cuando publicas tus tweets, necesitas que Twitter te la valide.

Para ello tienes que ir a https://cards-dev.twitter.com/validator y loguearte con tu cuenta de twitter.

Una vez logueado te aparecerá un popup como este:

Tipos de twitter card

Selecciona el tipo de card que hayas incluido en tu código HTML.

Pincha en la pestaña “Validate & Apply”. Introduce la url que deseas validar y pulsa “Go”

Validación twitter card

Si todo esta ok, deberás pulsar que pone “Request Approval”. En el pantallazo anterior mi dominio y el tipo de card ya están validados y aprobados.

Los metadatos que verás serán algo similar a esto:
metadatos twitter cards validados

Cómo se ven los tweets con la twitter card

2 opiniones en “Como añadir Twitter cards a tu web o blog”

  1. Hola Pedro, muy útil tu articulo, estoy intentando crear mi twitter card pero cuando pongo la url de mi web http://lamaquinistax.com/ para validarla me dice “invalid card tipe” lo he intentado con todos los tipos de tarjeta pero aún nada… se te ocurre alguna solución? también he intentado con otras url de la web pero con el mismo resultado….

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *