BrowserTools
Inicio / Validadores / Vista previa de enlaces

Vista previa de enlaces

Mira cómo se verá un enlace a tu página al compartirlo en redes sociales y buscadores, y corrige las etiquetas que faltan.

Mantenido por BrowserTools · Última actualización 2026-09-29

Cargando Vista previa de enlaces… Si no ocurre nada, activa JavaScript.

Cuando alguien pega un enlace en WhatsApp, en Slack o en una publicación de LinkedIn, la aplicación descarga la página en segundo plano y arma una pequeña tarjeta con unas pocas etiquetas del head: og:title, og:description, og:image y og:url del protocolo Open Graph, además de twitter:card para X. Si faltan, son demasiado largas o apuntan a una ruta relativa, la tarjeta sale como una URL desnuda, un titular con la cola "| Nombre de la empresa" o una imagen recortada por donde no toca. Esta herramienta te enseña el resultado antes de publicar. Pega el código fuente de tu página (o solo la sección head) y leerá todas las meta etiquetas con el propio analizador HTML del navegador, averiguará qué valor usará cada plataforma y dibujará una tarjeta de vista previa para la búsqueda de Google, Facebook, X, LinkedIn, WhatsApp, Slack y Discord, una junto a otra.

Preguntas frecuentes

¿Por qué no puedo escribir mi URL sin más?
Una página web no puede descargar otro sitio, porque las reglas de mismo origen del navegador lo bloquean salvo que ese sitio lo permita expresamente, y muy pocos lo hacen. Saltarse eso exigiría un servidor que descargara la página por ti, y este sitio lo hace todo en tu dispositivo a propósito. Abre tu página, usa Ver código fuente de la página (Ctrl+U o Cmd+Option+U), cópialo y pégalo aquí. Solo importa la sección head, así que puedes pegar únicamente esa parte.
¿Cuál es el mejor tamaño para og:image?
1200 por 630 píxeles, una proporción de 1,91:1, es el tamaño que recomienda Facebook y funciona bien en LinkedIn, WhatsApp, Slack y Discord. X recorta las tarjetas grandes a 2:1, así que aleja el texto importante y las caras de los bordes superior e inferior. Las imágenes de menos de 600 píxeles de ancho se muestran como miniatura cuadrada pequeña en varias plataformas, y Facebook ignora las de menos de 200 por 200. Usa JPG o PNG de menos de unos 300 KB si te importa WhatsApp, y nunca SVG.
¿Qué etiquetas necesito de verdad?
Para una tarjeta fiable en todas partes: og:title, og:description, og:image (URL absoluta), og:url (la dirección canónica) y twitter:card con el valor summary_large_image. og:type, og:site_name, og:image:width, og:image:height y og:image:alt son extras recomendados. X lee las etiquetas Open Graph como alternativa, así que twitter:title, twitter:description y twitter:image solo hacen falta si quieres otro texto u otra imagen en X.
¿Por qué Google muestra un título distinto al de Facebook?
La búsqueda de Google no usa Open Graph. Construye el resultado a partir del elemento title del HTML y de la meta description, y puede reescribir cualquiera de los dos si cree que otra parte de la página la describe mejor. Las aplicaciones sociales prefieren og:title y og:description. Por eso aquí la vista previa de Google lee el elemento title, mientras que las demás tarjetas leen los valores Open Graph.
He corregido las etiquetas pero Facebook o LinkedIn siguen mostrando la vista previa antigua. ¿Por qué?
Las plataformas guardan las vistas previas en caché, a menudo durante días o semanas. El Sharing Debugger de Facebook y el Post Inspector de LinkedIn te dejan introducir la URL y forzar una nueva lectura. X renueva su caché por su cuenta, normalmente en una semana. WhatsApp y Slack guardan la caché por conversación, así que compartir el enlace con un parámetro como ?v=2 es una forma rápida de ver la versión nueva.
¿Por qué og:image y og:url tienen que ser URL absolutas?
Los lectores de estas plataformas tratan las etiquetas como texto plano y muchos no resuelven rutas respecto a la dirección de la página. Un valor como /images/card.jpg puede funcionar en una plataforma y fallar en silencio en otra. Usa la dirección completa, empezando por https://. La herramienta señala los valores relativos y sin protocolo y, si indicas la URL de la página, escribe la versión absoluta resuelta en el bloque de etiquetas corregido.
¿Las vistas previas son exactas al píxel?
Son aproximaciones cercanas al diseño actual de cada plataforma, dibujadas con los estilos de este sitio, para que puedas valorar la longitud del texto, el recorte de la imagen y qué elementos aparecen. Las aplicaciones reales cambian de diseño a menudo, y el corte del texto depende del ancho de pantalla, de la fuente y del idioma. Los umbrales usados (unos 60 caracteres en los títulos de Google, 160 en las descripciones, 600 píxeles para imágenes grandes) siguen las indicaciones publicadas por las plataformas y el comportamiento observado.
¿Se sube mi HTML o mi imagen a algún sitio?
No. El HTML se analiza con el DOMParser integrado del navegador, que nunca ejecuta scripts ni carga imágenes u hojas de estilo del código pegado. Una imagen subida se muestra desde una URL de objeto local y nunca sale de tu dispositivo. La página no hace ninguna petición a tu sitio ni a ninguna red social.

