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の使用を宣言する必要があります。
まず初めに以下のコードを記述しましょう。
| <head prefix=”og: http://ogp.me/ns#”> |
headerタグ内のmetaタグで基本的な要素を追加する
次に、先ほど「OGPのプロパティの種類」で紹介した情報を参考に、OGPに設定する情報をmetaタグに追加しましょう。
なおコードを入力する際の基本的な形は以下です。
| <meta property=”OGPのプロパティの種類” content=”〇〇（具体的な内容）” /> |
|
OGP設定を行う上での注意点
OGP設定では、ページごとにタイトルや画像を変更することが重要です。異なるページで同じOGP設定を使用すると、OGPに表示される内容とリンク先のコンテンツが一致しない可能性があり、ユーザーに誤解を招くことになりかねません。そのため、ページごとに最適化することが必要です。
また、OGP画像のサイズはSNSの種類によって異なります。Facebookでは推奨サイズが1200×630pxで、Twitterでは1:1の比率に切り抜かれます。そこで、1200px x 630pxの画像を用意し、表示させたい内容を中央の630px x 630pxのエリアに配置するとよいでしょう。
異なるSNSプラットフォーム上での適切な表示が保証され、ユーザー体験の向上に繋がります。
OGPの設定方法：各種SNS別
OGPの設置には、先ほどご紹介した基礎設定に加え、各種SNSに対応した個別設定を行う必要があります。
Facebookでは、「fb:app_id」を設定します。
| <meta property=”fb:app_id” content=”App-ID(15文字の半角数字)”> |
※App IDとは、facebook for developers (https://developers.facebook.com/apps)で取得できる、OGPの設定やFacebook用アプリの作成に必要なIDです。
Twitterでは、「twitter:card」と「twitter:site」を設定します。
| <meta name=”twitter:card” content=”カードの種類” />
<meta name=”twitter:site” content=”@ユーザー名” /> |
twitter:cardとは
Twitter上での表示タイプを指定するタグです。
カードの種類は全部で4種類あります。
| カードの種類 | 概要 |
| summary | タイトル、説明、およびサムネイルなどを表示できるカード |
| summary_large_image | 大きな画像付きのsummary |
| app | アプリの名前や紹介文、アイコン、評価、価格などを表示できるカード |
| player | 動画やオーディオなどの各種メディアを表示できるカード |
twitter:siteとは
twitter:siteを利用する際は、コンテンツの作成者や管理者のTwitterユーザーIDを入力しましょう。
OGP画像の推奨サイズ：各種SNS別
OGP画像をSNSで使用する場合、推奨される画像サイズは各種SNSごとに異なります。
Facebookの場合
Facebookで推奨される画像サイズは「1200×630px」です。
OGP画像を長方形で大きく表示する場合
OGP画像を長方形で大きく表示する場合は、「600×315px」以上に設定しましょう。
また、解像度の高いスマートフォンのようなモバイルデバイスに推奨される画像サイズは「1200×630px以上」です。
OGP画像を正方形で小さく表示する場合
OGP画像を正方形で小さく表示する場合は、「200×200px」以上に設定しましょう。
画像が「600×315px」以下のサイズだと、ほどよく小さく表示されます。
Twitterの場合
Twitterで推奨される画像サイズは、Twitterカードの種類ごとに異なります。
Summary Card
Twitterの「Summary Card」の場合、「1:1比率の144x144px」以上、4096x4096px」以下の画像サイズを設定しましょう。なお画像フォーマットはPNG、JPG、GIF、WEBPに対応しています。
Summary Card with Large Image
Twitterの「Summary Card with Large Image」の場合、「2:1比率の300x157px以上、4096x4096px以下」の画像サイズを設定しましょう。こちらもJPG、PNG、GIF、WEBPに対応可能です。
OGP画像の作り方：OGP画像シミュレーターを活用しよう
OGP画像がSNS上で適切に表示されているかを確認するために、OGP画像シミュレーターを活用しましょう。
OGP画像シミュレーターとは、各種SNSのOGP画像表示をシミュレートできるツールです。
画像サイズや表示色、タイトルや説明文などできるだけ各SNSの仕様に沿った表示で確認することができます。
【Webサイト｜OGP画像シミュレーター】
各種SNSに特化したOGPの表示確認ツール
ここでは、各種SNSに特化したOGPの表示確認ツールについて解説します。
Facebookシェアデバッカー
Facebook上で確認したいページのURLを入力すれば、OGPの表示を確認できます。
なおシェアデバッカーを使用する際は、Facebookへのログインが必要です。
【公式サイト｜https://developers.facebook.com/tools/debug/?locale=ja_JP】
TwitterCardValidator
「Card URL」に確認したいページURLを入力すると、Twitterカードの表示が確認できます。
なおシェアデバッカー同様、使用時はTwitterへのログインが必要です。
【公式サイト｜https://cards-dev.twitter.com/validator】
ラッコツールズ・OGP確認
ラッコツールズ・OGP確認でも各種SNSでのOGPの見え方が確認できます。
なお確認できるSNSには、FacebookやTwitter、はてなブックマーク、LINEなどがあります。
【公式サイト｜https://rakko.tools/tools/9/】
OGP画像を設定したWebサイト制作でSNSでの拡散・集客を目指そう！
このページでは、OGP画像に焦点を当て、その概要やメリット、種類、設置方法、最適な画像サイズ、画像シュミレーターについて、役立つツールなどについて解説しました。
近年、SNSのユーザーが急増しています。
そのため、SNSを活用したコンテンツの拡散は、マーケティングで非常に重要な要素と言えるでしょう。
OGP設定と画像サイズを最適化させれば、SNS上のタイムラインでユーザーの興味・関心を触発し、ページへの流入率向上に繋がりやすいです。記事の投稿時は、各種SNSでOGPがユーザーにどのように見えているかを意識しながら、集客強化を実施しましょう。
弊社はOGP画像やSEOに関しての知識やノウハウが豊富です。株式会社ipeではSEOでの大手クライアント実績も多数ありますのでSEOを検討する際にはぜひ一度ご相談ください。
SEOに関するご相談があれば、ぜひipe（アイプ）へご相談ください。
