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

コーディング
まるこ
まるこ

SNS上でWebページをシェアするとき、タイトル・URLのテキスト表示だけよりも、タイトル・サムネイル画像・概要が表示されると、Webページの内容をわかりやすくユーザーに伝えられます。
シェアする際にWebページのタイトル・サムネイル画像・概要文を表示させるには、「OGP」の設定が必要です。

本記事では、OGPの概要と表示に必要な設定について、簡単に解説していきます。

OGPとは

OGPとは、「Open Graph Protocol（オープン・グラフ・プロトコル）」の略称で、Facebook・Twitter・LINEなどのSNS上でWebページをシェアする際に、ページのタイトル・サムネイル画像・概要文を表示させる仕組みです。

OGPを設定していると、テキストのみの表示に比べ、サムネイル画像や概要文からページの内容が伝わりやすくなります。人の目に止まりやすくなれば、それだけサイトへの訪問者が増える確率も高くなります。

サイトへの訪問者は、検索エンジンだけでなくSNSからの流入も多いため、OGPの設定はWebサイトの運用には欠かせません。SNSを見ているユーザーが「クリックしたい」「他の人にもシェアしたい」と思うように、サムネイル画像や概要文を設定すると良いでしょう。

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ピクセルで、一番目立たせたい部分を中央に配置する。

推奨設定（サイト名／概要文／言語）

次の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カードタイプ「summary」と「summary_large_image」の表示例。
カードタイプの表示例

ユーザー名（twitter:site）

Twitterのユーザー名（アカウント）を設定。「@」も忘れずに記述する。

OGPの表示確認方法

設定が完了したら、内容が正しく表示されるかを確認します。

Facebookの表示確認（シェアデバッガー）

Facebookでシェアされたときの表示は、「シェアデバッガー」という公式ページから確認できます。（Facebookへのログインが必要です。）

Facebookシェアデバッガー公式ページ

シェアデバッガー：https://developers.facebook.com/tools/debug/

確認したいWebページのURLを入力して、［デバッグ］ボタンを押すと、プレビューが表示されます。

もしも表示された内容が間違っていたり、画像などを差し替えたい場合は、該当箇所を修正後に［もう一度スクレイピング］ボタンを押します。

シェアデバッガーのOGP確認画面

Twitterの表示確認（Card validator）

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

Twitter Card validator公式ページ

Card validator：https://cards-dev.twitter.com/validator

確認したいWebページのURLを入力して、［Preview card］ボタンを押すと、プレビューが表示されます。

もしも表示された内容が間違っていたり、画像などを差し替えたい場合は、該当箇所を修正後に［Preview card］ボタンをもう一度押します。

Card validatorのOGP確認画面

表示一括確認ツール（ラッコツールズOGP確認）

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

ラッコツールズOGP確認ページ

ラッコツールズOGP確認：https://rakko.tools/tools/9/

確認したいWebページのURLを入力して、［確認する］ボタンを押すと、プレビューが表示されます。

キャッシュクリア

一度シェアしたWebページは、各SNS上にキャッシュされます。シェア後に画像等を変更した場合は、キャッシュのクリアを行うようにしてください。

さいごに

今回はOGPについて解説しました。SNSを経由してサイトに訪問するユーザーはとても多いため、OGPの設定は重要です。ユーザーの目に止まり、クリックされやすい内容であるかを意識して、OGPの設定をしてみましょう。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

お問い合わせ

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール！

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

    詳細はこちら

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

    実績一覧をみる

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。

    相談してみる

おすすめ記事

記事一覧をみる