OpenGraphタグにog:image:width、og:image:height、og:image:typeを追加

貢献 特徴
1

phpBBからDiscourseに移行したところ、DiscourseのOpenGraphの実装には、Facebookが適切に画像を
表示するために重要ないくつかのタグが欠けていることがわかりました。

問題点

DiscourseのトピックをFacebookで共有すると、リンクプレビューに画像が表示されません。しかし、同じフォーラムからphpBBの投稿を共有すると、画像は正しく表示されます。

Facebookの共有デバッガーを使用すると、次のことがわかりました。

phpBBに含まれるもの:

<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に含まれるもの:

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

デバッガーは画像を正しく表示し、HTTP 200を返しますが、Facebookはディメンションとタイプのメタデータがないと実際の共有プレビューに画像を表示しません。

なぜこれが重要なのか

OpenGraphプロトコル仕様によると、

og:imageタグには、og:image:width、og:image:height、og:image:typeなど、いくつかのオプションの構造化プロパティがあります。

これらは技術的にはオプションですが、Facebookのクローラーは、信頼性の高い画像表示のためにこれらを要求するか、強く優先するようです。これはさまざまな情報源で文書化されており、すべてのDiscourseコミュニティのソーシャルメディア共有に影響を与えます。

提案される解決策

Discourseは、og:imageが存在するたびに、次の3つの追加のメタタグを自動的に追加する必要があります。

  1. og:image:width - 画像の実際のピクセル幅
  2. og:image:height - 画像の実際のピクセル高さ
  3. og:image:type - MIMEタイプ（image/jpeg、image/pngなど）

Discourseはすでに画像を処理および最適化しているため、この情報にアクセスでき、OpenGraph出力に簡単に追加できます。

影響

これにより、すべてのDiscourseサイトのソーシャルメディア共有が改善され、共有されたリンクが視覚的に魅力的になり、DiscourseのコンテンツがFacebookやLinkedInなどのOpenGraphデータを消費するプラットフォームで共有されたときのエンゲージメントが高まります。

追加のコンテキスト

「いいね！」 6
2

ご報告ありがとうございます @shortmort37 :+1: これは以下で修正されます

「いいね！」 6
4

これに対応していただきありがとうございます！

しかし、なぜ og:image:type が含まれないのか教えていただけますか？phpBB は含んでいます。

ダン

「いいね！」 3
6

specs を読み間違えて、オプションだと思ったからです… しかし、画像の幅と高さもそうなので、それらを追加しない理由も見当たりません。

「いいね！」 6
7

最新のDiscourseアップデートで、Facebookとの統合が非常にうまくいっています。本当にありがとうございます！

-Dan

「いいね！」 4
8

もっと多くの称賛を送りたいと思います。最近、David Taylor氏の素晴らしい「Topic List Thumbnails」テーマコンポーネントをデプロイしました。トピックにサムネイルを生成できること、さらに「|thumbnail」タグを画像宣言の最後に追加することで、サムネイルを生成する画像を選択できることは素晴らしいです。

基盤となるアーキテクチャがこのタグをog:imageとテーマコンポーネントの両方に利用しているからかもしれませんが、サムネイルを変更すると、OpenGraphプロパティのog:imageも変更され、その結果Facebookでの表示も変わることを発見して感激しました。一石二鳥、といったところでしょうか！:zany_face:

素晴らしい出来栄えです！
Dan