Añadir og:image:width, og:image:height y og:image:type a las etiquetas OpenGraph

Contribuir Característica
1

Estoy migrando de phpBB a Discourse y descubrí que la implementación de OpenGraph de Discourse carece de algunas etiquetas importantes en las que Facebook confía para mostrar las imágenes correctamente.

El Problema

Al compartir temas de Discourse en Facebook, las imágenes no se muestran en la vista previa del enlace. Sin embargo, al compartir publicaciones de phpBB del mismo foro, las imágenes se muestran correctamente.

Usando el Depurador de Compartir de Facebook, encontré que:

phpBB incluye:

<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="768">
<meta property="og:image:type" content="image/jpeg">

Discourse incluye:

<meta property="og:image" content="https://example.com/uploads/.../image.JPG" />

El depurador muestra la imagen correctamente y devuelve HTTP 200, pero Facebook no la mostrará en la vista previa de compartir real sin los metadatos de dimensiones y tipo.

Por Qué Esto Es Importante

De acuerdo con la especificación del Protocolo OpenGraph:

La etiqueta og:image tiene varias propiedades estructuradas opcionales que incluyen og:image:width, og:image:height y og:image:type

Aunque técnicamente son opcionales, el rastreador de Facebook parece requerirlas o preferirlas encarecidamente para una visualización de imágenes fiable. Esto se documenta en varias fuentes y afecta el intercambio en redes sociales para todas las comunidades de Discourse.

Solución Propuesta

Discourse debería añadir automáticamente estas tres etiquetas meta adicionales siempre que esté presente og:image:

  1. og:image:width - ancho real en píxeles de la imagen
  2. og:image:height - alto real en píxeles de la imagen
  3. og:image:type - tipo MIME (image/jpeg, image/png, etc.)

Dado que Discourse ya procesa y optimiza las imágenes, tiene acceso a esta información y puede incluirla fácilmente en la salida de OpenGraph.

Impacto

Esto mejoraría el intercambio en redes sociales para todos los sitios de Discourse, haciendo que los enlaces compartidos sean más atractivos visualmente y aumentando la participación cuando el contenido de Discourse se comparte en Facebook, LinkedIn y otras plataformas que consumen datos de OpenGraph.

Contexto Adicional

3 Me gusta
2

Gracias por el informe @shortmort37 :+1: Esto se solucionará con

4 Me gusta
4

¡Gracias por abordar esto!

Sin embargo, ¿puedes decirme por qué no se incluirá og:image:type? phpBB sí lo hace.

Dan

2 Me gusta
6

Porque leí mal las especificaciones y pensé que era opcional… Pero como el ancho y el alto de la imagen también lo son, no veo ninguna razón para no añadirlo también.

4 Me gusta