自分の書いたブログや記事をFacebookでシェアしようとしたら、ページのメインの写真ではない写真がサムネイル表示されたことはありませんか。
僕もサムネイルでどの画像が表示されるのかわからず、運任せみたいな部分があったのですが、人様を載せた記事ではそういうわけにもいかないので困っていたのです。
それで少し調べて対処したら解決したので、ご参考までに載せておきます。
サムネイル画像の結論
結論を先に書きます。
シェアされたい画像には、横:1200px 縦:630px 以上のサイズを使用すること。
「以下」じゃないです、「以上」です。
つまり高解像度の写真を使う必要があるということです。
あと、あくまで1200は「横」で、縦長の写真の「縦」が1200あってもダメなようです。
経緯
シェアする、シェアされるときに、ページのメイン写真が表示されてほしいのは当然の心理ですね。
でもなぜか違う画像、今回の場合はサイトのカバー写真(図書館)が表示される。
これでは興ざめですし、カバー写真では記事を読む気も起きないでしょう。
WordPressではこのような場合の対処方法が見つかりますが、当サイトは「簡単」を謳う某サイト管理サービスを利用して作成しているため、普段HTMLを意識することはありません。
HTMLは多少は知ってはいますが、少し調べてもやり方がわからなかったので、管理サービスに問い合わせてみました。
管理サービスへの問い合わせ内容
管理サービスからの回答
FacebookなどのSNSにシェアしたときに表示される画像は、シェアしたページ内から選択されます。
選択される画像は、横:1200px 縦:630px 以上のサイズであることが条件となります。
こちらにつきましては、シェアしたときに表示される画像がきれいに表示されるために設定されている条件となります。
なお、条件を満たした画像がページ上にない場合は、背景画像が選択されるようになっております。
大変恐れ入りますが、ご利用いただく画像のサイズをご確認の上、アップロードを行っていただければ幸いです。
対処内容
この回答では、これから作るページは高解像度を使えばいいとわかりますが、すでにシェアされたページについてはどうしたらいいのかよくわかりません。
他の人がシェアしていたら、こちらでシェアし直すということはできませんしね。
そのため、どうしたら相手の投稿の写真が変わるのか試行錯誤したわけです。
結果的に、次の手順でうまくいきました。
1)高解像度写真をアップロードする。
2)サイトを表示してソースを表示する。
3) <img srcset>タグに記載されている画像のURLを確認する。
4)その URLを<og:image> タグに埋め込んで管理画面の「ヘッダー編集」で設定する。
5)Facebookデバッガーで「もう一度スクレイビング」を実行する。
こうすると、デバッガーの「プレビュー」の画像が入れ替わり、Facebookでリンクをシェアすると画像が変わっていました。
自分で新たにシェアする場合だけでなく、シェア済みの画像もちゃんと変わっていました。
まだ不明な点
・上記手順の1)だけではだめなのか?(結果オーライなので、やってない)
・これはこの管理サービスだけの仕様か?
・条件を満たす写真が複数あった場合はどれが選択されるのか?
知っている方は教えてください。
また、何かわかったら追記します。
【追記】
2018-03-19追記
管理サービスに追加で問い合わせた結果、
・画像サイズの条件については(Facebook側ではなく)管理サービス側の仕様である。
・今後、SNS側の仕様変更等で条件が変わることもある。
・条件を満たす画像が複数ある場合、基本的にページの一番上から優先して画像をピックアップする。
※カラム内に画像がある場合はピックアップされない。
・ヘッダー編集内のタグについてはサポート対象外
とのことでした。
簡易実験用
以下のページをFacebookでシェアしてみると違いが分かります。
1)低解像度写真(横1000 x縦 750 )を使ったページ
https://iokazakim.net/my-life/work/test0314-A/
これをシェアすると、バラではなくカバー写真(図書館)が表示されると思います。
解像度は横1000 x縦 750 で、横が「1200以上」という条件を満たしていません。
2)高解像度写真を使ったページ(横2016 x縦 1512 )
https://iokazakim.net/my-life/work/test0314-B/
これをシェアすると、バラが表示されると思います。
解像度は横2016 x縦 1512 で、条件を満たしています。
コメントをお書きください