SITIO EN CONSTRUCCIÓN. Todo se ofrece TAL CUAL y SIN GARANTÍAS, en la medida en que la ley lo permita. Es información, no asesoría profesional. Úsalo bajo tu propia responsabilidad. Términos y límites de responsabilidad →

eThorns EN
← DNS, correo y redEN

Herramienta 2.10

Vista previa de enlaces: Open Graph y Twitter Cards

Mira cómo se verá tu enlace en WhatsApp, X, LinkedIn o Facebook: revisa título, descripción, og:image y etiquetas de Twitter, con correcciones.

Consulta en líneaLa URL va a nuestro servidor (api.ethorns.com), que descarga el HTML de esa página, revisa su imagen de vista previa con una sola petición HEAD y guarda solo el resultado durante 5 minutos. Para dibujar las vistas previas, tu navegador carga esa imagen directamente desde el sitio revisado.

Cómo usarla

  1. Pega la URL completa de la página que quieres compartir.
  2. Presiona Revisar. La URL va a nuestro servidor, que lee el HTML de la página como lo haría WhatsApp o LinkedIn.
  3. Mira las vistas previas simuladas y corrige cada alerta en el <head> de tu página.

Lo que WhatsApp, Facebook, LinkedIn y X leen de tu página

Cuando alguien pega tu enlace en WhatsApp, Facebook, LinkedIn o X, la app arma una tarjeta con unas pocas etiquetas del código de tu página: og:title, og:description, og:image y, para X, twitter:card. Si faltan, el enlace sale pelado o sin imagen. Revísalo antes de mandar una promoción a tu lista de clientes, de publicar un producto nuevo o después de pasar tu sitio a otro constructor de páginas.

El resultado muestra una simulación aproximada de las cuatro tarjetas una al lado de la otra, la lista de alertas y una tabla con todas las etiquetas de vista previa que encontramos, para que veas exactamente qué va a leer cada app.

Una página de producto que se comparte sin foto

Revisa https://tienda-ejemplo.co/producto/cafe-origen. La simulación de WhatsApp muestra el título “Café de origen 500 g” y la descripción, pero donde va la imagen dice Sin imagen. Las alertas explican por qué: “Falta og:image: el enlace se comparte sin imagen”, más una nota menor de que no hay etiqueta twitter:card, así que X muestra una tarjeta pequeña.

La corrección va en el <head> de la página: agrega <meta property="og:image" content="https://tienda-ejemplo.co/img/cafe-1200x630.jpg">, y <meta name="twitter:card" content="summary_large_image"> para la imagen grande en X. Vuelve a revisar, y la fila Revisión de og:image debería mostrar algo como HTTP 200 · image/jpeg · 180.0 KB. Usa una dirección completa que empiece por https://: nosotros resolvemos las rutas relativas para mostrarte la imagen, pero algunas apps no.

Dónde la vista previa puede ser distinta a la real

Las simulaciones son aproximadas: cada app cambia su diseño de vez en cuando, recorta las imágenes a su manera y guarda las vistas previas viejas en su caché durante días. Solo leemos páginas HTML que responden 200, seguimos hasta 5 redirecciones y leemos el primer 1 MB de la página.

No ejecutamos JavaScript, así que no vemos las etiquetas que un script agrega después de cargar la página, y muchas apps tampoco las ven: pon las etiquetas en el HTML que envía tu servidor. Las páginas que piden iniciar sesión o que bloquean las visitas automáticas no muestran vista previa aquí, y normalmente tampoco en las apps.

Preguntas frecuentes

¿Por qué WhatsApp no muestra mi imagen?

La og:image debe ser una URL absoluta con https:// que cargue sin iniciar sesión, y debe ser liviana: las imágenes pesadas suelen omitirse. Lo más seguro es un JPG o PNG de 1200×630 px de pocos cientos de KB.

Ya corregí las etiquetas pero sigue saliendo la vista previa vieja. ¿Por qué?

Las apps guardan las vistas previas durante días. Usa el Sharing Debugger de Facebook o el Post Inspector de LinkedIn para actualizarlas. Aquí los resultados se guardan solo 5 minutos.

¿La imagen que se muestra es la real?

Sí: tu navegador carga la og:image directamente desde ese sitio, como lo harían WhatsApp o Facebook, sin decirle desde qué página vienes. Como con cualquier imagen de internet, ese sitio puede ver tu dirección IP. Nuestro servidor además revisa la imagen una vez y te dice su tipo y tamaño.

¿Por qué mi enlace muestra un título equivocado?

Las apps usan primero `og:title` y, si no está, el `<title>` de la página; X usa `twitter:title` antes que los dos. Si cambiaste solo uno, los otros siguen mostrando el texto viejo. Y si aquí las etiquetas están bien pero la app muestra el texto viejo, es la caché de la app: mira la pregunta de arriba sobre cómo actualizarla.

¿Necesito etiquetas Open Graph y también las de Twitter?

Casi nunca las dos. X usa `og:title`, `og:description` y `og:image` cuando faltan sus propias etiquetas. La que sí necesita es `twitter:card` con el valor `summary_large_image`; sin ella, X muestra una tarjeta pequeña con miniatura.

  • 2.1¿Cuál es mi IP?Mira tu dirección IP pública, si es IPv4 o IPv6, tu país, la versión de TLS y HTTP, y lo que cualquier sitio web puede saber de ti por tu conexión.
  • 2.2Seguridad de correoRevisa el SPF, DKIM, DMARC, MTA-STS, BIMI y DNSSEC de un dominio y obtén registros DNS listos para copiar para lo que falte.
  • 2.3Generador de registro SPFArma un solo registro SPF para tu dominio con tus servicios de correo, servidores y rangos IP.
  • 2.4Consulta DNSConsulta los registros DNS de cualquier dominio (A, AAAA, CNAME, MX, TXT, NS, SOA, CAA, SRV) o el DNS inverso de una IP, con TTL y validación DNSSEC.
  • 2.5Analizador de encabezadosPega los encabezados de un correo para ver por qué servidores pasó, qué resultado de SPF, DKIM y DMARC anotó tu proveedor y si el remitente parece falso.
  • 2.6Propagación DNSPregúntales a 10 resolvedores públicos (Google, Cloudflare, Quad9…) por los registros A, AAAA, CNAME, MX, NS o TXT de un nombre y mira si ya tienen tu cambio.
  • 2.7Lector de reportes DMARCAbre un reporte agregado de DMARC (.xml, .xml.gz o .zip) y mira, por cada IP que envió, cuántos mensajes pasaron o fallaron SPF y DKIM.
  • 2.8¿Está caído?Revisa si una página responde, con su estado HTTP, tiempo de respuesta, redirecciones y HTTPS, medido una vez desde nuestro servidor en Colombia.
  • 2.9Generador de registro DMARCArma un registro TXT de DMARC: política, modo de prueba, correos para reportes y alineación.
  • 2.11Calculadora de subredesEscribe una IP con su prefijo y obtén la red, la máscara, el broadcast, el rango y la cantidad de hosts, y divídela en subredes iguales.

╌╌ FIN ╌╌