新規にブログを立ち上げるときや、Webサービスをリリースするときに当たり前といって良いほど設定するのが、OGPですね。

OGP(Open Graph Protocol)とは
OGP(Open Graph Protocol)とは、ひとことで言うならば「リンク先のウェブページの内容を紹介するための仕様」のことです。もともとfacebookが提唱した規格ですが、mixiやはてなブックマーク、GREEなどでも利用されています。

ということで、SNSでシェアされたりした時に表示されるあれですね。

FacebookやTwitter(Twitter Card), はてなブックマークと共有するサービスがたくさんありますが、どんな内容を表示するかはある程度こちらで決めたいですよね。

それを解決する(設定する)のがOGP(Open Graph Protocol)ってことになります。

その中で扱いがめんどくさいのが、画像だと思います。

まあブログでしたら、記事に使われている画像を設定しちゃえばよろしいかと思うのですが、ブログのトップページなり、Webサービスなりを共有されたときに一目でわかる画像を表示したいという願望があると思います。

現に僕はFacebookで共有、シェアされたページはタイトルと画像くらいしか確認しません。

そこで興味を持ったら、説明文を読んで、記事をクリックして詳細を読むという流れになるのが一般的だと思います。

はい、前置きが長くなってしまいましたが、その画像を簡単にシュミレーションできるサービスがあったのでご紹介します。

OGP画像シミュレータ | og:image Simulator

ScreenShot09

OGP画像シミュレータ | og:image Simulator

はい、これ素晴らしいです。

こういうのをさらりと作れる人間になりたいです。

使い方

表示させたい(OGPに設定したい)画像をドラッグ&ドロップするか右側のファイルを選択というボタンを押して画像を選択するだけです。

そうするとこんな感じになります。

これで表示のされ方が網羅できます。

また、どのサイズでもうまく表示したいとなれば修正して再アップロードを繰り返して最適化できればよろしいかと思います。

ちなみに最適なサイズは1200 x 630で比率は1.91:1らしいです。

以上になります。

Web

「Web」のおすすめ記事