Cómo usarlo
- Escribe la dirección de una página, como
example.com/blog/launch, y pulsa Comprobar. ¿No tienes una a mano? Prueba uno de los ejemplos. - Mira la tarjeta que construye cada app: X, Facebook, LinkedIn, Slack, Discord, WhatsApp e iMessage. Un punto verde significa que la tarjeta se ve bien; uno ámbar o rojo dice bajo la tarjeta qué falla.
- Abre Mostrar correcciones y etiquetas para ver cada etiqueta comprobada una a una. Las que faltan vienen listas para pegar en tu
<head>: cópialas, rellena los valores, publica el cambio y vuelve a comprobar.
La dirección de la comprobación está en la barra de direcciones de tu navegador, así que puedes enviársela a quien se ocupe de la página.
Cómo funcionan las vistas previas de enlaces
Cuando pegas un enlace en una publicación o un chat, el rastreador de la app descarga la página una vez y lee las etiquetas de su <head>. No ejecuta JavaScript, no inicia sesión ni acepta banners de cookies, así que las etiquetas que añade un script después de cargar la página le resultan invisibles. El comprobador descarga la página igual: una petición, sin JavaScript y siguiendo las redirecciones como lo hace un rastreador.
Cada app lee las mismas pocas etiquetas, con sus propias alternativas:
- Open Graph (
og:title,og:description,og:image,og:url,og:site_name) es lo que leen Facebook, LinkedIn, Slack, Discord, WhatsApp e iMessage. - X lee primero
twitter:card,twitter:title,twitter:descriptionytwitter:image, y si faltan usa las etiquetas Open Graph. Sintwitter:cardmuestra una tarjeta de resumen pequeña, aunque haya imagen. - Cuando falta
og:title, la mayoría de las apps usan el<title>. Cuando faltaog:description, algunas usan la meta descripción y otras no muestran texto. - Discord colorea el lateral de su tarjeta con
theme-color.
Las vistas previas de aquí siguen esas reglas. Cada app cambia también su diseño de vez en cuando, así que tómalas como aproximadas, no exactas.
La imagen de vista previa
Una sola imagen sirve en todas partes: 1200 × 630 píxeles (1,91:1), PNG o JPEG, en una dirección https:// completa.
- Por debajo de 600 píxeles de ancho, Facebook y LinkedIn muestran una miniatura pequeña en lugar de una tarjeta grande. Por debajo de 200 × 200, Facebook no muestra imagen.
- X admite imágenes de hasta 5 MB y Facebook de hasta 8 MB. WhatsApp a menudo omite imágenes de más de unos 600 KB, así que un JPEG bien comprimido es la opción segura.
- Ninguna de las grandes apps admite SVG.
- Una dirección relativa como
/og.pngno funciona con todos los rastreadores. Escribe la URL completa. - Los recortes cuadrados son habituales (WhatsApp, iMessage en enlaces pequeños), así que mantén lo importante de la imagen cerca del centro.
El comprobador también descarga la imagen, la mide a partir de la cabecera del archivo y la muestra en las vistas previas.
Por qué una vista previa sigue viéndose antigua
Las apps guardan en caché lo que descargaron, desde minutos hasta una semana más o menos. Tras corregir tus etiquetas, el comprobador muestra enseguida la versión nueva, pero un enlace que ya se compartió mantiene la vista previa antigua hasta que la app lo vuelve a descargar. El Sharing Debugger de Facebook y el Post Inspector de LinkedIn vuelven a descargar una página cuando lo pides. En Slack, un enlace publicado de nuevo al cabo de un rato obtiene una vista previa nueva. Añadir una query string, como ?v=2, hace que cualquier app lo trate como un enlace nuevo.
Preguntas frecuentes
¿Por qué mi vista previa no tiene imagen?
Las causas habituales, por orden: no hay etiqueta og:image, la dirección de la imagen es relativa o responde con un error, la imagen es demasiado pequeña o demasiado grande, o la etiqueta la añade JavaScript tras cargar la página. La línea bajo cada tarjeta indica la causa que aplica.
¿Qué etiquetas necesito como mínimo?
og:title, og:description, og:image con una imagen de 1200 × 630, og:url y twitter:card con el valor summary_large_image. El Generador de metaetiquetas las escribe por ti.
¿Puede comprobar páginas que requieren iniciar sesión?
No. Los rastreadores no inician sesión, así que una página tras un inicio de sesión no tiene vista previa en ningún sitio. El comprobador ve lo mismo que ellos, y solo descarga direcciones públicas: las redes privadas e internas se rechazan.
¿Guarda el comprobador las páginas que descarga?
No. Descarga la página y sus imágenes cuando pulsas Comprobar y te envía lo que encontró. El resultado se guarda dos minutos, para que una segunda comprobación de la misma dirección sea instantánea, y luego se descarta. Lee hasta 2 MB de HTML y 8 MB por imagen, y se rinde a los 8 segundos.
¿Por qué dice que mi página responde 403 si en mi navegador se abre bien?
Algunos sitios y firewalls bloquean las peticiones que no vienen de un navegador, o las de grandes rastreadores que conocen. Si el comprobador recibe un 403, Facebook o LinkedIn pueden recibirlo también: revisa la configuración de bots de tu firewall.
¿Hay algún límite?
Veinte comprobaciones por minuto desde una misma dirección. Además, cada sitio se descarga como mucho 60 veces por minuto entre todos los que usan el comprobador, para que no sirva para saturar un sitio. Los resultados se guardan dos minutos, así que la misma dirección comprobada poco después vuelve al instante; pulsar Comprobar otra vez en la página que estás mirando siempre la descarga de nuevo.