記事の詳細
Jetpackを使ってFacebookやGoogle+に投稿した時の画像がアイキャッチと異なる問題の解決方法
WordPressのプラグインの1つである「Jetpack by WordPress.com」はSNS(Twitter、Facebook、Google+)などにブログに投稿した内容を同時に反映してくれる便利なプラグインです。
そんな便利なJetpackなんですが、使用しているテーマによってはなぜかSNSに自動投稿された時の画像が実際の投稿の内容とは全くことなるものになってしまうことがあります。
そんな問題を今回は解決します!
[今回の記事の概要]
- どういう問題が発生しているのか?
- アイキャッチの画像サイズが200x200pixel未満の時に発生
- 【対策①】アイキャッチに使用する画像のサイズを200x200pixel以上にする
- 【対策②】サムネイルのサイズを200x200pixel以上にする
今回のブログの見出しはコチラです!
どういう問題が発生しているのか?
以下の画像はFacebookへの投稿されたものです。
「藤野ぐるっと陶器市」のイベントのはずなのに、なぜかWEBマーケティングセミナーのアイキャッチが使われています。
本当ならこの画像になって欲しいところですが、残念なことになっています。
問題はアイキャッチの画像サイズが200x200pixel未満の時に発生
Facebookへの投稿画像はOGP(og:image)で指定された画像を使用するという仕様になっており、Jetpackでもアイキャッチの画像がOGPに設定されています。つまり、jetpackは正しいアイキャッチを指定しているのです。
なのになぜ!?
原因は画像サイズにありました。
FacebookはOGPで画像が指定されていても、200x200pixel未満の画像は使われないという仕様があり、アイキャッチが正しく投稿に反映されないのはこの画像サイズの問題だったのです。
確認する対策としては2つあります。
【対策①】アイキャッチに使用する画像のサイズを200x200pixel以上にする
アイキャッチ画像に指定する画像ファイルのサイズを必ず200x200pixel以上にしましょう。
一般的なテーマを使用しているのであれば、これで問題は解決することができるでしょう。
【対策②】自動リサイズ機能付きの場合、サムネイルのサイズを200x200pixel以上にする
最近のテーマではアイキャッチの画像の自動リサイズ機能が付いているものもあり、その場合は対策①で大きな画像をアイキャッチとして指定しても自動的に小さなサイズに変換されているのでさらに対策が必要です。
弊社で使っているテーマの場合、function.phpに以下のようにサムネイルを生成するコードがあります。
1 2 3 4 5 6 |
// サムネイルの設定 -------------------------------------------------------------------------------- if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); add_image_size( 'mid_size', 225, 120, true ); add_image_size( 'small_size', 64, 64, true ); } |
弊社のテーマのアイキャッチはこのmid_sizeという名前のサムネイルをアイキャッチに使用していたので、以下のように縦横比を1.8倍に変更してしまいました。
1 2 3 4 5 6 |
// サムネイルの設定 -------------------------------------------------------------------------------- if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); add_image_size( 'mid_size', 405, 216, true ); add_image_size( 'small_size', 64, 64, true ); } |
こうすることでFacebook、Google+などに投稿されるOGPの画像サイズが200x200pixel以上になるので正しいアイキャッチが投稿されるようになります。
スタイルシートも忘れずに変更しておく
Jetpackのほうはこれで解決なのですが、対策②の場合、サムネイルのサイズを大きくしてしまっているのでホームページのデザインが崩れているはずです。
その場合はスタイルシートで画像の縦横サイズを指定してしまえば縮小表示されるので元と同じように見えます。
例えばこんな感じでblog_thumbnailsクラスのimg要素のwidthとheightを指定してしまいます。
1 2 3 4 |
#blog_thumbnails img { width: 225px; height: 120px; } |
これにて一件落着です!
ずっとJetpackのバグだと思っていました。開発者の皆様、申し訳ありません。。。
今回の対策で完全に直ったので、同じ問題を抱えている方はぜひお試しください。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。