デザイン

1枚作ればOK!OGPの最適なサイズ設定について -SNS毎の対応不要-

ども、デザイナーやってるMJです。

早速ですが、OGPって知ってますか?
正式名称はOpen Graph Protocol(オープン・グラフ・プロトコル)といいます。

なんやそれって思う人も多いと思うんですが、簡単に言うと以下の画像みてください。

これはLINEのトーク画面なのですが、URLを送信すると「小さな画像」と「サイト名」「サイトの説明文(ディスクリプションといいます)」が表示されます。

この小さな画像をOGPといいます。

OGPはLINEだけでなく、TwitterやFacebookと言ったSNSでURLをシェアする際に表示されます。

使用される機会が多いので、ぜひ作って設置しておきたいです。
ただ、SNSによって表示方法が変わったりするので、全部に対応させるように作るのは地味に大変です。

本記事では主要のSNSを一枚で対応できるサイズでOGPを作成していきます。

この記事を読んでほしい人

  • OGPの作成サイズが分からなくて後回しにしてた人
  • 様々なSNSやメッセンジャーを1枚のOGPで最適に表示させたい人

OGPに最適なサイズについて

ずばり 縦840px × 横1200px です。

正確に言うとアートボードを「840px × 1200px」で作成して、切り取られたくない絶対に表示させたい部分を、アートボードの中心に「630px × 840px」で作るのが望ましいかなと思います。

なんでこのサイズがいいのかって理由ですが、いろいろ調べてみたところ、OGPはSNSとかメッセンジャーによって必要なサイズが変わっていきます。

とはいえ、いまやSNSとかメッセンジャーって本当にたくさんありますよね。

全部対応なんてしてられるか!ってことで

理想は1枚1サイズのOGPで、シェアされる機会が多い2019年現在流行ってるSNSとメッセンジャーに対応させられる様にしてしまうのが一番スマートでかんたんだと思います。

対応させたい主要SNSとメッセンジャー

  • Facebook
  • Twitter
  • Google+
  • はてなブックマーク
  • LINE

ここらへんは特に対応させたいので、それぞれ必要なサイズから確認していきましょう~

SNS・メッセンジャーで必要なOGPのサイズ

とりあえず全部調べてみました。

Facebook・Twitter・Google+
サイズ:630×1200

はてなブックマーク
サイズ:840×1200

LINE
サイズ:サイズの指定はないが両端が切り足られて正方形になる

 

ふむふむ、
ということは…

 

Facebook・Twitter・Google+はまったく同じサイズで、はてなブックマークだけ大きい。そんでもってLINEだけ正方形に切り取りされるわけか。

つまりここだけクリアできればOKなわけです。

様々なSNS・メッセンジャーで表示される部分を確認しながら作る

1.はてなブックマークのサイズでアートボードを作る

Photoshopをさくっと開きます!

まずは一番OGPが大きいはてなブックマークのサイズ「840px ×1200px」でアートボードを作ります。

これは何も切りとられずに全てが表示されます。

2.Facebook・Twitter・Google+で表示される範囲を確認

次に大きいのがFacebook・Twitter・Google+の「630px × 1200px」です。

上下の黒でマスクをかけてる部分は切り取られ表示されないです。

3.LINEで表示される範囲を確認

最後にLINEは両端切り落としの正方形です。

左右の両端は切り取られて表示されないです。

様々なSNS・メッセンジャーで表示される領域

というわけで、以下が様々なSNSやメッセンジャーで確実に表示される領域となります。

縦840px × 横1200px」でアウトボードを生成して、アートボードの中心630px × 横840px」に完全に表示させたいものを作るのがスマートかなと思います。

はてなブックマークを無視してもいいのならもっとかんたん!
アートボードサイズを「630px × 1200px」にして、中心「630px × 630px」の正方形の中に完全に表示させたいものを作ればOK!

OGPって設定していないとどうなるの?

もしも、OGPを設定していなかったらどうなるのか?

OGPを設定していない場合はWebページから以下の4つの要素を抜き出して表示します。

  • ページタイトル
  • ページ説明文
  • ページURL
  • ページ内画像

なんだ自動的に表示されるしいいじゃんってなるわけですが、4の画像が問題なのです。

OGPを設定していない場合は、そのページに使ってる画像を適当に抜き出して表示します。

たとえばですが、このブログ「ケーワンプラス」はOGPが設定してありません

この状態で、試しに友人にLINEでケーワンプラスを紹介してみようと思います。

あらら、良くわからない画像が貼り付けてられてますね。

これは直ぐにでも作らなければ!

OGPが設定されていないと、ページの中から適当な画像が選ばれる
ブログ記事の場合はアイキャッチがOGP設定されているので問題なく表示されるのでご安心を。

OGPを作ってサイトに設定しよう

さきほどの例に習ってOGPを作りました!

真ん中の文字は切り取られたくないので、アウトボードの中心840px × 630pxにガイドを引いて配置してあります。

さっそくケーワンプラスに当て込んでみます。

ワードプレスだとテーマにOGP設定の機能が付属してる場合も多いです。
もし付属していない場合はプラグイン「All in One SEO Pack」を使用すると簡単に設定できます。
ケーワンプラスでは使用しているテーマではOGP設定に対応してるので、そのまま設定しちゃいます。

設定が完了したら再度友人にLINEでケーワンプラスをシェアしてみます。

今度はちゃんとに画像が表示されましたね!
ケーワンプラスのロゴも切り取られずしっかりと真ん中に配置されています。やったー!

じゃあ試しに他のSNSでもシェアしてみっか!

と思いきやそんな面倒なことはしません。

OGP画像シュミレータで一括で表示確認できます!

サイトを開いて作ったOGPをドラッグ&ドロップで入れるだけなのでとってもかんたん!


引用:OGP画像シュミレータ

様々なサイズで問題なく表示できそうですね。

シュミレーターには、はてなブックマークのサイズがないですが、そもそも今回はアートボードをはてなブックマークサイズで作ってるので問題ないです。

まとめ 一枚で様々なSNS・メッセンジャーに対応できるOGPを作りました

今や数多くあるSNSやメッセンジャーに対して一枚で最適化して作る方法をご紹介しました。

今の時代、SNSやメッセンジャーがとても広く浸透しているので、SNSでのコンテンツの拡散はとても重要だと考えます。

OGPがあるかないかでサイトの印象もがらっと変わってきますので、まだ作ってない方は是非設置することをおすすめします!

ではまた~!

ABOUT ME
むらずん
むらずん
千葉生まれ東京育ちのwebクリエイターです。 趣味はバンドでビジュアル系歌います。 バイクに乗るのもいじるのも好きで休日はよく出かけます。