Configura fácilmente en WordPress tus Twitter Cards y Facebook OpenGraph

Seguro que lo has visto mil veces en redes sociales y no sabes ni cómo se llaman y tampoco conoces cómo se generan: son los formatos enriquecidos de urls que permiten que, una vez tengas configurada tu web, cada vez que compartas o compartan uno de tus post aparezca automáticamente en redes sociales una especie de «vista previa» que incluye un titular, su resumen y una imagen.

Twitter card
Esto es un tuit enriquecido

En Twitter se llaman Cards, Twitter Cards

No me voy a entretener explicándote que hay Cards de distintas clases… lo normal es que quieras para tu web las que tiene todo el mundo… 

Si tienes conocimientos avanzados utiliza código. Solo tienes que incorporar unas líneas en el <head> de tu web. Googlea. Hay 1000 páginas que están compartiendo este código y que explican como personalizarlo. Con ese código le dirás a las redes sociales que elementos y contenidos de tu post tienen que recoger cuando se compartan.

Puedes comprobar cómo se verán tus post compartidos en Twitter utilizando su herramienta Card Validator. En Facebook desde esta URL. Aquí te dejo Post Inspector de LinkedIn

En el repositorio de plugins de WordPress encontrarás alternativas como JM Twitter, Open Graph for Facebook and Twitter Card Tags … para hacerlo sin esfuerzo. En esta mini entrada te voy a enseñar como hacerlo con Yoast SEO, que es un pluging que muy probablemente ya tienes instalado y que lo resuelve este asunto muy bien y sin complicaciones…

Busca en tu escritorio el botón de Y SEO y pulsa Social. En la pestaña de Twitter activa la opción de «meta datos de tarjeta de Twitter» y selecciona en el desplegable del tipo de tarjeta predeterminada a utilizar Resumen con imagen grande.  Guarda los cambios.

En esta sección de configuración puedes configurar también los formatos enriquecidos en Facebook que son metadatos Open Graph. También los lee Pinterest. Yoast te permite además dejar fija una imagen de tu web que Facebook utilizará siempre que el post compartido no tenga asignada ninguna. Esto es muy útil si como yo andas a mil cosas… Del mal, el menos. Facebook no se inventará que imagen incluir cuando se comparta uno de tus artículos… 

Y ya está. No tienes que configurar nada más…

Antes de lanzarte a publicar cada uno de tus post y después de redactar el Título SEO (si quieres cambiarlo) y la Meta Descripción (si no sabes de qué estoy hablando invierte ahora mismo media hora de tu tiempo en conocer como funciona Yoast), visita la opción de Social y haz los cambios que consideres interesantes en los títulos, descripciones o imagen destacada en Twitter y Facebook. Si no haces cambios. utilizarán el título y la Metadescripción de tu post. 

Sobre las imágenes adecuadas que debes utilizar en tus Twitter cards…

Ya habrás visto (y sufrido) que cada red social recomienda un tamaño y formato de imagen distinto: a Instagram le gustan más las cuadradas. A Twitter y Facebook, rectangulares. La proporción en Twitter 2:1 tamaño mínimo 1024 x 512 píxeles y en Facebook 2:1 y pico… mínimo 1200 por 630 píxeles.

Yo te cuento como lo hago. Seguro que me puedes ayudar proponiéndome una manera distinta de resolverlo porque yo, por defectom preparo para cada uno de mis post una imagen de 900×485 px.

Si. Lo sé. Estas medidas son más pequeñas que las recomendadas… Ya te contaré el motivo tonto por el que lo hago así.

Y suelo emplear la imagen pensada para la Twitter card como imagen destacada del post siempre que el theme o la estética de la web lo permita. Y si no es posible,  la integro en el contenido. Y si no es conveniente, procuro acordarme de asignarla tal y como puedes hacer desde Yoast.

Ojo: Facebook y Twitter suelen recurrir, si no les dices nada, a la primera imagen que encuentran en tu contenido. La que aparece más arriba…

Y no tiene más. 

Si quieres confirmar que todo está bien puedes acercarte al «Validador» oficial de Twitter cards. Te lo dejo aquí enlazado. Si todo va bien te aparecerá algo así al incluir la url de tus post…

Twitter validator

Aquí encontrarás el depurador de contenido compartido de Facebook con el que podrás revisar cómo se verán tus publicaciones en esta red social.

2 comentarios en «Configura fácilmente en WordPress tus Twitter Cards y Facebook OpenGraph»

  1. Hola,
    Tengo una duda.
    Si cambio la imagen por defecto de mi web para la card, cambiaran todos los posts pasados o mantendrán las imagen de cuando se publicaron.
    Gracias

    Responder

Deja un comentario