Vista previa de enlace: qué se ve al compartir una página

Cuando alguien pega la dirección de una página en LinkedIn o en WhatsApp, la plataforma visita esa página y arma una tarjeta con título, descripción e imagen. Esos datos salen de etiquetas og: en el <head>, del estándar Open Graph (ogp.me (en inglés)). Cómo escribir el título y la descripción lo explico en el texto sobre título y descripción de la página. Aquí el foco es el resto de la tarjeta: qué etiquetas existen, qué imagen usar y por qué a veces la corrección no aparece.

Qué etiquetas lee la tarjeta

El protocolo Open Graph pide cuatro propiedades en cada página (ogp.me (en inglés)):

og:title, el título tal como debe aparecer en la tarjeta;
og:type, el tipo de contenido, como article para un texto;
og:image, la dirección de la imagen que representa la página;
og:url, la dirección canónica, que funciona como la identidad permanente de la página.

La descripción, og:description, está en la lista de opcionales recomendadas, con una o dos frases. En esa misma lista están og:locale, que indica el idioma, y og:site_name, el nombre del sitio que aparece en la tarjeta.

La imagen admite detalles propios, como tipo, ancho y alto. El protocolo dice además que toda página con og:image debería tener og:image:alt, una descripción de lo que muestra la imagen (ogp.me (en inglés)).

Qué exige LinkedIn

La ayuda de LinkedIn enumera cuatro etiquetas que deben estar en la página: título, imagen, descripción y URL (Ayuda sobre LinkedIn, Hacer que tu sitio web pueda compartirse). Para la imagen de la tarjeta, estos son los números:

como mínimo 1200 por 627 píxeles;
una proporción recomendada de 1,91 a 1;
un archivo de hasta 5 MB.

El mismo texto avisa que una imagen de menos de 401 píxeles de ancho aparece como miniatura, pequeña al lado del título. También da la causa más probable cuando la imagen cumple todo y aun así no aparece: el sitio bloquea el acceso de LinkedIn al archivo, o el archivo está en una carpeta protegida (Ayuda sobre LinkedIn).

Qué pide Google de la misma imagen

Google también lee og:image. Es una de las formas de indicar la imagen preferida de la página, junto al dato estructurado (Google, prácticas de SEO de imágenes). Las recomendaciones para esa elección caben en una lista:

la imagen debe ser pertinente y representar la página;
no debe ser genérica, como el logotipo del sitio;
no debe llevar texto;
debe evitar proporciones extremas, demasiado estrechas o demasiado anchas;
debe tener alta resolución, cuando sea posible.

Discover, la lista de sugerencias de lectura de Google, tiene una vara más precisa (Google, aparecer en Discover). Pide imágenes de al menos 1200 píxeles de ancho, más de 300.000 píxeles en total y proporción 16:9. La página también tiene que habilitar la imagen grande con el ajuste max-image-preview:large. Como Google recorta la imagen por su cuenta, lo importante tiene que sobrevivir al recorte.

Una imagen pequeña también tiene que decir algo

En el feed, la tarjeta compite por atención con todo lo que la rodea, y la imagen muchas veces aparece pequeña. El Nielsen Norman Group, o NN/g, dice que la imagen junto a un enlace debe describir y representar el contenido de la página. El mismo texto critica a los sitios que eligen imágenes genéricas, poco ligadas al tema (Raluca Budiu, NN/g, 2020 (en inglés)).

En tamaño reducido, el detalle se pierde. En un artículo de 2013 sobre columnas laterales, el NN/g cuenta lo que vio en sus estudios de seguimiento de la mirada. Las imágenes simples, con fondo limpio y un objeto fácil de reconocer, atrajeron más atención que las recargadas (Hoa Loranger, NN/g (en inglés)). Cuando la persona no descifra la imagen rápido, ignora todo el contenido que la rodea.

Un texto de 2015 sobre miniaturas en listas en el móvil propone una prueba sencilla (Aurora Harley, NN/g (en inglés)). Pregúntate si alguien podría elegir solo con la imagen. Si es demasiado pequeña para mostrar lo importante, o si es una foto genérica de banco de imágenes, no ayuda.

