En estos días me he obsesionado con opengraph y como implementarlo en mis proyectos. Y de cierta forma lo había logrado en todos menos en uno y solamente me fallaba con Whatsapp. Me llevó varios días dar con la solución.

¿Qué es Open Graph?

Open Graph es un protocolo creado por Facebook que permite a los desarrolladores web definir cómo se muestra el contenido de una página cuando se comparte en redes sociales, como Facebook, Twitter, LinkedIn, WhatsApp, etc.

Consiste en un conjunto de meta etiquetas ( ) que se añaden al código HTML de una página para especificar información como el título, la descripción, la imagen y el tipo de contenido que aparecerán en la vista previa del enlace compartido.

Por ejemplo, las etiquetas básicas de Open Graph incluyen:

• og:title: El título del contenido.
• og:description: Una breve descripción del contenido.
• og:image: La URL de la imagen que se mostrará.
• og:url: La URL canónica de la página.
• og:type: El tipo de contenido (por ejemplo, “article”, “website”, “video”).

Un ejemplo de implementación básica en HTML:

<meta property="og:title" content="Título de la página" />
<meta
    property="og:description"
    content="Descripción del contenido de la página."
/>
<meta property="og:image" content="https://ejemplo.com/imagen.jpg" />
<meta property="og:url" content="https://ejemplo.com" />
<meta property="og:type" content="website" />

¿Cómo se implementa Open Graph?

Pues hay varias opciones, por ejemplo en Wordpress le dejo esta responsabilidad Rank Math mi plugin que se encarga del SEO. Y a la fecha no he tenido problemas.

En el caso de Torreón Antiguo en donde utilizo Eleventy para generar el contenido. No hay de otra más que hacerlo a manita.

Puede ser complicado y no hay una fórmula general, pero para que tengan una idea, esta es la parte de implementación que estoy utilizando.

<!-- meta tags si es un artículo o la página principal -->
{% if articulo.titulo %}
<!-- metatags -->
<meta name="description" content="{{ articulo.texto | replace("\n", " ") |
truncate(160) }}">
<meta
    name="keywords"
    content="Torreón antiguo, La Laguna años 70, archivo fotográfico, leyendas, cultura norteña antigua, edificios de Torreón"
/>

<!-- opengraph -->
<meta property="og:locale" content="es" />
<meta
    property="og:url"
    content="/torreon/{{ articulo.titulo | slugify }}.html"
/>
<meta property="og:title" content="{{ articulo.titulo | truncate(50) }}" />
<meta property="og:description" content="{{ articulo.texto | replace("\n", " ")
| truncate(160) }}" />
<meta
    property="og:image"
    content="/torreon/imagenes/{{ articulo.imagenes[0].nombre }}"
/>
<meta property="og:type" content="article" />
<meta property="og:logo" content="/torreon/android-chrome-192x192.png" />
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@linuxmanr4" />
<meta name="twitter:title" content="{{ articulo.titulo | truncate(50) }}" />
<meta name="twitter:description" content="{{ articulo.texto | replace("\n", " ")
| truncate(160) }}">
<meta
    name="twitter:image"
    content="/torreon/imagenes/{{ articulo.imagenes[0].nombre }}"
/>
<meta name="twitter:image:alt" content="{{ articulo.titulo }}" />
{% else %}
<!-- metatags -->
<meta
    name="description"
    content="Archivo nostálgico de la comunidad de Google+ Torreón antiguo. Revive el pasado con fotos históricas, relatos ciudadanos y recuerdos colectivos de la ciudad de Torreón Coahuila. Memoria visual preservada para las futuras generaciones."
/>
<meta
    name="keywords"
    content="Torreón antiguo, La Laguna años 70, archivo fotográfico, leyendas, cultura norteña antigua, edificios de Torreón"
/>
<!-- opengraph -->
<meta property="og:locale" content="es" />
<meta property="og:url" content="/torreon/" />
<meta
    property="og:title"
    content="Torreón antiguo, archivo nostálgico de la ciudad de Torreón"
/>
<meta
    property="og:description"
    content="El alma digital de los recuerdos laguneros. Último refugio de la comunidad de Google+ sobre la historia local de Torreón"
/>
<meta property="og:image" content="/torreon/imagenes/casa_arocena.jpg" />
<meta property="og:type" content="website" />
<meta property="og:logo" content="/torreon/android-chrome-192x192.png" />
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@linuxmanr4" />
<meta
    name="twitter:title"
    content="Torreón antiguo, archivo nostálgico de la ciudad de Torreón"
