OGPとは？画像サイズの設定方法や確認するツールを紹介します。

OGPとは、「Open Graph Protocol」の略で、主にWebサイトのコンテンツをSNSで伝える際に使用する仕組みです。OGP画像は、OGPに設定される画像のことです。今回はOGPに焦点を当て、その概要やメリット、種類、設置方法、最適な画像サイズ、画像シュミレーターについて、役立つツールなどをご紹介します。気になるポイントを一挙確認しましょう。

OGPとは？

（引用：img_01.jpg）

OGPとは、「Open Graph Protocol」の略で、主にWebサイトのコンテンツをSNSで伝える際に使用する仕組みです。OGP画像は、OGPに設定される画像のことです。

たとえば、SNSで自社で制作した記事をシェアする際、その記事のURLやタイトル、ディスクリプション、サムネイルを1つのボックスとして表示できます。

OGPを設定するメリット

OGPを設定すると、ユーザーが記事をシェアする際、Webページのコンテンツに沿ったタイトルやディスクリプション、イメージ画像が表示されます。

そのため、記事に関してユーザーに興味・関心を持ってもらいやすく、ページへの流入率向上が期待できます。

OGPのプロパティの種類

ここでは、OGPのプロパティの種類について解説します。

OGPを設定する際は、必要に応じて以下のプロパティを入力する必要があります。

プロパティの種類	概要
og:url	ページのURLを設定する場合
og:title	ページのタイトルを設定する場合
og:image	画像URLを設定する場合
og:description	ページのディスクリプションを設定する場合
og:type	ページの種類を設定する場合 ※typeの詳細はThe Open Graph protocolをご確認ください。

OGPの設置方法

ここでは、OGPの設置方法について解説します。

headタグにprefix属性を追加：OGPの使用を宣言

headタグ内にOGP情報を記述する前に、必ずOGPの使用を宣言する必要があります。

まず初めに以下のコードを記述しましょう。

headerタグ内のmetaタグで基本的な要素を追加する

次に、先ほど「OGPのプロパティの種類」で紹介した情報を参考に、OGPに設定する情報をmetaタグに追加しましょう。

なおコードを入力する際の基本的な形は以下です。

<meta property=”og:url” content=”https://ipeinc.jp/” />
<meta property=”og:title” content=”株式会社ipe” />
<meta property=”og:image” content=”img_top.png” />
<meta property=”og:description” content=”株式会社ipeの公式ホームページです。” />
<meta property=”og:type” content=”website” />
<meta property=”og:site name” content=”株式会社ipe” />

OGP設定を行う上での注意点

OGP設定では、ページごとにタイトルや画像を変更することが重要です。異なるページで同じOGP設定を使用すると、OGPに表示される内容とリンク先のコンテンツが一致しない可能性があり、ユーザーに誤解を招くことになりかねません。そのため、ページごとに最適化することが必要です。

また、OGP画像のサイズはSNSの種類によって異なります。Facebookでは推奨サイズが1200×630pxで、Twitterでは1:1の比率に切り抜かれます。そこで、1200px x 630pxの画像を用意し、表示させたい内容を中央の630px x 630pxのエリアに配置するとよいでしょう。
異なるSNSプラットフォーム上での適切な表示が保証され、ユーザー体験の向上に繋がります。

OGPの設定方法：各種SNS別

OGPの設置には、先ほどご紹介した基礎設定に加え、各種SNSに対応した個別設定を行う必要があります。

Facebook

Facebookでは、「fb:app_id」を設定します。

※App IDとは、facebook for developers (https://developers.facebook.com/apps)で取得できる、OGPの設定やFacebook用アプリの作成に必要なIDです。

Twitter

Twitterでは、「twitter:card」と「twitter:site」を設定します。

twitter:cardとは

Twitter上での表示タイプを指定するタグです。

カードの種類は全部で4種類あります。

カードの種類	概要
summary	タイトル、説明、およびサムネイルなどを表示できるカード
summary_large_image	大きな画像付きのsummary
app	アプリの名前や紹介文、アイコン、評価、価格などを表示できるカード
player	動画やオーディオなどの各種メディアを表示できるカード