OGPの設定とは？SNSでシェアされやすい設定方法と便利な確認ツール

2022.10.19 SEO相談室記事一覧

OGPとはOpenGraphProtocolの略で、TwitterやFacebookなどのSNSでシェアされる時に表示されるURLやタイトル、説明文、アイキャッチ画像を設定する仕組みのことです。OGPはページ毎にユニークな内容をOGPに設定することが出来ます。

現代では日常の一部と化しているSNS。Webサイトの記事やwebページをSNSでシェアされることは、新しいユーザーを獲得する大きなきっかけとなります。そのため、OGPにはwebサイトの記事がSNSなどを通じてシェアされた際に表示される情報を記述しておく必要があります。

今回は、SNSでシェアされやすいOGPの設定方法と設定の際に気をつけるポイントをご紹介します。

1 OGPとは
2 OGPを設定するメリット
- 2.1 画面占有率が高く訴求力が大きい
- 2.2 SNS上で幅広くシェアできる
3 OGPの基本的な設定方法
4 Facebookでシェアする場合の設定
5 Twitterでシェアする場合の設定
- 5.1 Twitterカード（Twitter:card）
- 5.2 Twitterユーザー名（twitter:site）
6 その他に設定できるOGP設定
- 6.1 記述される言葉を設定するパラメータータグ（og:locale）
- 6.2 動画のURL設定タグ（og:video/og:video:url）
7 OGP設定の際に気を付けるポイント
- 7.1 シェアしたいページごとに設定する
- 7.2 サイトによってOGP設定ができないことがある
8 OGP設定が反映されないときの対処法
- 8.1 キャッシュが残っている場合
9 OGP設定の表示確認に便利なツール
10 おわりに

OGPとは

OGPとは「Open Graph Protocol」の頭文字をとったもので、webページのコンテンツ内容をFacebookやTwitterなどのSNSでシェアする際に設定可能なHTML要素です。

SNS上でwebページやブログの記事がシェアされた際、もしくはLINEなどのメッセージ機能でページのURLを送信した際に、OGPが設定された記事は、Webページのタイトル、URL、概要、画像を意図した通りに表示させることができます。

OGPを設定するメリット

OGP設定の役割は上述した通り、SNSでシェアされた際の画像や概要文など形式を細かく指定することができることです。

OGPの設定をしていない場合でも、SNS側が自動的に説明文や画像を表示してしまうため、OGP設定していなくても何も出てこないということはありません。しかし、SNS上で自動的に表示される場合、本来伝えたいページの内容がユーザーに伝わりづらくなってしまうことがあります。

そのため、OGPを適切に設定することで、どのようなページで何を伝えたいのかがユーザーへ明確に示すことが可能です。

ここからはOGPを設定するメリットを大きく2つに分けて紹介します。

画面占有率が高く訴求力が大きい

OGP設定を行うと画面占有率が高く、見ているユーザーへの訴求力が高まります。視覚でとらえる部分が大きいため、ユーザーへより多くの情報を瞬時に伝えることが可能です。
シェアされた記事をユーザーが見た瞬間にどんな情報を載せた記事なのか、内容を要約して伝えることができるため、ユーザー自身に興味を持たせることができます。

また、FacebookではOGP設定を行うことで、分析解析に役立つ「ページインサイト」の機能を利用することも可能になります。
後ほど、ページインサイトについてはご紹介いたします。

SNS上で幅広くシェアできる

SNS上でタイムラインに誰かがシェアや「いいね！」をした記事が流れてくることがあるでしょう。OGP設定をしていると、「ユーザーに読んでもらえない」という機会損失を減らし拡散されたユーザーに共有できることから、より多くの方へリーチすることが可能です。
共有されたユーザーの訴求率が高まることで、CTRの向上や記事遷移からのサイト訪問者数増加というプラスの連鎖にもつながります。

今や日常と一部となっているSNSでの拡散による流入には、非常に大きな宣伝効果があるでしょう。より多くの流入を得るためには、充実したコンテンツとOGP設定の両方が必要となります。

OGPの基本的な設定方法

HTMLにはメタタグという、ブラウザ上には表示されることのない、ホームページの設定などを記述する箇所があります。OGPはメタタグの1つです。OGPのメタタグは、HTMLソースコードのheadタグ内に記述することで設定できます。

ここからはOGPの基本的な設定方法についてご紹介します。

OGPを使用することを伝えるタグ

まず、ページでOGPを使用することを宣言するため、head要素にprefix属性を追加しましょう。トップページの場合は「website」、トップ以外のページでは「article」を入力します。

<headprefix="og:http://ogp.me/ns#fb:http://ogp.me/ns/fb#website:http://ogp.me/ns/website#">
<headprefix="og:http://ogp.me/ns#fb:http://ogp.me/ns/fb#website:http://ogp.me/ns/ article #">

ページURLの指定（og:url）

ページのURLを指定します。URLは相対パス（※）ではなく絶対パス（※）で記述する必要があります。

※相対パス/絶対パスとは
・相対パス
現在のページから目的のページまでの道順を記述するものです。「./casestudy.html」のように表します。

