お疲れ様です。

SNSなどをシェアしたりすると、サムネイルとして表示される画像のことをOGP画像と言います。

少し前まで、勝手に画像が付いてくるものだと思っていました.....

エンジニアになって、OGPの設定をすることがあったので、
忘れないように備忘録としてQiitaを書いておきたいと思います。
最後に便利なツールもまとめておきますので、よろしければご活用ください。

また、この記事を読んでアドバイス等ありましたら
是非コメントをよろしくお願いいたします。

そもそもOGP画像とは？

ちなみにOGPとは、”Open Graph Protocol”の略です。
プロコトルと付いているのでお約束事ってことですね！！
「OGP画像」とか「ogpイメージ」と呼ばれることが多いです。

WEBページをシェアしたときに表示される画像は、Webサイトであらかじめ設定する必要があります。
OGPという仕組みによってWebページとSNSが連携しているということなんですね。

OGP画像の重要性

×デメリット
・FaceBook側が自動的に説明文や画像を表示してしまう。

◯メリット
・どのようなページなのかを伝えることができ、ユーザーの訴求率が高まる
・より多くの人にWebページを見てもらえる。

サムネイル画像の表示される方がユーザーの目に留まりやすくなり、
Webサイトに飛んでもらえる確率がUPするので、とても大切ですね！

OGP設定方法

基本的にはmetaタグをHTMLのheader要素に記述することで設定ができます。
WEBサイト・FaceBook・Twitterの３つを設定する必要があります。

/* 共通 */
<meta property="og:url" content="サイトのURL" /> 
<meta property="og:title" content="サイトのタイトル" /> 
<meta property="og:image" content="画像のURL" /> 
<meta property="og:description" content="サイトのディスクリプション" /> 

/* twitter　　*/
<meta name="twitter:card" content="カード種類" /> 
<meta name="twitter:site" content="@ユーザー名" /> 

/* FaceBook */
<meta property="fb:app_id" content="AppID" />

POINT

■ カードの種類

summary　(小)　/ summary_large_image（大）　のどちらかを設定します。
サムネイルの大きさを選ぶことができます。

■ ＠ユーザー名

＠から始まるアカウント名を入れます。

■ AppID

Facebook上でOGP画像を表示させる場合は、必ずfb:app_idを記載します。
idの発行に付いては下記の記事をご覧下さい。
https://design-plus1.com/tcd-w/2018/01/facebook_app_id.html

使用する画像はどんなものが良いか？

①真ん中に被写体がきている画像
②文字を入れる場合は大きめに

デバイスによっては、横長の画像が正方形で表示される場合があります。
正方形の場合は左右が切り落とされる感じになるので、中心に被写体があるとGOODです。

画像

1200 × 630 (1：1.91)が推奨されています。
比率を守って入れば大丈夫ですが、スマホの表示の際に画質が悪くなる可能性があるので上記のサイズをオススメします。
画像はできる限り大きいほうが良いですね。なお、拡張子は.pngが推奨されています。
.jpgも問題なければ良いかと個人的に思っています。

シュミレーター

作成した画像を確認することができます。
http://ogimage.tsmallfield.com/

注意点

OGP画像を更新した際に、注意すべき点があります。
それは、キャッシュです。

WEBサイトの情報をあらかじめ取得して保存をしています。
あらかじめ保存（キャッシュ）することで、多くのユーザーにシェアされたときにその記事を繰り返し取得する必要がなくなります。
しかし、あらかじめ取得し保存したことで変更がされない場合があります。
そんな時は、OGP情報を更新しましょう。
下記のページにキャッシュをクリアしたいサイトのURLを入れるとクリアすることができます。

Twitter

FaceBook

雑談

instagramやLINEは、手動でクリアすることができず三日ほどかかりました....とほほ

まとめ

OGP設定を行うことで、人の目にふれる機会が多くなります。
どんな画像や文章ならクリックしてもらえるのだろうか？興味を持ってもらえるのだろうか？
と考えながら正しく作成することが大切だと感じました。