Vista previa de Open Graph: mira cómo se ve tu enlace en redes sociales

Introduce una URL y mira la tarjeta exacta que mostrarán Facebook, LinkedIn, X y Slack, todas las etiquetas encontradas y lo que falta.

La página debe ser accesible públicamente. No se pueden previsualizar sitios de staging protegidos con contraseña ni localhost.

Nuestro servidor solo obtiene las etiquetas de la página, cuando tú lo pides; no se guarda nada sobre ti. Ver todas las herramientas gratis.

¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.

Esta herramienta gratis de vista previa de Open Graph obtiene cualquier página pública y muestra la tarjeta de enlace que Facebook, LinkedIn, X y Slack construirán a partir de sus etiquetas, tal como la construyen: título, descripción, imagen y nombre del sitio, recortados y truncados como lo hace cada plataforma. Enumera todas las etiquetas og: y twitter: que ha encontrado, mide la imagen para compartir y puntúa la página con una solución concreta para cada fallo.

Las vistas previas de enlaces dependen por completo de un puñado de metaetiquetas, y fallan sin avisar: si falta og:image, un artículo compartido se queda en un enlace gris sin más; una imagen de menos de 600 px de ancho se convierte en una miniatura; un título de más de 70 caracteres se corta a mitad de palabra. Comprobarlo aquí antes de compartir, o después de un despliegue, lleva diez segundos y lo detecta todo. Como la petición la hace nuestro servidor cuando tú lo pides, también muestra lo que ve un rastreador y no lo que ve tu navegador con la sesión iniciada.

Cómo usarla

  1. Pega la URL de la página y pulsa Vista previa. La página debe ser accesible públicamente; no se pueden obtener localhost ni sitios de staging protegidos con contraseña.
  2. Mira las tres tarjetas. Si muestran solo un título o ninguna imagen, faltan etiquetas o la imagen no carga.
  3. Lee las comprobaciones. Cada línea fallida indica qué añadir o cambiar; el generador de metaetiquetas produce las etiquetas que faltan.
  4. Corrige, despliega y vuelve a comprobar. Si Facebook o LinkedIn siguen mostrando la tarjeta antigua, la tienen en caché: vuelve a extraerla con el Sharing Debugger de Facebook o el Post Inspector de LinkedIn.

Preguntas frecuentes

¿Por qué la vista previa difiere de lo que muestran LinkedIn o Facebook?

Por la caché. Ambas plataformas guardan la primera versión de la tarjeta de un enlace que ven, a veces durante semanas. Esta herramienta siempre obtiene las etiquetas en vivo. Para actualizar la caché de una plataforma, usa el Sharing Debugger de Facebook (que también actualiza Instagram y WhatsApp) o el Post Inspector de LinkedIn. X se actualiza por sí solo en más o menos un día.

¿Qué tamaño debe tener og:image?

1200 × 630 píxeles, proporción 1.91:1, menos de unos 5 MB, servida por HTTPS en una URL absoluta. Eso produce la tarjeta grande en todas partes. Las imágenes de menos de 600 px de ancho pasan a ser una miniatura pequeña en Facebook y LinkedIn. Las imágenes cuadradas se recortan; mantén el sujeto centrado.

¿Qué etiquetas necesito como mínimo?

og:title, og:description, og:image y og:url. Añade og:site_name y og:type, y twitter:card con el valor summary_large_image para que X use la imagen grande. X lee las etiquetas og: como alternativa para todo lo que twitter: no especifica.

La herramienta dice que la página redirigió. ¿Es un problema?

Normalmente no: las redirecciones de http a https y de sin www a www son normales, y la herramienta las sigue. Se convierte en un problema cuando un enlace compartido redirige a través de un dominio de seguimiento que no sirve etiquetas, o cuando una cadena de redirecciones es tan lenta que el rastreador de una plataforma se rinde. Siempre que puedas, comparte directamente la URL final.

¿Puede previsualizar una página que requiere inicio de sesión o en localhost?

No. La petición se hace desde nuestro servidor, así que solo ve lo que ve cualquier visitante anónimo, que es también lo que ven los rastreadores de las redes sociales. Para una página local, despliégala primero en una URL de vista previa. Las peticiones a direcciones de redes privadas se rechazan por diseño.

¿Se guarda algo?

La URL se obtiene cuando lo pides, las etiquetas se devuelven a tu navegador y no se conserva nada. Solo se leen las etiquetas del head de la página, hasta 1 MB.

Cómo construye la tarjeta cada plataforma

Facebook y LinkedIn leen og:* y muestran la imagen, el título y el dominio (LinkedIn omite la descripción en los feeds). X lee primero twitter:* y og:* como alternativa, y elige el diseño grande o pequeño según twitter:card. Slack, Discord e iMessage leen og:* y muestran el nombre del sitio, el título, la descripción y la imagen, en ese orden. WhatsApp muestra una miniatura de og:image y el título. Ninguna ejecuta JavaScript, así que las etiquetas inyectadas en el cliente les resultan invisibles; genera las etiquetas en el servidor.

Causas habituales de una vista previa rota

• og:image es una ruta relativa o una URL http en un sitio https.

• La imagen está bloqueada por robots.txt o requiere inicio de sesión.

• Una CDN o una capa de protección contra bots sirve una página de verificación a los rastreadores.

• La página define las etiquetas con JavaScript después de cargar.

• og:url apunta a otra página, así que la plataforma muestra la vista previa de esa en su lugar.

Herramientas gratis relacionadas

  • Generador de metaetiquetas — Rellena el título, la descripción y los datos de la tarjeta social de una página y obtén un bloque <head> completo y bien escapado, con contadores de longitud en vivo.
  • Vista previa de SERP — Previsualiza cómo se verán el título y la meta descripción de tu página en Google, con recuento de caracteres en tiempo real.
  • Generador de enlaces UTM — Crea enlaces de seguimiento UTM limpios y coherentes para saber exactamente qué campañas te traen clientes.