Probador de vista previa de enlaces
Pega un enlace en un chat y se convierte en una tarjeta con una imagen, un titular y una línea de texto. O en una triste caja gris. Esta comprobación lee las etiquetas que alimentan la tarjeta, mide la imagen y dibuja el resultado para seis lugares.
Qué pasa cuando pegas un enlace
En cuanto pegas una dirección en una publicación o un chat, un servidor de ese servicio pide la página. No la muestra. Lee la primera parte del HTML, busca un puñado de etiquetas <meta>, descarga la imagen a la que apunta una de ellas y construye una tarjeta con esas piezas. Después guarda la tarjeta, y todos los que ven el enlace reciben la versión guardada.
Las etiquetas siguen una convención llamada Open Graph, que Facebook introdujo en 2010 y que hoy leen casi todas las redes y aplicaciones de mensajería. Cada una empieza por og:. X lee las mismas etiquetas y añade una propia, twitter:card, para elegir el diseño.
Las etiquetas, por orden de efecto
og:image- La imagen. Más que ninguna otra cosa, decide si el enlace se nota. La dirección debe ser absoluta, empezando por
https://. og:title- El titular de la tarjeta. Sin ella, los servicios recurren a la etiqueta
<title>, que a menudo termina con un nombre de sitio que no querías repetido. og:description- Una o dos frases bajo el titular. Si falta, se usa la meta descripción, y después un pasaje que el servicio elige por ti.
twitter:card- Ponla en
summary_large_imagey X muestra la imagen a todo el ancho. Sin ella obtienes un cuadrado pequeño junto al texto. og:url- La dirección bajo la que se cuentan los me gusta y las veces compartido. Debería ser la misma que la URL canónica de la página.
og:site_name,og:type,og:locale,og:image:alt- Detalles de apoyo: la etiqueta sobre el titular en Slack y Discord, el tipo de contenido, el idioma y una descripción de la imagen para los usuarios de lectores de pantalla.
Cómo se juzga la imagen
Nuestro servidor descarga el archivo indicado en og:image (o en twitter:image cuando es el único) y lo mide con estos umbrales.
| Medición | Resultado |
|---|---|
Ninguna og:image | Problema. Si solo existe twitter:image, pasa a ser un aviso, ya que X tiene imagen y los demás no. |
| El archivo no se puede obtener, no es una imagen o supera los 5 MB | Problema |
| Menor de 600 × 315 px | Problema. Facebook y LinkedIn la reducen a una miniatura o la descartan |
| Menor de 1200 × 630 px | Aviso. Se muestra, pero borrosa en pantallas de alta densidad |
| Ancho dividido por alto por debajo de 1,6 o por encima de 2,2 | Aviso. Las tarjetas son de aproximadamente 1,91 a 1, así que se recortan los bordes |
| Más pesada de 1 MB | Aviso. Algunos recolectores dejan de esperar |
Dirección relativa como /img/share.jpg | Aviso. Varios servicios necesitan la URL completa |
Si quieres una receta que funcione en todas partes, haz un solo JPEG o WebP de 1200 × 630 píxeles, de menos de 300 KB, y mantén cualquier texto alejado de los bordes. La comprobación también anota la falta de título o descripción, un <title> de más de 60 caracteres, una descripción de más de 200 y un og:url que no coincide con el enlace canónico.
Las seis tarjetas dibujadas en los resultados son reconstrucciones hechas con tus etiquetas. Tu navegador carga la imagen desde nuestro servidor, en una copia reducida, así que el sitio probado nunca ve tu visita.
Cómo añadir las etiquetas y refrescar las tarjetas antiguas
Los resultados terminan con un bloque rellenado con lo que encontramos. Va dentro de <head>:
<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">Fíjate en el atributo. Las etiquetas Open Graph usan property= y la de X usa name=. En un CMS rara vez escribes nada de esto a mano. Los complementos de SEO de WordPress, los temas de Shopify, Squarespace y Webflow tienen un campo de “imagen social” por página y uno predeterminado para todo el sitio.
Arreglar las etiquetas no cambia las tarjetas que ya existen. Cada servicio conserva su copia guardada durante días o semanas. Puedes pedir una nueva lectura con el Sharing Debugger de Facebook o el Post Inspector de LinkedIn. En las aplicaciones de chat, añadir un parámetro extra como ?v=2 al enlace hace que cuente como una dirección nueva.
Dos límites que conviene tener presentes. Los diseños cambian, así que los dibujos muestran qué piezas aparecen, no los píxeles exactos. Y la comprobación lee el HTML sin ejecutar scripts, que es también como trabajan los recolectores de vistas previas. Las etiquetas insertadas por JavaScript faltarán aquí, y también faltarán en las redes.
Preguntas frecuentes
¿Qué tamaño debe tener una og:image?
1200 × 630 píxeles, una proporción de 1,91 a 1, en JPEG, PNG o WebP. Mantenla por debajo de 300 KB si puedes y por debajo de 1 MB pase lo que pase. Por debajo de 600 × 315, Facebook y LinkedIn dejan de mostrarla como tarjeta grande.
¿Por qué mi enlace muestra una imagen antigua después de cambiarla?
El servicio guardó la tarjeta en caché la primera vez que se compartió el enlace. Pasa la dirección por el Sharing Debugger de Facebook y pulsa “Scrape Again”, o por el Post Inspector de LinkedIn. WhatsApp, iMessage y Slack no tienen una herramienta así, así que cambia un poco la URL para forzar una tarjeta nueva.
¿X sigue necesitando las etiquetas twitter:?
Solo una. X lee og:title, og:description y og:image cuando faltan las versiones twitter:. Añade twitter:card con el valor summary_large_image para obtener la imagen ancha.
¿Por qué no hay ninguna vista previa cuando pego mi enlace?
Normalmente es una página que necesita JavaScript para producir sus etiquetas, un servidor o cortafuegos que rechaza a los bots de vista previa, un muro de inicio de sesión o una dirección de og:image que devuelve un error. Esta comprobación indica el error de la imagen cuando lo hay.
¿Las etiquetas Open Graph ayudan al posicionamiento en buscadores?
No. Los buscadores construyen sus fragmentos con la etiqueta de título y la meta descripción. Las etiquetas Open Graph solo dan forma al aspecto del enlace allí donde la gente lo comparte, y eso influye en cuántos hacen clic.