OGP画像とは?設定方法や、適正サイズ、表示確認方法なども解説!

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=”〇〇(具体的な内容)” />
  • <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の設定方法:各種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を検討する際にはぜひ一度ご相談ください。

この記事の著者

監修者 土田悠真

早稲田大学卒業後、東京地方検察庁に入庁。その後、株式会社ipeに入社。9か月でコンサルティングチームのリーダーに就任。年商150億円超えの中古品マーケットプレイス、商品数500万品超えのファッションECサイトをはじめとし、様々なジャンルのサイトをコンサルティング、分析を行う。ツイッターはこちら。
@seotsuchida

DOWNLOAD
サービス資料ダウンロード(無料)
大手実績多数の弊社サービスの概要や料金、フォロー体制など、この資料にまとめております。
資料ダウンロードはこちら
CONTACT
お問い合わせ
SEOなどサービスについてご相談がある方、人事・採用へのご不明点・ご質問など、気軽にお問い合わせください。
お問い合わせはこちら
お電話でのお問い合わせ 
03-6455-5871 9:00~18:00(平日)