Acerca de Vista previa de enlaces

La página no puede descargar tu URL por ti: los navegadores bloquean ese tipo de petición entre sitios, y este sitio lo mantiene todo en tu dispositivo, así que tampoco contacta nunca con tu servidor. Eso significa que las imágenes remotas no se descargan. Las tarjetas muestran un marcador con la dirección de la imagen y, si subes el archivo de la imagen, ves cómo la recorta cada aplicación, 1,91:1 en las tarjetas grandes, 2:1 en X y cuadrada en las miniaturas pequeñas, junto con su tamaño real en píxeles y su peso. Si todavía estás diseñando la página, cambia al formulario y escribe directamente el título, la descripción, la URL y la dirección de la imagen, y vigila los contadores a medida que te acercas a los límites.

Debajo de las vistas previas, una lista de comprobaciones explica qué fallaría y por qué: etiquetas Open Graph que faltan, un valor de twitter:card que X no reconoce, títulos por encima de los unos 60 caracteres de Google, descripciones de más de 160, URL relativas o sin protocolo, imágenes SVG que ninguna aplicación muestra, imágenes de menos de 600 píxeles de ancho que pasan a miniatura pequeña, etiquetas duplicadas que cada aplicación resuelve a su manera y etiquetas fuera del head, donde algunos lectores ya han dejado de leer. Por último, genera un bloque de etiquetas limpio y corregido, con URL absolutas, dimensiones de la imagen declaradas y los atributos correctos, listo para copiar en tu plantilla. Cuando las nuevas etiquetas estén publicadas, recuerda que Facebook, LinkedIn y X guardan las vistas previas en caché, así que usa sus herramientas de depuración para forzar una nueva lectura.

Open Graph nació para un botón Me gusta

Facebook presentó el protocolo Open Graph en su conferencia para desarrolladores f8, en abril de 2010, junto con el botón Me gusta que cualquier sitio podía insertar. La idea era convertir páginas web normales en objetos del grafo social de Facebook: una página sobre una película podía declararse película, con título, imagen y URL canónica, y darle a Me gusta te conectaba con ese objeto igual que con una página de fans.

El protocolo se diseñó para ser simple a propósito, y tomó prestado el atributo property de RDFa para que los editores solo tuvieran que añadir unas pocas meta etiquetas. Esa sencillez es lo que lo llevó mucho más allá de Facebook. Twitter lanzó sus Cards en 2012, pero optó por recurrir a los valores Open Graph cuando faltaban sus etiquetas twitter:, y más tarde LinkedIn, Pinterest, Slack, Discord, WhatsApp, iMessage y Telegram empezaron a leer las mismas etiquetas og:. Hoy, un estándar creado para un solo botón decide en silencio el aspecto de casi todos los enlaces que se comparten en internet.

Herramientas relacionadas

Analizador de URL

Divide una dirección web en sus partes: dominio, ruta, parámetros y más.

Generador de llms.txt y robots.txt para IA

Crea un archivo llms.txt que explica tu sitio a los asistentes de IA y reglas de robots.txt para permitir o bloquear los rastreadores de IA.

Generador de favicon

Convierte cualquier imagen en los pequeños iconos web que necesitan los navegadores, en todos los tamaños.

Formateador de SQL

Ordena una consulta SQL para que sea fácil de leer, o compáctala en una sola línea.
Apoyar