Cómo usarla
- Introduce el og:title y el og:description que usas o tienes previsto usar en la página.
- Pega la URL completa de og:image. La herramienta carga la imagen e indica su tamaño real en píxeles.
- Añade la URL o el dominio de la página, compara las vistas previas de las tarjetas grandes y pequeñas, y corrige las advertencias.
Cómo funciona
Cuando alguien comparte un enlace, la mayoría de las redes sociales y aplicaciones de chat visitan la página y leen sus etiquetas Open Graph: og:title, og:description, og:image y og:url. Con ellas, crean una tarjeta. Una imagen apaisada con una proporción de aproximadamente 1,91:1 suele generar una tarjeta grande con la imagen en la parte superior; una imagen pequeña o cuadrada suele generar una tarjeta compacta con una miniatura junto al texto.
Esta herramienta muestra dos estilos genéricos de tarjeta para ayudarte a evaluar la longitud del texto y el encuadre de la imagen. Comprueba el tamaño original de la imagen después de que el navegador la carga: si mide menos de 200 × 200 px, muchas aplicaciones omiten la imagen; si mide menos de 600 × 315 px, suelen usar el diseño pequeño; y si su proporción se aleja mucho de 1,91:1, la recortan. El tamaño de 1200 × 630 px es el más recomendado porque se ve nítido en pantallas de alta densidad.
La vista previa no puede mostrar exactamente lo que aparecerá en una aplicación específica. Las aplicaciones varían en la cantidad de líneas del título y la descripción que muestran; algunas omiten la descripción y la mayoría guarda la vista previa en caché durante un tiempo tras el primer uso compartido, por lo que los cambios en tus etiquetas pueden tardar en aparecer. Muchas plataformas ofrecen su propia herramienta de depuración para actualizar esa caché.
Ejemplos
Una captura de pantalla como og:image
Una captura de pantalla de 1440 × 900 tiene una proporción de 1,6:1. La herramienta advierte que, en una tarjeta grande, se recortarían la parte superior y la inferior. Exportarla en una versión de 1200 × 630 evita sorpresas.
Un logotipo como única imagen
Un logotipo de 180 × 180 está por debajo de 200 × 200 px, por lo que muchas aplicaciones no mostrarían ninguna imagen. En su lugar, usa un banner apaisado más grande que incluya el logotipo.
Comprobar la longitud del título
Un og:title de 90 caracteres ocupa tres líneas en la vista previa de la tarjeta grande. Si lo acortas a unos 60 caracteres, la tarjeta se verá más ordenada en la mayoría de las aplicaciones.
Preguntas frecuentes
¿Por qué mi enlace se ve distinto en Facebook, LinkedIn y X?
Cada plataforma muestra las tarjetas con su propio diseño, recorte y límite de texto; algunas muestran la descripción y otras no. Esta vista previa es una aproximación genérica, no una copia del diseño de ninguna plataforma.
Cambié og:image, pero sigue apareciendo la imagen anterior. ¿Por qué?
Las plataformas guardan las vistas previas de los enlaces en caché. Usa la herramienta de depuración para compartir enlaces de la plataforma correspondiente para volver a cargar la página, o espera a que caduque la caché. Cambiar el nombre del archivo de imagen también puede ayudar.
¿Puedo usar una imagen SVG o WebP?
La mayoría de las plataformas no admite SVG. WebP funciona en muchas aplicaciones, pero no en todas; JPG o PNG son las opciones más seguras.
¿Por qué la herramienta no puede cargar mi imagen?
Es posible que la URL requiera iniciar sesión, que dirija a una página HTML en lugar de a una imagen o que el servidor bloquee las solicitudes de otros sitios. Si el navegador no puede cargarla aquí, es posible que el rastreador de una plataforma social tampoco pueda hacerlo.
Privacidad
El texto que introduces permanece en tu navegador. Para comprobar la imagen, tu navegador la solicita directamente a la URL que indicas (sin enviar un referrer), por lo que el servidor recibe una solicitud de imagen normal. No se envía nada a TIG Tools.