Web制作ノウハウ

OGPとは?基本からSNSまでの基本設定方法を完全解説【最適な画像サイズも紹介】

WRITERケンライター

  • TOP
  • ブログ
  • OGPとは?基本からSNSまでの基本設定方法を完全解説【最適な画像サイズも紹介】

SAHRE

こんにちは、ジーピーオンラインのケンです!

Webサイト運営では、検索エンジン以外にもSNSからの集客も狙っていくことになります。そんなときに重要になるのがOGP(Open Graph Protocol)です。OGPとは、SNSでWebページがシェアされたときに「タイトル」「画像」「URL」「説明文」が表示される仕組みのことです。

適切にOGPを設定すると、Webページがシェアされたときの要素を指定でき、訴求力が上がります。本記事では、企業のWeb担当者さまへ向けて、OGPの基本からSNSまでの基本設定方法を解説します。
下記のようなことでお困りの方はぜひお読みください。

  • OGPとは何か知りたい
  • OGPの設定方法が知りたい
  • OGPが表示されない

ジーピーオンラインにWebマーケティングの相談をする

OGPとは?

FacebookでOGPが表示されている例

OGP(Open Graph Protocol)は、SNSでWebページがシェアされたときに「タイトル」「画像」「URL」「説明文」が表示される仕組みのことです。

OGPでは、表示する要素を指定できるので、ユーザーに対してシェアされたWebページの内容を詳細に伝えることができます。

OGPを設定するべき理由

OGPを設定していない場合、SNSのクローラーが自動的にWebページの情報を抽出してしまいます。仮に、意図していない不適切な画像などの要素が抽出されると、画像を通してWebページの内容がユーザーに伝わらず、閲覧・拡散が期待できません。

したがって、SNSでタイムラインに共有する時に、リンク先の内容を的確に伝え、効果的に訴求するためには、OGPを設定すべきといえます。

OGPの設定方法【基本設定】

OGPの基本設定方法を見ていきましょう。
「Twitter」「Facebook」など、各SNSのOGPを設定するときは下記の基本設定が必要です。

まずは、head要素内に「prefix」属性を追加します。
記述する内容は下記の通りです。

<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# website:http://ogp.me/ns/website#">

次に、headerタグ内のmetaタグに各項目の要素を追加します。
記述内容は下記の通りです。

■共通するOGP

<meta property="og:url" content="ページのURL"/>
<meta property="og:type" content="ページの種類"/>
<meta property="og:title" content="タイトル"/>
<meta property="og:description" content="説明文"/>
<meta property="og:site_name" content="Webサイト名"/>
<meta property="og:image" content="表示したいサムネイル画像のURL"/>

                                                             
項目 詳細
og:url ページのURLを絶対パスで指定
og:type Website,blog,article,productなど、ページの種類
og:title ページのタイトル
og:description ページの説明文。80~90文字程度
site_name サイト名
og:image SNSでシェアされたときに表示する画像

TwitterのOGPを設定する方法

Twitterでは、冒頭で紹介した基本設定の他に「twitter:card」と「twitter:site」の設定が必要です。
記述する項目は下記の通りです。

<meta name="twitter:card" content="カードの種類"/>
<meta name="twitter:site" content="@ユーザー名"/>

                                                             
項目 詳細
twitter:card summary_large_image(Webページ/推奨),app(アプリ),player(動画)などの表示形式
twitter:site Twitterアカウントのユーザー名を記述

TwitterのOGP設定イメージは下記の通りです。

■Webページの場合のイメージ

<html lang="ja" prefix="og:http://ogp.me/ns#">
<meta property="og:url" content="ページのURL"/>
<meta property="og:type" content="ページの種類"/>
<meta property="og:title" content="タイトル"/>
<meta property="og:description" content="説明文"/>
<meta property="og:site_name" content="Webサイト名"/>
<meta property="og:image" content="表示したいサムネイル画像のURL"/>
<meta name="twitter:card" content="カードの種類"/>
<meta name="twitter:site" content="@ユーザー名"/>

OGPの確認方法

TwitterのOGP設定が完了したら「Twitter Card Validator」で動作確認を実施しましょう。「Twitter Card Validator」では、WebページのURLを入力するだけで、Twitterカードの表示をプレビューで確認することができます。

