Webデザイナーが、Webや本について記事を書いています。たまにDTPも。Kindle、電子書籍、Apple関連の記事が多め。

og:imageで画像を変更してもFacebookで反映されないとき

Web, Webサービス

お久しぶりです。最近は昔作った読みたい本が見つかる!電子書籍横断検索サイトeBook-1(イーブックワン) *をリニューアルしていて楽しいです。

今日は、Facebookにサイトをシェアする際に表示されるog:imageで行き詰ったのでメモしておきます。
結果から言うと半日費やした割にあまりに間抜けなのですが、画像サイズがでかすぎました(´・ω・`)

以下、事の経緯と詳細。

やったこと

og:imageを変更したかったので、設定している画像に変更した画像を上書き保存しました。
metaタグを書き変えるのが面倒だなーという理由で上書きに。思えばこれが悲劇の始まりでした……。

試したこと

  • 画像のリンクが正しいかチェックした。→正しく設定されており、飛び先は新しい画像が表示された
  • 何度か時間を置いてシェアしようとした→古い画像が表示され続けた
  • キャッシュの問題かと思い、「もう一度スクレイピング」しつつ、半日放置→改善されなかった
  • デバッグツールで出ていたエラーは全て潰した→改善されなかった

解決のためにやったこと

OGP設定 og:image で画像を指定しても表示(反映)されない場合にチェックすべき事項 | 株式会社ジェイクール【ホームページ更新代行・制作】
この記事を参考に、画像の名前を変えてみた。
具体的には、aaa.png→bbb.pngにリネームし、og:imageもその名前に書き換えた。

<meta property="og:image" content="http://xxx.com/wp-content/uploads/aaa.png" />

↓こう書き換えた。

<meta property="og:image" content="http://xxx.com/wp-content/uploads/bbb.png" />

結果

デバッグツールで「もう一度スクレイピング」したところ、以下のエラーが出た……!

画像を使用できません
指定されたog:image URL「http://xxx.com/wp-content/uploads/bbb.png」は、最大サイズ(8 MB)を超えている、またはサーバーの応答が遅すぎるため、ダウンロードできませんでした。

原因

画像サイズをでかく作りすぎていた。実際には4MBほどであったが、それでも大きすぎたのか、もしくはサーバーの応答に時間がかかったらしい。

対処法

画像サイズを小さくした。適当なサイズだったのでついでに1200:630(推奨サイズ)に変更しておいた。

反省

キャッシュのせいで正しいエラーが表示できていなかったので、解決まで時間がかかった。
面倒臭がらずにもっと早くリネームすれば、ちゃんとしたエラーが表示されたはず。反省。

最近読んだ本

この記事にはタグがありません。
Web, Webサービス

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*