Powerd by ipe
テジタルマーケティングで戦略的に
ビジネスを成功させる

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

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

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=”〇〇(具体的な内容)” />
  • <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」を設定します。

<meta property=”fb:app_id” content=”App-ID(15文字の半角数字)”>

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

Twitter

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を検討する際にはぜひ一度ご相談ください。

Download
サービス資料ダウンロード(無料)
弊社サービスの概要や料金、
フォロー体制などの詳細はこちらの資料でご確認いただけます。
資料ダウンロードはこちら
Contact
お問い合わせ
デジタルマーケティングについてのご相談や弊社サービスについてのご不明点・
ご質問は、こちらからお気軽にお問い合わせください。
お問い合わせはこちら
お電話でのお問い合わせ 
03-6455-5871 9:00~18:00(平日)