¿Qué son las tarjetas?
Son las imágenes miniatura, esas que hacen de vista previa cuando publicas en redes sociales.
¿Cómo se insertan?
Para que el motor de la red social analice correctamente el contenido y genere la etiqueta, la web debe tener los meta tags.
Faceb... META (Facebook, Whatsapp, Instagrams y cuanto tentáculo más agregue) usa los meta tags og. Por ejemplo:
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Título copado y con un toquesito de clickbait" />
<meta property="og:description" content="Descripción de lo que va la página" />
<meta property="og:url" content="https://www.tuwebbienchula.com" />
<meta property="og:site_name" content="Nombre del sitio" />
<meta property="article:publisher" content="https://www.facebook.com/TUUSUARIO/" />
<meta property="og:image" content="https://www.tuwebbienchula.com/imagen/para/mostrar.jpg" />
<meta property="og:image:secure_url" content="https://www.tuwebbienchula.com/imagen/para/mostrar.jpg" />
<meta property="og:image:width" content="770" />
<meta property="og:image:height" content="436" />
En cambio twitter usa los meta tags twitter. Por ejemplo:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Descripción de lo que va la página" />
<meta name="twitter:title" content="Título copado y con un toquesito de clickbait" />
<meta name="twitter:site" content="https://www.tuwebbienchula.com" />
<meta name="twitter:image" content="https://www.tuwebbienchula.com/imagen/para/mostrar.jpg" />
<meta name="twitter:creator" content="@tu_usuario_de_twitter" />
Si usas wordpress o algún cms puedes usar un plugin, como yoast seo (y no le pongo el link porque no me pagan)
Debuguear
Aún con pluging y todo bonito, a veces no funciona. Así que vamos a ver como saber en que le estás errando. Tenemos herramienta para ver como el sitio es leido.
Parser de Meta: https://developers.facebook.com/tools/debug.
Parser de Twitter: https://cards-dev.twitter.com/validator
Errores tontos pero que hacen renegar bastante
En META (Facebook): la imagen para mostrar tiene que ser de un tamaño aceptable y en formato png o webp
En Twitter puede salir el error "Fetching the page failed because other errors", que no dice nada pero es porque a twitter no le gusta el TLS 1.3, así que si estás usando TLS forzado, mejor desforzalo un poquito.
Este fue otro capítulo de "me dió pelea pero le gané". Espero que te sirva o le sirva a mi yo del futuro.