Por qué la vista previa vieja no desaparece

La plataforma guarda la tarjeta después de leer la dirección. Según la ayuda de LinkedIn, si el enlace ya se compartió antes, la ventana de vista previa puede mostrar la imagen antigua, que quedó en caché (Ayuda sobre LinkedIn, inspector de publicaciones). Para forzar una lectura nueva, pega la dirección en el Post Inspector (en inglés) y revisa la tarjeta que devuelve.

Esa corrección tiene un límite. Solo vale para publicaciones nuevas con ese enlace. Las que ya salieron siguen con la vista previa antigua (Ayuda sobre LinkedIn).

Cómo lo hice en kahue.net

Cada página del sitio declara las cuatro etiquetas del protocolo y además la descripción. El idioma va en og:locale, y los otros dos idiomas del sitio van en og:locale:alternate. La imagen lleva la dirección completa, con dominio, porque el archivo se sirve desde la raíz del sitio y no desde la ruta de cada página. El tipo, el ancho y el alto de la imagen también van declarados.

Cada texto tiene tres portadas, una por idioma, de 1200 por 630 píxeles. Un script lee el título del propio texto para dibujar la portada, así que la versión en español nunca lleva el título en portugués. El título va en el centro a propósito, porque la lista del blog recorta la portada en 4:3 y corta los lados. La medida de 1200 por 630 supera el mínimo de LinkedIn y queda a un pelo de la proporción de 1,91 a 1 (Ayuda sobre LinkedIn).

El formato del archivo cambió en el camino. En PNG, una portada llegaba a 720 KB, y dejé anotado en el código que ese peso retrasaba la vista previa en WhatsApp y en X. Convertidas a JPEG con calidad 86, quedaron por debajo de 110 KB. Las portadas de este texto pesan entre 20 y 30 KB.

También hay un script para ejecutar después del build, que abre cada página generada y rechaza lo que se salga de la regla. Comprueba que la imagen exista, que mida 1200 por 630, que el tipo sea article en los textos y que el idioma de la tarjeta coincida con el de la página. Hoy está desactualizado. Espera en en las páginas en inglés, pero el sitio usa en_US, el formato de idioma y país que pide el protocolo (ogp.me (en inglés)), y por eso rechaza páginas que están bien.

Comparado con las fuentes, todavía faltan tres cosas:

og:image:alt, la descripción de la imagen que pide el protocolo;
og:site_name, el nombre del sitio en la tarjeta;
max-image-preview:large, el ajuste que Discover pide para usar la imagen grande.

Dónde no coinciden las fuentes

La primera diferencia está en lo que es obligatorio. Open Graph exige og:type y deja la descripción como opcional (ogp.me (en inglés)). LinkedIn exige la descripción y no menciona el tipo (Ayuda sobre LinkedIn). Declarar las cinco etiquetas cumple con ambos.

La segunda es la forma de la imagen. LinkedIn recomienda 1,91 a 1, y Discover pide 16:9, un rectángulo un poco más alto (Google, Discover). Un solo archivo no acierta las dos medidas. La portada de 1200 por 630 sigue a LinkedIn y deja que Discover recorte los lados, lo que aquí funciona porque el texto está en el centro.

La tercera le toca de lleno a kahue.net. Google pide una og:image sin texto (Google), y las portadas del blog son justamente el título escrito sobre un fondo oscuro. Para LinkedIn, que solo habla de medida y peso, están bien. Para Google, la recomendación apunta a una imagen que muestre el tema en lugar de escribir su nombre. Por ahora, las portadas siguen como están.

Cómo revisar antes de difundir

Abre el código de la página y busca las etiquetas og:. Comprueba que el título, la descripción y la imagen sean de esta página y no de la página de inicio.
Abre la dirección de la imagen en una ventana privada. Si pide iniciar sesión, la tarjeta no la va a mostrar.
Pega el enlace en el Post Inspector y mira la tarjeta que arma LinkedIn.
¿Cambiaste el título o la portada después de publicar? Pasa el enlace por el inspector otra vez antes de volver a compartirlo.
Imagina la portada con los lados cortados. Lo importante tiene que quedar en el medio.