・絶対パス
ドメインも含めて、目的のページまでの道順をすべて記述するものです。
「/kaikoku.blam.co.jp/digi-fukugyo/casestudy」のように表します。

ページタイプの種類を指定（og:type）

ページの種類を指定します。ページタイプを設定することによりSNS上での表示形式が変わってきます。

【代表例】
website: Webサイトのトップページ
blog: ブログのトップページ
article: 記事ページなど、Webサイトのトップ以外のページ
product: 製品の紹介ページ

ページタイトルを指定（og:title）

ページのタイトルを指定します。一般的にはサイトの～と同じ内容を設定しますが、サイト名やブランド情報（商品やサービス情報など）を含まず20文字以内で設定することが好ましいとされています。

Googleの検索結果に表示されるタイトルの文字数は一般的に32文字前後とされていることが多く、共有するSNSによってOGPタイトルの文字数も異なります。

ページの説明文を指定（og:description）

ページの説明分を指定します。文字数は80~90文字が最適とされています。
一般的にディスクリプションは120～150字程度のため、内容をそのままを設定してしまうと表示された際に文字が切れてしまう可能性があります。

OGP用に記事要点を簡略化した文章を作成するとシェアされた際にユーザーに伝わりやすいでしょう。

サイト名を記述（og:site_name）

ページのサイト名を記述します。この時、サイト名やブランド情報（商品やサービス情報）は「og:title」ではなく、この「og:site_name」に設定します。

画像のURLの指定（og:image）

SNS上でシェアや「いいね！」された際に表示する画像を指定します。WebページのURL同様にこちらも絶対パスで指定しましょう。Facebookでの設定を行う際には画像サイズを1200px×630pxにすると最適な表示ができます。

Facebookでシェアする場合の設定

Facebook上では、上記で紹介した基本設定にプラスしてアプリID（fb:app_id）を設定しましょう。

アプリID（fb:app_id）
Webサイトの管理者をFacebookに伝えるタグのことを指します。
この設定を行うと、いいねの数、どのくらいユーザーが訪問してくれたのか、どの時間帯がユーザーの目にとまりやすいかなど、Facebookのサイトへのトラフィック分析ができるFacebookインサイトを利用できるようになります。

【参考】Facebookインサイトセンター
https://www.facebook.com/help/794890670645072

Twitterでシェアする場合の設定

Twitterでは、「twitter:card」と「twitter:site」の設定を行います。

Twitterカード（Twitter:card）

Twitter上の表示タイプを指定するタグです。
カードの種類はブログやwebサイト用、アプリ配布用、動画サイト用と4つあり、それぞれ見せ方は変わります。

Summary Card

タイトル、説明およびサムネイル画像。
1:1の比率の144×144px以上、4096×4096px以下のサイズの画像をOGP画像として設定することが可能です。（JPG・PNG・WEBP・GIFに対応）

Summary with Large Image

Summary Cardと同じ形ではありますが、画像の大きさが大きくなります。2：1比率の300×157px以上、4096×4096px以下のサイズの画像をOGP画像として設定することが可能です。（対応フォーマットはSummary Cardと同じ）

App Card

アプリ配布用の表示カードです。アプリ名や紹介文、アイコンに加えて評価や価格などの表示もされます。

Player Card

ビデオ・オーディオ・メディアを表示できるカードとなります。

Twitterユーザー名（twitter:site）

＠から始まるTwitterのアカウントユーザー名を入力します。

【参考】開発者プラットフォーム
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards

その他に設定できるOGP設定

記述される言葉を設定するパラメータータグ（og:locale）

ページの内容が何の言葉で記述されているかを示すために用いるパラメーターのことを言います。Facebook側で適切に翻訳を行う際に使用します。

og:localeはFacebookでシェアされた場合に適切に翻訳されるために必要ですが、必ず設定するべきパラメーターではありません。自サイトに訪れるターゲットユーザーを、日本人のみもしくは日本語がわかる方と想定している場合は日本語のわからない海外ユーザー向けに設定する必要はありません。反対に海外ユーザーもターゲットユーザーとして想定している場合は英語などの設定が必要になります。

自サイトのターゲットユーザーに必要な言語を設定しておくことが重要です。
多言語対応する場合は「og:locale:alternate」としてサポートする言語を指定しましょう。

日本語の場合　<meta property="og:locale:alternate" content="ja_JP" />
英語の場合　<meta property="og:locale:alternate" content="en_US" />

動画のURL設定タグ（og:video/og:video:url）

動画のURLを設定するタグです。動画をニュースフィードでインライン再生したい場合、できるだけhttps：//で始まるURLを使用するようにしましょう。動画再生にはさまざまな要因が関係するため、動画のインライン再生は保証されておりません。

またFLASHに対応していないデバイスに対してはHTML5のvideoで表示させるためmp4の記載も必要でしょう。Facebookではmp4動画FLASH動画の両方がサポートされています。

動画に関するOGPタグ

og:video:secure_url
動画のセキュアなURLとなります。og:videoでセキュアなURLを設定している場合でもこのタグを含めましょう。

