OGPとはどんなもの?その意味と設定方法、確認方法、画像サイズについて

更新日:

OGPとはどんなもの?その意味と設定方法、確認方法、画像サイズについて

OGPとは何かご存知ですか。
個人でもビジネスでもSNSを利用して情報配信や拡散、知名度アップや集客や販促につなげたいならOGPの設定がおすすめです。
この記事ではOGPとはどんなものか、その意味と作成方法や設定方法、確認方法、画像サイズなどについて説明していきます。

OGPとは何か詳しく解説|どんなことができるのか

OGPはOpen Graph Protocolの頭文字を取ったもので、TwitterやFacebookなどのSNSでWebサイトのURLやブログの記事がシェアされた際に、そのページのタイトル、URL、概要、画像を表示させる仕組みです。
OGPを設定していない状態で、SNSでサイトをシェアすると、自動で情報が表示されていまい、意図しない画像や文章が表示されてしまうことがあります。
OGPをあらかじめ設定しておけば、SNSでシェアされた際に設定しておいたタイトルや画像、説明文などが表示されます。
ページ作成者の意図通りに、内容をわかりやすくユーザーに伝えることができ、正確な情報を伝えやすくなることや興味を持ってもらいやすくなるのがメリットです。

OGPの確認方法を解説

OGPを設定しても、意図した設定通りに表示されるか、確認しておくのがベストです。
なぜかというと、OGP画像サイズや比率のミスなどで、きちんと表示されないことがあるためです。
OGPの確認方法は公開されている、SNSごとのOGP画像シミュレーションサイトを利用しましょう。

FacebookのOGP画像シミュレーション

Facebookのタイムラインで、設定したOGP画像がどのように表示されるかをチェックできます。
画像の比率が間違っていると、画像が切れたり、逆に伸びてしまったりと不具合が生じます。
画像の見え方がおかしい場合には、設定方法を修正しましょう。

TwitterのOGP画像シミュレーション

TwitterでどのようにOGPが表示されるかをシミュレーションするには、Twitter Card Validatorというサイトで確認してみましょう。
WebサイトのURLに表示したいCard URLを入力すると、Card Reviewにシミュレーション画像が表示されます。

OGPの設定・作成方法について

OGPを設定すれば、SNSでシェアされたページについて、タイトルや本文、画像、URLなどの情報を意図通りに表示させることができます。
OGPの設定・作成方法はmetaタグを、基本のHTMLソースコードの中に記述することです。
以下で、基本となる共通設定項目を案内しますので、作成方法を見ていきましょう。

<head prefix=”og: http://OGP.me/ns# fb: http://OGP.me/ns/ fb# prefix属性: http://OGP.me/ns/ prefix属性#”>

最初に、OGPを使用すると宣言するタグの設定が必要です。
head要素にprefix属性を追加してください。
TOPページなら「website」、TOP以外のページの場合は「article」を入力しましょう。

<meta property=”og:url” content=” ページの URL” />

OGPを設定するWebページのURLを指定してください。

<meta property=”og:type” content=” ページの種類” />

ページの種類を指定することが必要です。
種類の設定によって、SNSでの表示形式が変わってくるので注意しましょう。
TOPページなら「website」、記事ページなどTOPページ以外では「article」を指定するのが基本です。

<meta property=”og:title” content=” ページの タイトル” />

ページのtitleを指定しましょう。
20文字以内で、サイト名は含めない内容を設定してください。
サイト名は、下記のサイト名で設定します。

<meta property=”og:description” content=” ページのディスクリプション” />

どんなページなのか、閲覧者に簡単に理解できるよう、わかりやすく説明文を設定しましょう。
文字数は80文字~90文字がおすすめです。
これより長くなると、表示された際に文字が切れてしまうおそれがあります。

<meta property=”og:site_name” content=”サイト名” />

ページのサイト名を入れましょう。

<meta property=”og:image” content=” サムネイル画像の URL” />

SNSでシェアされた際に表示させたい画像を指定します。
SNSによってキレイに表示される画像サイズが異なりますので、気を付けましょう。

TwitterやFacebookでシェアする際の設定方法

OGPを設定していないと、TwitterやFacebookなどの各SNSが自動的に説明文や画像を表示してしまいます。
自分が意図するものと違う表示がなされてしまうと、ページ内容がユーザーに正しく伝わらなくなるおそれがあります。
そのため、正しい情報や伝えたい情報をOGPとして設定しておきましょう。
わかりやすい情報が表示されれば、どんどんシェアされてより多くの人に記事を見てもらうことができ、シェアによって得たいマーケティング効果が高まるなどのメリットが生まれます。

Twitterでシェアする際の設定方法

Twitterでは基本設定に加えて、「Twitte:card」と「twitter:site」の設定が必要です。
「Twitte:card」とはTwitterカードのことで、Twitter上での表示タイプを指定するタグです。
カードの種類はブログやWebサイト用、アプリ配布用App Card、動画サイト用Player Cardから選択でき、見せ方が変わってくるので注意しましょう。
「twitter:site」はユーザー名のことを指し、@から始まる各自のTwitterのアカウント名を入力してください。

TwitterのOGP画像のサイズ

TwitterのOGP画像のサイズは、Twitterカードで選んだ種類によって変わります。
Webサイトやブログ記事のOGP画像表示としては、Summary Cardか、画像サイズが大きく表示できるSummary with Large Imageを選びましょう。
画像フォーマットは、いずれを選んでもJPG・PNG・WEBP・GIFに対応しています。
Summary Cardを選択した場合、画像サイズは1:1の比率の144×144px以上、4096×4096px以下となります。
画像サイズが合っていないと、表示が乱れるおそれがあるので注意しましょう。
Summary Card with Large Imageはより大きく表示でき、2:1の比率の300×157px以上、4096×4096px以下の画像サイズの設定が可能です。

Facebookでシェアする際の設定方法

Facebookでシェアする際の設定方法は、基本設定にプラスして「fb:app_id」を設定しましょう。
「fb:app_id」はアプリ IDのことで、サイトやブログの管理者をFacebookに伝えるためのタグです。
このタグを設定しておくと、「いいね!」の数や、どれくらいの人が見てくれたか、どの時間帯がユーザーの目に留まりやすいかなどのトラフィック分析ができるFacebookインサイトが利用できるようになるメリットがあります。
なお、画像サイズは1200×630p、比率でいうと1.91:1が推奨されています。

OGP設定をする際に気を付けるべきポイントとは

OGP設定をする際に気を付けるべきポイントは、1ページごとに設定を怠らないことです。
面倒な作業に思えますが、どんな内容の記事なのかを正確に伝える目的があるため、1ページごとに、それに適した説明文や画像を選択して設定しなくてはなりません。

まとめ

OGPとはTwitterやFacebookなどのSNSでWebサイトのページやブログの記事などがシェアされた際に、その記事内容を閲覧しているユーザーに対して一目でわかりやすく説明する表示です。
タイトルや簡単な説明文、記事を印象づける画像を表示させることができます。
この記事はこういった内容だということを、簡単な説明と画像で視覚的にわかりやすく表示することで、記事を見たいと思う人が増える場合やSNSでの拡散効果が高まります。
SNSで知名度を上げたい人をはじめ、集客や販促につなげたいビジネス目的として、Webサイトやブログ記事の1つずつにOGP設定をしておきましょう。

 

      その他の関連する記事

        このページには広告が含まれます

        リード情報をお求めの企業様へ
        STRATE[ストラテ]に貴社サービスを掲載しませんか?

        まずは無料で掲載