よく聞く「OGP」とは？ざっくり説明します
OGPで設定した画像の見え方
冒頭の画像は、640×360pxの画像をOGPに設定した場合に、Twitter・Facebookではどんなサイズで表示されるかをまとめたものです。
- オリジナル…640×360px
- Twitter…600×314px
- Facebook…476×248px
やはり元画像をそのままではなく、小さく最適化された画像が使われているようですね。さらに、縦横比も微妙に異なっています。
- オリジナル…16:9
- Twitter…1.911:1
- Facebook…1.919:1
この3種類の画像のタテの長さを同じにしてみるとこうなります。ヨコに長くなるんですね。
どうやらタテがトリミングされてるっぽい
ただヨコに長くなっているわけではなく、どうやらタテがいくつか削られているようですね。
16:9の元画像を1.91:1にするときに、この赤部分くらい上下がカットされているみたいでした。なんとなく上下に余白をもって画像制作をすればよさげになるっぽいです。
具体的にどれくらいのサイズで作ればいいの
シェアされるときにOGPで表示されることを踏まえると、タテヨコ比率は「1.91:1」ということはわかりましたが、具体的な数値も知りたいところ。
OGPについて、FacebookとTwitterはそれぞれこんなページを用意していました。
Best Practices - Sharing - Documentation - Facebook for Developers
The Facebook Crawler fetches content from your site and generates a preview for people on Facebook. When someone shares a URL on Facebook and Likes or Recommends a page on your site using a plugin, it activates the Facebook Crawler. If your content is publicly available, we should have no problem accessing it.
Summary with large image
The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website. The Tweet below shows a Summary Card with Large Image along with the text of the Tweet: Happy 3rd anniversary #TBT!
この辺を見ると、画像サイズについては
とのことです。
どこまで対応できるかを考えて、ベストな方を参考にしてもらえたらと思います。
そして、あまり触れませんでしたが、FacebookのOGP画像、ちょっとだけ色味がビビッドになってますね。SNSのシステムで、自動的に処理がなされてるんだと思うのですが、そういう発見ができて、今回よかったです。
- Facebook「1,200×630px以上の画像を用意して」
- Twitter「300×157px以上、4,096×4,096以下ならOK」
とのことです。
ベストプラクティス
さて、これまでのOGPの画像の比率やサイズから、ベストプラクティスが導かれます。それは…
1,204×630pxで作れば、TwitterでもFacebookでもきれいに表示されてOK！念のため、画像の上下には適当に余白を設けておくとよい。というところでしょうか。 もう少し柔らかくすると
1.91:1の比率にして、ヨコの長さは1,200px以上でも良いように思います。
どこまで対応できるかを考えて、ベストな方を参考にしてもらえたらと思います。
さいごに
OGPの画像サイズについては、記事がたくさんあるので、この記事以外にもいろいろ見てみるのも良いかもしれません。そして、あまり触れませんでしたが、FacebookのOGP画像、ちょっとだけ色味がビビッドになってますね。SNSのシステムで、自動的に処理がなされてるんだと思うのですが、そういう発見ができて、今回よかったです。