Twitterカードが表示されない場合は、後述する「OGPが表示されないときの対処方法」を参考にしてください。

FacebookのOGPを設定する方法

Facebookでは、冒頭で紹介した基本設定の他にFacebookアカウントとの連携が必要です。
記述する項目は下記の通りです。

<meta property="fb:app_id" content="FacebookID"/>

この記述がなくてもOGPは表示されますが、アカウントを連携させることでFacebookインサイトを利用できます。Facebookインサイトとは「Facebookページの解析」「いいね!をしたユーザーの属性情報」などが分析できるツールです。

FacebookのOGP設定イメージは下記の通りです。

■Webページの場合のイメージ

<html lang="ja" prefix="og:http://ogp.me/ns#">
<meta property="og:url" content="ページのURL"/>
<meta property="og:type" content="ページの種類"/>
<meta property="og:title" content="タイトル"/>
<meta property="og:description" content="説明文"/>
<meta property="og:site_name" content="Webサイト名"/>
<meta property="og:image" content="表示したいサムネイル画像のURL"/>
<meta property="fb:app_id" content="FacebookID"/>

OGPの確認方法

FacebookのOGP設定が完了したら「Facebookシェアデバッカー」で動作確認を実施しましょう。「Facebookシェアデバッカー」にアクセス後、URLを入力し「デバッグ」をクリックするだけで確認できます。

Facebookシェアデバッカーの実行結果画面

エラー内容も表示されるので、OGPの表示が上手くいかない場合は、内容を確認して修正しましょう。

OGPの最適な画像サイズ

「Twitter」と「Facebook」のOGPの最適な画像サイズを紹介します。

Twitterの画像サイズ

Twitterの最適な画像サイズは下記の通りです。

                                                                          
カードの種類 最適なサイズ サイズ比
Summary Card(正方形) 144px×144px~4096px×4096px 1:1
Summary Card with Large Image(長方形) 300px×157px~4096px×4096px 1.91:1

どちらも容量は最大5MBまでとなっています。

Facebookの画像サイズ

FacebookのOGPの最適な画像サイズは下記の通りです。

 
                                                                          
画像の種類 最適なサイズ
長方形で大きく表示したい場合 600px×315px以上
正方形で小さく表示したい場合 200px×200px以上
 

なお、高解像度で表示されるデバイスでもきれいに表示させるためには、1200x630px以上の画像が推奨されています。どちらも容量は最大8MBまでとなっています。

<参照サイト: Meta | リンクシェアの中の画像指定

OGPが表示されないときの対処方法

最後に、OGPが表示されないときの対処方法を紹介します。

OGPの画像が表示されないときはファイル形式を確認

OGPの画像が表示されないときはファイル形式を確認しましょう。基本的にOGPの画像で利用できるのは「.jpg」「.png」「.webp」「.gif」の形式です。SVG形式などには対応していないので注意が必要です。

WordPressの場合はテーマにOGP設定が内蔵していないか確認

WebサイトをWordPressで構築している場合は、採用しているテーマを確認しましょう。テーマによっては、OGP設定が内蔵しているものがあるため、設定の重複により、OGPが表示されない可能性があります

OGPを設定してコンテンツを拡散しよう

OGPの基本設定について解説しました。OGPとは、SNSでWebページがシェアされたときに「タイトル」「画像」「URL」「説明文」が表示される仕組みのことです。

自社で指定した要素をSNS上に表示できるので、SNSからの流入を増加させたい場合は、OGPを設定してコンテンツを拡散させましょう。

ジーピーオンラインでは、OGPをはじめとして、訴求力の高い高品質なWebサイト制作が可能です。Webマーケティングを強化されたい企業さまはぜひお気軽にご相談ください。

ジーピーオンラインにWebマーケティングの相談をする

この記事の著者

WRITERケンライター

大手採用メディア運営企業にてWebコンテンツ制作に約10年携わった経験をもつコンテンツディレクター兼ライター。これまでの経験を活かし、有益なWebマーケティングに関する情報を発信していきます。

関連記事
制作実績

制作実績一覧へ

私たちジーピーオンラインは、
東京・大阪のWeb制作会社です。