/>
<meta
    name="twitter:description"
    content="Resguardo digital de la comunidad de Google+ sobre el Torreón del ayer. Fotos históricas, relatos ciudadanos y recuerdos preservados de la Comarca Lagunera."
/>
<meta name="twitter:image" content="/torreon/imagenes/casa_arocena.jpg" />
<meta
    name="twitter:image:alt"
    content="Fotografía antigua de la Casa Arocena en color."
/>
{% endif %}

Hay una condición if para distinguir si se trata de la página principal o de un artículo. Y crea los meta tags correspondientes para cada situación.

El problema era en Centauro del Norte , que utiliza Pelican (similar a Eleventy, pero con Python). Tengo que codificar todo para que me construya las meta tags correspondientes.

Revisando con un validador de Open Graph

Me tardé más de lo debido en refinar todo el código, pero funcionó, bueno, casi.

Funcionaba bien en Telegram, Twitter, pero cuando quería compartir el enlace en Whatsapp, pues nomás no. Solo mostraba un enlace pelón y así no me gustaba.

Intenté con un validador de opengraph de un sitio llamado OrcaScan y parecía que todo estaba correcto ¿Entonces? ¿Qué estaba fallando?

Le invertí varios días picando código. Incluso encontré otros problemas que no estaba buscando, revisé el código HTML generado por Pelican y todo parecía correcto, hasta qué …

La minificación

La minificación en desarrollo web es el proceso de reducir el tamaño de archivos de código, como HTML, CSS, JavaScript o JSON, eliminando elementos innecesarios sin alterar su funcionalidad. Esto incluye:

• Eliminar espacios en blanco, saltos de línea y tabulaciones.
• Quitar comentarios del código.
• Acortar nombres de variables, funciones o clases (en JavaScript, por ejemplo).
• Optimizar estructuras para usar menos caracteres (por ejemplo, eliminar puntos y comas innecesarios en JavaScript cuando es posible).

Básicamente, es una optimización del código para la máquina. La computadora no va a leer tus comentarios, no le interesan esas coquetonas líneas en blanco, o el abuso de tabuladores para identar el código, nooooo, se los brinca olímpicamente y la minificación es algo que suelo hacer antes de subir el proyecto a Internet.

El problema son las comillas

Al revisar el código después de la minificación me di cuenta de que el código optimizado no tenía comillas.

Me explico, usualmente muchos parámetros de los tags de HTML usan comillas, por ejemplo:

<meta property="og:image" content="https://ejemplo.com/imagen.jpg" />

El mismo código optimizado me aparecía así:

<meta property=og:image content=https://ejemplo.com/imagen.jpg />

¿Esto es un problema? En teoría, no, es válido, aunque tiene sus reglas.

No es obligatorio usar comillas en HTML5 para los valores de atributos sin espacios ni caracteres especiales, pero es una buena práctica usarlas siempre para mantener el código claro, consistente y compatible con diferentes herramientas y estándares.

Ahora en Eleventy utilizo htmlmin para esta tarea. En Pelican uso el plugin minify que durante la optimización elimina las comillas del código.

No sería un inconveniente, pero WhatsApp quiere esas comillas y ese es el verdadero problema.

Sin esas comillas no funciona ¡Hágame usted el favor! 😠

Estuve revisando la documentación del plugin, pero aparentemente no hay una opción que modifique su comportamiento y me regrese esas comillas.

Minify al rescate

Afortunadamente, me encontré con minify un programa escrito en Go que es rapidísimo y que puedo usar desde la terminal.

Tiene la opción de conservar las comillas 👍 se puede especificar todo un directorio recursivamente 👍👍 y tiene una velocidad más que decente 👍👍👍.

El comando quedaría así:

minify --html-keep-quotes -i -r output/

La opción -i es para que haga la optimización en esa misma carpeta sobreescribiendo los archivos.

La opción -r es para que busque recursivamente en todas las sub carpetas de la carpeta output.

Después de subir el proyecto y hacer algunas pruebas, este fue el resultado.

Conclusiones

La inspiración para la solución me llegó del lugar más escondido de Stack Overflow Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn’t work

Le invertí varios días en solucionar un problema que era muy simple de arreglar.

Si les llega a pasar algo similar, espero que este artículo les ahorre tiempo y quebraderos de cabeza.

¡Hasta la próxima!