OpenGraph 画像が正しく認識されない

Facebookが、投稿本文のトップにあるメイン画像ではなく、フォーラムのロゴをOG画像として取得してしまいます。FacebookのOG開発者デバッグツールを使用してdebug/scrapeを試みましたが、変化はありませんでした。

もしこれが重複投稿であれば申し訳ありませんが、フォーラムの多くのスレッドを読んでも、この問題の解決策を見つけることができませんでした。

ご協力ありがとうございます!

「いいね!」 2

ロゴ画像が大きすぎる可能性があります。上記のプレビュー画像では非常に大きく表示されています。

「いいね!」 2

サイトには Facebook のクローラーに問題を引き起こしているテーマコンポーネントがインストールされているようです。このコンポーネントが <head> 内に以下のコードを追加しています。

<!-- Facebook Pixel Code -->
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

画像は <head> 内に含めるべきではないため、ほとんどのブラウザは無視します。しかし、Facebook のクローラーは img タグを検出し、<head> を早期に終了させてしまうようです。これは デバッグツール で確認できます。

<!-- Facebook Pixel Code -->
</head>
<body>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

この奇妙な <head></body> タグの出現は、curl やどのブラウザからも表示されません。Facebook の挙動は非常に不可解です。

いずれにせよ、解決策は、テーマコンポーネントの <head> セクションにある Facebook トラッキングピクセルを、テーマコンポーネントの「Header」セクションへ移動させることです。

「いいね!」 4

@codinghorror

何か見落としているかもしれませんが、私の問題は、フォーラムのロゴを表示したくないということです。代わりに、投稿内の最初の画像を表示させたいのです。

つまり、投稿内の実際の画像(私の写真)が表示されるのであれば、ロゴのサイズがどうであれ関係ないはずです。私の質問は、そもそもロゴを表示したくないのに、なぜロゴのサイズが問題になるのかということです。意味が通じることを願っています。

「いいね!」 1

@david さん、

カスタムテーマはインストールしていません。Discourse の素のインストール状態です。実際、Discourse のテーマやプラグインのインストール方法さえわかりません。

「いいね!」 1

画像のサイズは多少関係があります。Facebook が og:image タグを見つけられない場合、サイト上の最大の画像を選択するからです。この場合、ロゴが写真よりも大きいため、ロゴが選ばれてしまいました。

ただし、Discourse には og:image タグが含まれています。ただ、あなたのサイトにあるテーマによってそれが壊されてしまっているのです。

インストールされているはずです。Facebook トラッキングピクセルはテーマによって追加されています。セーフモードを使用すると、それが消えます。/admin/customize/themes に移動し、HTML を編集 を押し、</head> タブを開いてください。おそらく、そこには Facebook のコードが表示されているでしょう。

「いいね!」 4

この画像をご覧ください。カスタムテーマは設定していませんし、「HTML を編集」オプションもそこにはありません。

「いいね!」 1

左側の「デフォルト」をクリックすると、編集ボタンが表示されます

「いいね!」 4

これで解決しました!やったー!本当にありがとうございます!

「いいね!」 4