Por qué no se previsualizan los enlaces

Esos enlaces que mandas vía Telegram o compartes en Facebook o Twitter. Esos que sólo muestran el URL, sí.

Envías un URL para compartir y en principio no hay problema con él porque se puede abrir sin más. Es correcto y detrás de esa dirección hay un montaje funcional que responde. Pero no queda bonito.

Y es que envías otros y sí que salen bien.

Y como ahora tengo un par de blogs que quiero que sean resultones he estado mirando y he encontrado diferencias significativas en las cabeceras de las páginas. En las que se muestra una previsualización del contenido se debe a que están incluyendo cabeceras especiales que describen qué y cómo mostrarlo. Así el receptor del enlace no tiene que hacer un análisis a fondo de la página y encontrar el título (que no es tan díficil), el cuerpo (que lo mismo sí que se complica según el diseño) y una imagen representativa (que tampoco es sencillo mirando el fuente).

Estas cabeceras pertenecen a un protocolo llamado Open Graph Protocol cuyo propósito es permitir que cualquier página web se convierta en un ente enriquecido dentro de un grafo social. Es decir, que la página web pueda ser gestionada dentro de otros sitios como si de un objeto propio se tratase.

Consiste, básicamente, en añadir unos campos en el encabezado de la página que suministren la siguiente información:

  • Un título claro
  • Una indicación de a qué está apuntando (el tipo)
  • Una imagen que lo describa o represente visualmente en el grafo
  • Un URL canónico
<html prefix="og: https://ogp.me/ns#"> 
  <head> 
    <title>The Rock (1996)</title> 
    <meta property="og:title" content="The Rock" /> 
    <meta property="og:type" content="video.movie" /> 
    <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
    <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
    ... 
</head>
... 
</html>

El tipo de contenido describe con bastante precisión de qué está hecho el objeto al que apuntamos. Y según el tipo, obviamente, se necesita más o menos información adicional.

<meta property="og:image" content="https://example.com/ogp.jpg" /> 
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

No es que esto resuelva todos los problemas de presentación de contenidos ajenos pero con los principales funciona bastante bien. Es un desarrollo originario de Facebook derivado de microformatos y RDFa entre otros.

Referencias