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