Generador de vista previa de Open Graph

Solo descubres cómo se ve un enlace compartido después de haberlo compartido, y para entonces la publicación ya está en línea con la imagen equivocada. La herramienta de arriba genera la vista previa de la tarjeta a partir de tus etiquetas Open Graph antes de publicar, para que puedas corregir antes la longitud del título o la imagen que falta.

Cómo funciona

Hay dos formas de empezar. Puedes rellenar los campos directamente —título, nombre del sitio, descripción, URL de la página, URL de la imagen— y la vista previa se actualiza mientras escribes. O puedes pegar el HTML del <head> de tu página en el cuadro de importación y la herramienta extrae las etiquetas por ti.

El parser sigue el mismo orden de prioridad que un crawler real:

• Las etiquetas og:* tienen prioridad siempre que estén presentes.
• Las etiquetas twitter:* completan todo lo que Open Graph dejó vacío, así que una página que solo tiene twitter:title también se previsualiza.
• Un simple elemento <title> y <meta name="description"> son el último recurso.
• Las entidades HTML se decodifican, de modo que & se muestra como & en lugar de colarse tal cual en la vista previa.

El dominio que aparece bajo la tarjeta se obtiene de la URL de la página quitando el protocolo y el posible prefijo www., que es como lo muestran la mayoría de las plataformas. Todo se ejecuta en tu navegador: puedes pegar el código de una página de staging aún no publicada sin que se envíe a ninguna parte.

Qué revisar antes de publicar

La imagen es toda la tarjeta. Una vista previa de tarjeta grande es casi todo imagen, así que si falta o está rota, la publicación se queda en un enlace de texto que recibe una fracción de los clics. Requisitos que conviene respetar: una URL absoluta, al menos 1200×630 píxeles, menos de unos 5 MB, un formato habitual, y que sea accesible sin autenticación. Una ruta relativa es, con diferencia, la causa más frecuente de una tarjeta en blanco: el crawler que descarga tu página no está en el origen de tu aplicación.

Los títulos se truncan según su ancho en píxeles. Con unos 60 caracteres vas sobre seguro en todas las plataformas; en móvil, con menos. Pon al principio lo que invita al clic; un título del tipo «… | Sección | Nombre del sitio» desperdicia su posición más valiosa.

Las descripciones se cortan en torno a los 150–200 caracteres, y algunas plataformas las omiten por completo en pantallas pequeñas. Escribe la primera frase de forma que se sostenga por sí sola.

El tipo de tarjeta depende de la imagen. twitter:card debe ser summary_large_image cuando tienes una imagen adecuada y summary cuando no; declarar la tarjeta grande sin una imagen grande produce un recorte estirado y de baja calidad.

Toda URL absoluta debe serlo también para un desconocido. og:url, og:image y la canónica deben ser la URL pública de producción, no una dirección de localhost o de staging que se haya colado a través de una variable de plantilla.

Por qué la vista previa y la realidad a veces no coinciden

Esta herramienta muestra lo que dicen tus etiquetas. Después, las plataformas aplican sus propias reglas encima, y hay tres que suelen tomar a mucha gente por sorpresa.

La caché. Facebook, LinkedIn y Slack guardan en caché de forma agresiva los metadatos extraídos, a menudo durante días. Corregir una etiqueta no actualiza un enlace ya compartido; necesitas el scraper o el depurador de la propia plataforma para forzar una nueva descarga.

La rastreabilidad. Por lo general, los crawlers de las redes sociales no ejecutan JavaScript. Las etiquetas inyectadas en el cliente después de la hidratación les resultan invisibles. Si tu tarjeta sale en blanco al compartirla pero se ve bien en el inspector de elementos del navegador, casi seguro que el motivo es este: las etiquetas tienen que estar en el HTML renderizado en el servidor.

Redirecciones y autenticación. Un crawler que se topa con una pantalla de inicio de sesión, una redirección geográfica o un intersticial de consentimiento ve los metadatos de esa página, no los tuyos.

Lecturas y herramientas relacionadas

El head del documento y las reglas sobre lo que debe contener se tratan en Lo esencial de HTML5. Como una tarjeta solo aparece cuando el crawler obtiene una respuesta correcta, conviene conocer los códigos que puede recibir en su lugar: Códigos de estado HTTP cubre las redirecciones y los errores que rompen el uso compartido sin avisar.

Para generar el bloque de etiquetas desde el principio, usa el generador de metaetiquetas; para poner en orden el marcado del <head> que lo rodea, el formateador HTML.