Revisa tus tarjetas de compartir antes de publicar
Última actualización:
Una tarjeta de compartir es la pequeña vista previa —un título, una descripción y una imagen— que una red social o una aplicación de chat construye cuando alguien pega un enlace a tu página. Para la mayoría de las personas que llegan a encontrarse con esa página, la tarjeta es la única versión que verán: se la cruzan a mitad del desplazamiento, la juzgan en aproximadamente un segundo y deciden si la página que hay detrás merece un toque. Lo incómodo es que los fallos de la tarjeta son silenciosos. Tu página puede verse perfecta en tu propio navegador mientras su tarjeta no muestra imagen, muestra un titular del mes pasado o una descripción cortada a mitad de palabra, porque la tarjeta no se construye desde lo que ves en pantalla: se construye desde un puñado de metaetiquetas en el head de la página, traídas una sola vez por un rastreador al que nunca vigilas. Así que, antes de publicar cualquier cosa que pienses compartir, pasa la URL del borrador por el comprobador de Open Graph y mira tu página como la verán tus lectores: como cuatro tarjetas pequeñas.
El enlace es el anuncio
Cuando un enlace se pega en un feed social o en un hilo de chat, ningún humano visita tu página primero. La plataforma envía un rastreador —un crawler pequeño e impaciente— que trae la página una vez y construye la tarjeta con las metaetiquetas que encuentra en el head. Nadie en esa cadena ve tu maquetación, tu tipografía, tu cuidada sección principal ni la captura que colocaste sobre el pliegue. Ven exactamente tres campos y una imagen: og:title, og:description y og:image. Si esos tres están mal, faltan o están desactualizados, entonces, en lo que respecta a tu audiencia, tu página está mal, falta o está desactualizada: la hermosa página que hay detrás de la tarjeta nunca tiene la oportunidad de corregir la impresión.
La tarjeta también es terca. Las plataformas guardan en caché ese rastreo, normalmente contra la URL exacta, así que la primera versión que construye un rastreador suele ser la que se sigue compartiendo durante semanas o meses, mucho después de que hayas editado la página. Por eso una tarjeta de compartir merece el mismo respeto que el material publicitario: para una publicación cuyo único propósito es ser compartida, el enlace es el anuncio, y las metaetiquetas son el texto. Escribirlas como un trámite —o dejar que un generador de sitios las rellene con el texto que casualmente haya cerca— es lanzar una campaña cuyo material nadie revisó.
Qué lee realmente cada plataforma
Empieza por la base. Facebook y LinkedIn leen Open Graph: og:title, og:description, og:image, og:url y og:type, tal como los define el protocolo Open Graph. Si esos cinco están presentes y son sensatos, las dos mayores superficies profesionales de compartir quedan cubiertas. X lee primero sus propias etiquetas de Twitter Card —twitter:card, twitter:title, twitter:description, twitter:image— y recurre a los equivalentes de Open Graph cuando faltan las etiquetas de Twitter. Slack lee primero Open Graph, con las etiquetas de Twitter Card como recurso. En otras palabras, las plataformas están de acuerdo en los ingredientes y discrepan, levemente, sobre a qué estante echan mano primero.
En todas partes, el último recurso es el mismo: el elemento <title> de toda la vida y la meta descripción, llamados a filas cuando no existe ni Open Graph ni etiquetas de Twitter. Ese recurso importa para cómo lees cualquier comprobador, incluido el nuestro. Cuando una herramienta te muestra el título de una tarjeta, la pregunta honesta es de dónde salió el valor: de una etiqueta dedicada que escribiste a propósito, o de un recurso rescatado de un elemento title escrito para una página de resultados de búsqueda y un presupuesto de caracteres que tu tarjeta no comparte. Un comprobador que sustituye los recursos en silencio y los presenta como etiquetas te está mintiendo por omisión, y por eso el comprobador de Open Graph etiqueta cada recurso como recurso en lugar de fingir que la etiqueta existe.
Los fallos que hacen que las tarjetas se vean rotas
El clásico es el og:image relativo. La etiqueta dice content="/images/share.png" —una ruta, no una URL— y funciona en tu navegador, porque el navegador sabe en qué sitio está. Un rastreador no la resolverá: quiere una URL completa y absoluta que empiece por https://, y cuando no la obtiene construye simplemente una tarjeta sin imagen, junto a la que los lectores pasan de largo sin saber nunca qué se perdieron. Muy cerca viene la imagen que existe pero no encaja: mucho más pequeña que los 1200×630 píxeles que recomiendan las plataformas, o con una proporción que el recorte centrado convierte en un sinsentido. Trata los 1200×630 como lo que son —una guía de plataforma ampliamente publicada, no un estándar que nadie haya ratificado—, pero una guía ignorada sigue siendo una tarjeta con el titular recortado fuera de la imagen.
El resto es más silencioso. Una etiqueta twitter:card ausente significa que X recurre a una tarjeta de resumen pequeña —una miniatura junto al texto— incluso cuando le diste una imagen grande y hermosa y esperabas el tratamiento completo de summary_large_image. Los valores de etiqueta vacíos son peores que las etiquetas ausentes: un og:title con content="" no activa el recurso, lo sobrescribe con nada. Y un og:url equivocado —apuntando al dominio de pruebas, a la página principal o al artículo de la semana pasada, como hacen tan a menudo las plantillas copiadas— dice a cada plataforma que la página canónica está en otra parte, dividiendo los compartidos, los contadores y las entradas de caché lejos de la página que realmente publicaste.
Por qué la tarjeta antigua sigue apareciendo tras corregir las etiquetas
Corregiste las etiquetas, volviste a desplegar, pegaste el enlace de nuevo — y el título antiguo sigue ahí, sonriéndote. Nada está roto. Cada plataforma guarda en caché la tarjeta que construyó contra tu URL, y esa caché no vigila tu sitio en busca de cambios; desde el punto de vista de la plataforma, ya sabe qué aspecto tiene tu página, y volver a traer cada URL en cada compartido sería una cantidad enorme de rastreo para muy poco beneficio. La tarjeta desactualizada no es prueba de que tu corrección fallara. Es prueba de que a la caché no se le ha dicho que vuelva a mirar — y hasta que se le diga, cada colega y cada lector que comparta el enlace vuelve a servir el rastreo antiguo.
Así que díselo. Cada plataforma importante ofrece una forma de forzar un rastreo nuevo de una sola URL: el Depurador de compartidos de Facebook y el Post Inspector de LinkedIn vuelven a traer la página y te muestran la tarjeta que reconstruyeron — X ofrecía históricamente un validador de tarjetas para el mismo trabajo. Pasa tu URL por el que corresponda tras cualquier corrección de etiquetas y confirma la nueva tarjeta antes de anunciar la publicación. Donde no exista herramienta de nuevo rastreo, cambiar la URL cambia la clave de caché: añadir una cadena de consulta como ?v=2 hace que la plataforma trate el enlace como uno que nunca ha visto, un truco perfectamente respetable para un compartido puntual. Y guarda un poco de paciencia: las cachés pueden tardar en soltar incluso después de un nuevo rastreo, así que comprueba, espera y comprueba una vez más antes de empezar a editar etiquetas que ya eran correctas.
Una rutina previa a la publicación de dos minutos
Hazlo una rutina, no una investigación. Uno: pega la URL del borrador en el comprobador de Open Graph — la URL de pruebas o de vista previa vale, siempre que sea la página que los rastreadores traerán. Dos: confirma que las cuatro tarjetas —Facebook, X, LinkedIn y Slack— muestran el título, la descripción y la imagen que querías, y anota cualquier cosa etiquetada como recurso, porque un recurso elegido está bien y un recurso con el que tropezaste es una etiqueta esperando ser escrita. Tres: confirma que la URL de la imagen es absoluta y que la imagen en sí mide al menos 1200×630. Cuatro: confirma que twitter:card es summary_large_image donde quieras el formato grande en X, y que og:url nombra la página canónica que estás a punto de publicar.
Cinco: publica — y después pega tú mismo el enlace en algún sitio una vez, para forzar el primer rastreo mientras aún estás mirando, y observa la tarjeta que vuelve. Si está desactualizada o mal, vuelve a rastrearla con la herramienta propia de la plataforma en lugar de editar presa del pánico. Dos minutos, cinco pasos, y la versión de tu página que la mayoría de la gente llegará a ver es una versión que realmente aprobaste. Para el barrido previo a la publicación más amplio —TLS, cabeceras de seguridad, redirecciones, el resto de comprobaciones rutinarias que una página merece antes de salir— ejecuta junto a él la comprobación de salud del sitio web; las tarjetas son la puerta principal, pero no son toda la casa.