og:video:type
動画のMIME（※Multipurpose Internet Mail Extensions）タイプのことです。
application/x-shockwave-flashもしくはvideo/mp4のいずれかを設定しましょう。
※マイム：Multipurpose Internet Mail Extensions
マルチパーパス・インターネット・メール・エクステンションの略。TCP/IPネットワーク上でやり取りする電子メールに画像、動画、音声などのファイルを添付できる拡張仕様のことを言います。

og:video:width
動画の幅（ピクセル）を設定します。この情報設定は必須項目となります。

og:video:height
動画の高さ（ピクセル）を設定します。この情報設定は必須項目となります。

og:video:image
ニュースフィードの高画質プレビュー用の画像を指定することができます。

OGP設定の際に気を付けるポイント

ここからはOGP設定の際に気を付けるポイントをご紹介します。

シェアしたいページごとに設定する

OGP設定はシェアや「いいね！」されたいページに設定することで、そのページの記事内容を伝えるためのタグです。そのため設定する場合は1ページごと画像や説明文が必要になります。その点を踏まえて設定していきましょう。

サイトによってOGP設定ができないことがある

すべてのwebサイトで必ずしもOGP設定ができるわけではありません。WordPressの場合、テーマによってはプラグインを入れる必要があります。
まずは、自身のサイトでOGP設定ができるかを確認し、できない場合は「All in One SEO」や「Yoast SEO」などのプラグインを導入して設定を行うと良いでしょう。

OGP設定が反映されないときの対処法

キャッシュが残っている場合

Facebook

OGP設定したのに反映がされていない場合は、Facebook側のキャッシュが古いままになっていることが考えられます。
FacebookdeveloperのOpenGraphオブジェクトデバッカーを使用すると古いキャッシュをクリアし新しい情報を取得できます。

Twitter

Card validatorを使用し、OGP設定が反映されないページのURLを入力すると、古いキャッシュをクリアし新しい情報を取得できます。

OGP設定の表示確認に便利なツール

OGP設定確認に使用できるツールがあります。ここでは代表的なものをご紹介します。

Facebookの表示確認ツール「シェアデバッカー」

Facebookには「シェアデバッカー」という、シェアした時に表示される画像を確認するツールがあります。使い方も簡単で、確認したいURLを入力しデバッグボタンを押すだけで確認が可能です。

Facebookの表示確認ツール「シェアデバッカー」

参照元：https://developers.facebook.com/tools/debug/?locale=ja_JP

Facebook投稿時に表示される画面プレビューを確認することができます。このとき意図した内容と違った場合は、ページのタイトル、サムネイル画像を修正します。修正後「もう一度スクレイピング」ボタンを押すと修正内容が反映されます。この時表示に問題なければ意図した通りに投稿が表示されます。

【デジ研でのデバッグ表示例】
デジ研でのデバッグ表示(シェアデバッカー)

Twitterカードの表示確認ツール

TwitterにもFacebookと同様に「Card validator」という専用の確認サイトが用意されており、URLを入力して「Preview card」を押すだけで確認できます。
Twitterカードの表示確認ツール

参照元：https://cards-dev.twitter.com/validator

プレビュー画面も確認し、意図した表示と異なる場合は、ページタイトルやサムネイル画像を直して再度「preview card」を押すと修正内容は反映されます。
ただし、出来立てのwebサイトは、OGPの反映に時間がかかる傾向があるため、少し時間をおいてから試すなど対処しましょう。

【デジ研でのデバッグ表示例】
デジ研でのデバッグ表示例(Card validator)

OGP確認シミュレーター

OGP確認シミュレーターはデザインしたOGP用画像をドラッグ＆ドロップするだけで、タイムライン上での見え方を確認することができます。

OGP確認シミュレーター

【参考】OGP確認シミュレーター
http://ogimage.tsmallfield.com/

ラッコツールズ

ラッコツールズは各SNSに対応したOGPデバッガー・シミュレーターです。
URLを入力するだけで、ページのOGP設定を確認することができます。OGPシミュレーターと同じようにPC版、SP版、アプリ版で表示サイズ・文字数が異なるものも確認が可能です。

【参考】ラッコツールズ
https://rakko.tools/tools/9/

おわりに

今回は、各SNSのOGP設定や便利な確認ツールについてご紹介いたしました。
SNS上にOGPタグを正しく設定することで、より多くのユーザーに自身のWebサイトやページの魅力を伝えることが可能です。

さらにSNS上での拡散、CTRの向上、サイト訪問者数の増加にもつながります。記事タイトルやディスクリプションをそのまま載せるのではなく、どういった表現が魅力的か、ユーザーが読みたくなるか、記事毎にターゲットユーザーの心理を考えながら設定するとよいでしょう。多くのユーザーにWebサイトを見てもらうためにOGP設定を活用してみてはいかがでしょうか。

また、当サイト「デジ研」ではこの他にもWebに関するお役立ち情報を多数ご紹介しています。Web担当者の方、デジタルマーケティングに興味がある方はその他記事もぜひご覧ください。