こんにちは。
ディレクターのMです。
Webサイト制作は、サイトの見た目を作る他に、細かい設定をしていくことで、よりクオリティを上げていくことができます。
今回はSNS上で多くの方にサイトを目にしてもらうために大切なOGP設定について解説します。
目次
OGPとは？
OGPとはOpen Graph Protocolを略したもので、TwitterやFacebookなどのSNSで伝える際にタイトルや画像、サイトの説明文を表示してくれる機能を指します。
例えば、SNSでWebの記事をシェアしたときに、その記事のURLとタイトル、簡単な内容やサムネイル画像がボックスにまとめられて表示されるのを見たことはないでしょうか。OGPはこのボックス内のタイトルは何を表示するか、URLは何か、画像は何か、といった部分を設定するために使うものです。
※こちらが実際のOGP
OGPの重要性
OGP設定をしていなかった場合、TwitterやFacebookなどのSNS側が自動的に説明文や画像を表示してしまい、ページ内容がユーザーに正しく伝わらなくなってしまいます。
適切に設定することで、どのようなページで何を伝えたいのかが明確になり、より多くのユーザーをWebサイトへ誘導したり、SNS上で拡散されるなどの効果が期待できます。
まとめると以下の3つがOGP設定することで得られる大きなメリットとなります。
- SNS上で目立つ・気づかれやすくなる
- サイトの拡散・シェアが期待できる
- シェアされたサイトが魅力的に見える
OGP画像の設定方法
OGPを設定する上で最も重要なのがOGP画像の作成です。
なぜならSNSで投稿、シェアされた際に一番目立つのがこのOGP画像だからです。
設定の上で大事になるのが「サイズ」と「デザイン」です。
せっかく設定しても、意図せぬ表示になってしまっては全く効果が発揮されません。
ここでは適切なサイズと、おすすめのデザインについてご紹介します。
サイズ
SNSなどによって推奨サイズが異なりますが、結論から言うと縦630px × 横1200pxのサイズで正方形にトリミングされても問題がないデザインで作成するのがおすすめです。
FacebookとTwitterの両方できれいに表示される画像サイズは縦630px × 横1200pxとなります。
ただ、LINEや、Twitterの「Summary Card」を使用している場合はOGP画像は正方形の表示になります。
長方形の画像を設定した場合には左右が切り取られて正方形で表示されます。
ですので、縦630px×横1200pxのサイズで正方形にトリミングされても問題がないデザインにしておくことで、1枚の画像で様々なデバイスでの表示に対応することができるのです。
もちろん各デバイスに対応したOGP画像をそれぞれ用意して設定することも可能ですが、かなり厳密にデザインを意識することがない限りは、
上記のサイズで作成するのが一番効率的かつ効果的であると思います。
デザイン
OGP画像の一番の目的としては、そのサイトがどんなサイトなのかを伝えることです。
それに適したデザインパターンを3つご紹介いたします。
①ロゴ＋白背景
コーポレートサイトなどのOGP画像の設定におすすめです。
シンプルに企業名を訴求することができるとともに、クリーンで爽やかな印象を与えることができます。
②ロゴ＋ビジュアル
サービスサイト、キャンペーンサイト、LPなどにおすすめです。
商品やサービス名などを追加したOGP画像にすることで、リンク先に飛ぶ前からどんな商品・サービスなのかを視覚的に訴求できます。
③サイトのメインビジュアル
メインビジュアルをOGP画像に設定することで、URLの時点でWebサイトのビジュアルを覚えてもらえるというメリットがあります。
デザイン性に特化したサイトや、メインビジュアルにインパクトのあるサイトはかなり印象に残りやすいです。
★OGP画像のチェックツールのご紹介
OGP画像がどのように表示されるかシミュレーションできるページもありますので、OGP画像を設定する前に確認したい！という方は使ってみてください。
作成した画像をドラッグ&ドロップするだけで様々なデバイスでの見え方を確認することができます。横長の画像を設定しても中央の縦630px×横630pxの範囲内に必要な情報を収めることによって、複数のデバイスに対応したOGP画像が作成できます！
まとめ
いかがでしたでしょうか。
OGP設定の重要性とOGP画像の作り方についてご紹介させていただきました。
OGP画像を適切に設定することで、作成したページの内容をユーザーに正しく、詳しく知ってもらうことができるようになります。
さらに、SNSで人の目に止まりやすくなれば、より一層拡散され人の興味を引くことに繋がります。
SNSからのWebサイトへの集客に少しでもお役立ていただければ幸いです。
