【サンプルコード付】OGPとは?設定~表示確認方法まで簡単解説!


SNS上でWebページをシェアするとき、タイトル・URLのテキスト表示だけよりも、タイトル・サムネイル画像・概要が表示されると、Webページの内容をわかりやすくユーザーに伝えられます。
シェアする際にWebページのタイトル・サムネイル画像・概要文を表示させるには、「OGP」の設定が必要です。
本記事では、OGPの概要と表示に必要な設定について、簡単に解説していきます。
目次
OGPとは
OGPとは、「Open Graph Protocol(オープン・グラフ・プロトコル)」の略称で、Facebook・Twitter・LINEなどのSNS上でWebページをシェアする際に、ページのタイトル・サムネイル画像・概要文を表示させる仕組みです。
OGPを設定していると、テキストのみの表示に比べ、サムネイル画像や概要文からページの内容が伝わりやすくなります。人の目に止まりやすくなれば、それだけサイトへの訪問者が増える確率も高くなります。
サイトへの訪問者は、検索エンジンだけでなくSNSからの流入も多いため、OGPの設定はWebサイトの運用には欠かせません。SNSを見ているユーザーが「クリックしたい」「他の人にもシェアしたい」と思うように、サムネイル画像や概要文を設定すると良いでしょう。

【HTML】Webページには表示されないheadとは?
OGPの設定
OGPは、HTML文書のhead内で設定します。まずは、サンプルコードで簡単に設定内容を見てみましょう。尚、本記事では、FacebookおよびTwitterの設定を行うことを前提に解説します。また、サンプルコードはコピーしてご使用いただけます。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="og:url" content="【ページのURL】" />
<meta property="og:type" content="【ページの種類(website、articleなど)】" />
<meta property="og:title" content="【ページのタイトル】" />
<meta property="og:image" content="【サムネイル画像のURL】" />
<meta property="og:site_name" content="【サイト名】" />
<meta property="og:description" content="【ページの概要】" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="【FacebookのアプリID】" />
<meta name="twitter:card" content="【Twitterカードの種類(summaryなど)】" />
<meta name="twitter:site" content="@【Twitterのユーザー名】" />
</head>
OGP使用宣言
まずはじめは、ページでOGPを使用する宣言を行う必要があります。宣言は、htmlタグまたはheadタグのprefix属性を使用します。(本記事ではheadタグを使用します。)
トップページには「website」、 トップページ以外のページには「article」を指定します。
<!-- トップページ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"></head>
<!-- トップページ以外 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"></head>
Facebookでシェアを行わない場合
Facebookでシェアを行わない場合は、htmlタグに下記の設定をします。
<html prefix="og: http://ogp.me/ns#"></html>
必須設定(URL/種類/タイトル/サムネイル画像)
OGPの使用宣言をしたら、表示に必要な項目の設定を行います。設定にはmetaタグのproperty属性とcontent属性を使用します。また、以下の4項目は、必ず設定します。
<meta property="og:url" content="【ページのURL】" />
<meta property="og:type" content="【ページの種類(website、articleなど)】" />
<meta property="og:title" content="【ページのタイトル】" />
<meta property="og:image" content="【サムネイル画像のURL】" />
URL(og:url)
表示するWebページのURLを設定。URLは絶対パス(http://~ や https://~ で始まるもの)で記述する。
種類(og:type)
表示するWebページの種類を設定。website/articleなどの設定が可能。一般的なWebサイトのトップページは「website」、トップページ以外は「article」を指定する。
タイトル(og:title)
表示するWebページのタイトルを設定。
サムネイル画像(og:image)
SNSでシェアした際に表示するサムネイル画像のURLを設定。画像のURLは絶対パスで記述する。画像の推奨サイズは1200✕630ピクセルで、一番目立たせたい部分を中央に配置する。

Twitter・Facebook・Youtubeなど【SNSヘッダー・カバー・プロフィール・アイコン・OGP画像】よく使う最適サイズまとめ
推奨設定(サイト名/概要文/言語)
次の3項目はオプションですが、設定が推奨されています。
<meta property="og:site_name" content="【サイト名】" />
<meta property="og:description" content="【ページの概要】" />
<meta property="og:locale" content="ja_JP" />
サイト名(og:site_name)
サイト名を設定。表示するWebページのタイトルではないので注意。
概要文(og:description)
表示するWebページの概要文を設定。表示される文字数はパソコンとモバイル端末で異なるが、70~100文字以内を目安に設定する。
言語(og:locale)
Webサイトがサポートしている言語(国)を設定。デフォルトは「en_US」。Webページが複数言語ではなく、日本語のみのサポートであれば「ja_JP」を設定する。(※複数言語の設定は割愛)
ここまでが基本設定です。この他に、FacebookとTwitter用の設定項目がありますので、基本設定に追加します。
Facebook用設定(アプリID)
<meta property="fb:app_id" content="【FacebookのアプリID】" />
アプリID(fb:app_id)
Facebook上でWebページをシェアした際に、OGPで設定した内容が正しく表示させるための設定。
Twitter用設定(カードタイプ/ユーザー名)
<meta name="twitter:card" content="【Twitterカードの種類(summaryなど)】" />
<meta name="twitter:site" content="@【Twitterのユーザー名】" />
カードタイプ(twitter:card)
Twitter上で表示されるカードの形式を設定。カードは、summary/summary_large_image/app/playerの4種類から1つを選択。一般的なWebサイトやブログは「summary」または「summary_large_image」のどちらかを選択。

ユーザー名(twitter:site)
Twitterのユーザー名(アカウント)を設定。「@」も忘れずに記述する。
OGPの表示確認方法
設定が完了したら、内容が正しく表示されるかを確認します。
Facebookの表示確認(シェアデバッガー)
Facebookでシェアされたときの表示は、「シェアデバッガー」という公式ページから確認できます。(Facebookへのログインが必要です。)

シェアデバッガー:https://developers.facebook.com/tools/debug/
確認したいWebページのURLを入力して、[デバッグ]ボタンを押すと、プレビューが表示されます。
もしも表示された内容が間違っていたり、画像などを差し替えたい場合は、該当箇所を修正後に[もう一度スクレイピング]ボタンを押します。

Twitterの表示確認(Card validator)
Twitterでシェアされたときの表示は、「Card validator」という公式ページから確認できます。

Card validator:https://cards-dev.twitter.com/validator
確認したいWebページのURLを入力して、[Preview card]ボタンを押すと、プレビューが表示されます。
もしも表示された内容が間違っていたり、画像などを差し替えたい場合は、該当箇所を修正後に[Preview card]ボタンをもう一度押します。

表示一括確認ツール(ラッコツールズOGP確認)
主要SNSでの表示を一括で確認できる「ラッコツールズOGP確認」というツールもあります。

ラッコツールズOGP確認:https://rakko.tools/tools/9/
確認したいWebページのURLを入力して、[確認する]ボタンを押すと、プレビューが表示されます。

キャッシュクリア
一度シェアしたWebページは、各SNS上にキャッシュされます。シェア後に画像等を変更した場合は、キャッシュのクリアを行うようにしてください。
- Facebook:シェアデバッガー
- Twitter:Card validator
- LINE:Page Poker
さいごに
今回はOGPについて解説しました。SNSを経由してサイトに訪問するユーザーはとても多いため、OGPの設定は重要です。ユーザーの目に止まり、クリックされやすい内容であるかを意識して、OGPの設定をしてみましょう。
Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。