【SEO】ブログのサムネイルやSNSのOGP画像に最適な縦横アスペクト比・推奨サイズ
ブログ記事の一覧や冒頭にあるアイキャッチ画像・サムネイルはとても重要なものです。
アイキャッチという名の通り、視線をキャッチして引き付ける、いわば雑誌の表紙などと同様にそのメディアの顔のようなもの。
そして、SNS上でのアイキャッチ画像ともいえるリンクカード等になるのがOGPの設定です。
OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのhtml要素です。
▼例えばTwitterではこういったOGP画像がリンクカードとして表示されます。
はてなブログや多くのWordpressテーマなどではアイキャッチ画像を設定すれば自動でOGPとして認識してくれるので、SNSの拡散に強力な助けとなります。
そこで今回気になったのが大手SNSのOGPに最適とされる画像の縦横比は何対何がベストなのか。
今回はOGPに設定すべき画像の縦横の比率(アスペクト比)について調査してみたので、記したいと思います。
是非ご参考頂ければ幸いです。
Facebook、Twitterに最適なサムネイル縦横比は1対1.91
2020年12月現在、縦1×横1.91が現在FacebookとTwitterで採用されている共通のアスペクト比となっているようです。
各SNS、サービスでのOGP推奨サイズ、最適サイズ
上記のように横幅1200px以上を目安として正方形により近いのがはてなブログのOGPになっています。
各サービスOGP推奨サイズの中で正方形への切り抜きも想定しておく
推奨されるアスペクト比を保っていても、画像のサイズが小さかったり、見ている側の端末によって画像が切り抜かれて表示される場合があります。
LINEでは正方形、Facebookでも推奨以下のサイズの場合は正方形にトリミングされるようです。
▼左下と中央の画像以外は正方形に切り抜かれて両端の文字が見切れてしまっています。
▼改行や文字サイズを調整して正方形でも情報が収まるよう調整した例です。
FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。そんな時に便利なのがこのOGP画像シミュレータ。
このように正方形に切り取られても問題ないように、重要な文字情報などは正方形内に収まるよう、改行や文字サイズなど工夫して配置しておくとよいでしょう。
はてなブログの最適サイズがより正方形に近いので、正方形切り抜きも想定したサムネイルを作成しておけば、Facebook/Twitterは勿論、はてなブログの最適サイズにも対応できると思います。
サイトイメージに合わせてSNSに最適なアイキャッチ、OGP画像を設定するべし
この記事以前の当ブログのアイキャッチなど見て頂くとよく分かると思いますが、縦横比だけでなく色々とバラバラな統一性のないサムネイルになっています。
記事冒頭でも述べている通り、サムネイルやOGPはサイトの顔ともいえる部分。
その顔の重要な部分が切り取られてしまわぬよう注意しつつ、サイトのイメージというものも意識してアイキャッチを作成していきたいですね。
▼統一感のあるサイトのイメージなどパラパラと眺めるだけでも参考になります
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
とはいえ当ブログにおいては、どこまでいってもイメージより中身が大事な技術系ブログなので、硬派かつシンプルなサムネイルでいこうと思います。
最後までお読みいただきありがとうございました！
SNS『Twitter』や『Facebook』でウェブサイトのリンク（URL）を共有した際に、読み込まれる画像サイズのアスペクト比が「1.91：1」に統一されました。 OGPに画像を設定する場合、この「1.91：1」サイズにしておくとTwitterとFacebookの両方でキレイな画像をユーザーに見せることができます。2019/02/10
UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計
