Por qué no se previsualizan los enlaces

Posted on by

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

6 thoughts on “<span>Por qué no se previsualizan los enlaces</span>”

  1. Yo pongo el og:image en mi página porque no existe nada parecido para dar esa información en HTML pero si el sistema es tan subnormal que es incapaz de interpretar un title por mí le pueden dar mucho por el culo.

    • Bueno, la idea es precisamente que dando esa información tú controles cómo se muestra uno de tus contenidos. Y es barata de interpretar y queda muy vistosa.

      No es por justificar a los de siempre pero si se pueden ahorrar el análisis de un contenido en HTML entiendo que lo hagan.

      Hay páginas artesanales como la tuya que son una gozada pero otras que bordean el infierno en cuanto a capas y capas de complejidad y dependencias.

      • Llegar hasta el html/head/meta property="og:title" es más complicado que llegar al html/head/title y obviamente requiere parsing del HTML de igual forma. Son ganas de pervertir los estándares.

        El og:image tiene sentido porque no hay ningún tag estándar que proporcione esa información (debería haberlo).

        • Por supuesto, cómo no, el Twitter de los cojones también tiene los suyos propios porque no les valían ni estos ni los del Open Graph Protocol (¿esto no es iniciativa de Facebook? Ahora mismo no me acuerdo). Y me da igual quién haya empezado.

          • Sí, es iniciativa de Facebook y claro que Twitter tiene los suyos porque estas empresas necesitaban aquello del grafo social (idea del dueño de Facebook que no recuerdo cómo se escribe, el niño pijo) y se las ingeniaron para ello.

            Es una faena pero habrá que adaptarse. No en lo personal pero sí en lo profesional, que no queda otra.

Comments are closed.