OGP画像のデザインや設定をするときのポイント

SNSでシェアした際に表示されるOGP画像。

適切な情報や画像が表示されるよう、Webサイトを制作した際に、デザインや設定を行います。

今日はそんなOGP画像をデザインする際のちょっとした注意点とその理由を解説していこうと思います。

結論としては「画像サイズ」と「必要な要素は真ん中に配置」というだけのシンプルなお話です。

そもそもOGPとは

OGPとは「Open Graph Protocol (オープン・グラフ・プロトコル)」の略で、SNSでシェアした際に表示させる情報のこと。

OGPを適切に設定してあれば、ブログのURLを貼るだけで、そのサムネイル画像、タイトルと記事の要約が表示され、SNSのタイムラインで見かけたときに、目に止まりやすくなったり気をひくことができます。

みなさんfacebookやtwitterで見かけたことがあると思いますが、例えばこんなものです。

ちなみにこんなふうに記述して指定します。

ポイント1：OGP画像のサイズ

SNSの種類や使用する画像のサイズ、指定方法等によってOGP画像の表示サイズは異なります。

すごくざっくりいうと、横長で表示される場合と正方形で表示される場合があります。

例を挙げてみましょう。

facebook

facebookの場合は、アップする画像サイズで自動的に振り分けられます。

»Meta for Developers

twitter

twitterのOGPは大小2種類のタイプがあります。Twitter Cardと呼称します。

»Twitter Developer Platform

各SNS共通推奨サイズ

これらをふまえた結論として、「1200px ✕ 630px」で制作しておけば、主要SNSのOGP画像としては網羅できます。

ポイント2：文字は中央に、正方形におさまるように配置しよう

横長で表示される場合と正方形で表示される場合がある、ということは、正方形のなかに文字が収まるようにデザインしておかないと、見切れてしまう場合があるということ。

悪い例

とにかく目立たせよう！とロゴやコピーを大きくした結果。画面右側、正方形の小さいサムネイルの場合、ロゴやコピーが見切れてしまっています。
目立つことは目立つかもしれませんが..

良い例

画面右側、正方形の小さいサムネイルの場合でも見きれないようになっています。
仮にロゴや文字はなく写真やイラストのみだったとしても、両端が見切れても問題ないものにしましょう。

OGP画像をデザインしたらシミュレーターでチェック・確認しよう

下記などのシミュレーターサービスを利用して、問題ないかどうか確認、チェックしてみましょう。

ラッコツールズ OGP確認
https://rakko.tools/tools/9/

Web ToolBox OGP画像シミュレーター
https://web-toolbox.dev/tools/ogp-image-simulator

OGP情報をあとから変えたい場合

facebookやtwitterは、一度OGP情報を取得すると、キャッシュデータとして保存します。そのため、情報取得後にWebサイト上のOGP情報を更新しても、なかなか情報が更新されません。

ある程度時間が経つと新しい情報に更新されますが、すぐに更新したい場合は、両社がそれぞれ提供している下記ページから強制的にOGP情報の再読み込みを行うと最新の情報にアップデートすることができます。

facebook シェアデバッガー
https://developers.facebook.com/tools/debug/?locale=ja_JP

Twitter Card Validator
https://cards-dev.twitter.com/validator

いかがでしたか？

冒頭に書いたとおりOGP画像のデザインをする際は、画像サイズを把握し、必要な要素は真ん中に配置しましょう、という解説記事でした。

あわせて、シミュレーターやキャッシュクリアをするための方法もお伝えさせていただきましたので、必要に応じてご活用ください。

さて、この記事のOGP画像はきちんと設定できているかな？

よかったらSNSでシェアしてみてくださいね！笑