Help us understand the problem. What is going on with this article?

OGP画像を設定してみよう!

More than 1 year has passed since last update.

お疲れ様です。

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の3つを設定する必要があります。

/* 共通 */
<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

https://cards-dev.twitter.com/validator

FaceBook

https://developers.facebook.com/tools/debug/og/object/

雑談

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

まとめ

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

marietty
お疲れ様です。 201709〜PC購入、プログラミング勉強スタート 201804〜 Webのお仕事(フロントエンドエンジニア)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした