Adicionar og:image:width, og:image:height e og:image:type às tags OpenGraph

Funcionalidade
1

Estou migrando do phpBB para o Discourse e descobri que a implementação do OpenGraph do Discourse está faltando algumas tags importantes das quais o Facebook depende para a exibição correta das imagens.

O Problema

Ao compartilhar tópicos do Discourse no Facebook, as imagens não são exibidas na pré-visualização do link. No entanto, ao compartilhar postagens do phpBB do mesmo fórum, as imagens são exibidas corretamente.

Usando o Facebook’s Sharing Debugger, descobri que:

phpBB inclui:

<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 inclui:

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

O depurador mostra a imagem corretamente e retorna HTTP 200, mas o Facebook não a exibirá na pré-visualização real do compartilhamento sem os metadados de dimensão e tipo.

Por Que Isso é Importante

De acordo com a especificação do Protocolo OpenGraph:

A tag og:image possui várias propriedades estruturadas opcionais, incluindo og:image:width, og:image:height e og:image:type

Embora tecnicamente sejam opcionais, o rastreador do Facebook parece exigi-los ou preferi-los fortemente para uma exibição confiável da imagem. Isso é documentado em várias fontes e afeta o compartilhamento em mídias sociais para todas as comunidades Discourse.

Solução Proposta

O Discourse deve adicionar automaticamente essas três meta tags adicionais sempre que og:image estiver presente:

  1. og:image:width - largura real da imagem em pixels
  2. og:image:height - altura real da imagem em pixels
  3. og:image:type - tipo MIME (image/jpeg, image/png, etc.)

Como o Discourse já processa e otimiza imagens, ele tem acesso a essas informações e pode incluí-las facilmente na saída do OpenGraph.

Impacto

Isso melhoraria o compartilhamento em mídias sociais para todos os sites Discourse, tornando os links compartilhados mais visualmente atraentes e aumentando o engajamento quando o conteúdo do Discourse é compartilhado no Facebook, LinkedIn e outras plataformas que consomem dados OpenGraph.

Contexto Adicional

3 curtidas