Füge og:image:width, og:image:height und og:image:type zu OpenGraph-Tags hinzu

Beitragen Merkmal
1

Ich migriere von phpBB zu Discourse und habe festgestellt, dass die OpenGraph-Implementierung von Discourse einige wichtige Tags vermissen lässt, auf die Facebook für die korrekte Bildanzeige angewiesen ist.

Das Problem

Wenn Discourse-Themen auf Facebook geteilt werden, werden Bilder in der Link-Vorschau nicht angezeigt. Wenn jedoch phpBB-Beiträge aus demselben Forum geteilt werden, werden Bilder korrekt angezeigt.

Mithilfe des Facebook Sharing Debuggers habe ich festgestellt, dass:

phpBB enthält:

<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 enthält:

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

Der Debugger zeigt das Bild korrekt an und gibt HTTP 200 zurück, aber Facebook zeigt es in der eigentlichen Freigabevorschau ohne die Metadaten für Abmessungen und Typ nicht an.

Warum das wichtig ist

Gemäß der OpenGraph-Protokollspezifikation:

Das Tag og:image verfügt über mehrere optionale strukturierte Eigenschaften, darunter og:image:width, og:image:height und og:image:type

Obwohl diese technisch optional sind, scheint der Crawler von Facebook sie für eine zuverlässige Bildanzeige zu benötigen oder stark zu bevorzugen. Dies ist in verschiedenen Quellen dokumentiert und wirkt sich auf das Teilen von Inhalten in sozialen Medien für alle Discourse-Communitys aus.

Vorgeschlagene Lösung

Discourse sollte automatisch diese drei zusätzlichen Meta-Tags hinzufügen, wann immer og:image vorhanden ist:

  1. og:image:width – tatsächliche Pixelbreite des Bildes
  2. og:image:height – tatsächliche Pixelhöhe des Bildes
  3. og:image:type – MIME-Typ (image/jpeg, image/png, usw.)

Da Discourse Bilder bereits verarbeitet und optimiert, hat es Zugriff auf diese Informationen und kann sie problemlos in die OpenGraph-Ausgabe aufnehmen.

Auswirkung

Dies würde das Teilen von Inhalten in sozialen Medien für alle Discourse-Seiten verbessern, geteilte Links optisch ansprechender gestalten und das Engagement steigern, wenn Discourse-Inhalte auf Facebook, LinkedIn und anderen Plattformen geteilt werden, die OpenGraph-Daten verarbeiten.

Zusätzlicher Kontext

5 „Gefällt mir“
2

Danke für den Bericht @shortmort37 :+1: Dies wird durch den folgenden Pull Request behoben:

5 „Gefällt mir“
4

Vielen Dank für die Bearbeitung!

Können Sie mir sagen, warum og:image:type nicht enthalten sein wird? phpBB tut dies.

Dan

3 „Gefällt mir“
6

Weil ich die Spezifikationen falsch gelesen und dachte, es sei optional… Aber da die Breite und Höhe des Bildes es auch sind, sehe ich keinen Grund, es nicht ebenfalls hinzuzufügen.

5 „Gefällt mir“
7

Dies integriert sich jetzt mit dem neuesten Discourse-Update recht gut mit Facebook. Vielen, vielen Dank!

-Dan

3 „Gefällt mir“