OGPとは？設定すべき理由と効果や適切な設定方法について
SNSなどでWebページがシェアされているとき、掲載したURLだけでなく画像やタイトル、ページの説明文なども表示されているのを目にしたことはないでしょうか？このようなリッチな表現は、OGP設定によって実現できます。
OGPを設定しておくと、SNSなどでWebページをシェアした際に、より多くの人の興味を引く材料となるかもしれません。本記事ではOGPの重要性や設定方法について、わかりやすく解説します。気になる設定画像のサイズなどにも触れていきますので、今までOGP設定を意識したことがなかったという方もぜひご覧ください。
OGPとは？
OGP（Open Graph Protocol）とは、TwitterやFacebookなどでURLをシェアした際に、サムネイル画像やタイトル、ページの概要などを表示させるためのHTML要素です。
表示させたい媒体に応じて記述を行うことで、URLをシェアされたときに伝えたい情報を正確に表現することができます。
OGPを設定すべき理由と効果
OGPを設定することで、任意のアイキャッチ画像や説明文などを表示できます。逆に何も設定しないままそのページがシェアされた場合、SNS側で自動的に取得した情報が抽出されてしまいます。
Webページの内容や趣旨とずれた内容が表示されてしまえば、思うようにシェアされずクリックしてもらえるチャンスも逃しかねません。こうしたズレが起こらないよう、SNS媒体に合った情報や画像をあらかじめOGPを設定しておくことが重要です。
SNSの特性に合わせたサムネイルや紹介文を設定することにより、訴求力アップの効果も期待できるでしょう。
OGPの設定方法
それではOGP設定の具体的な設定方法について解説していきましょう。
基本となるOGPの設定方法、表記方法
まずは基本的なOGPの設定方法からはじめましょう。どのSNSで表示させる場合も、基本設定が必要です。WordPressの場合には、テーマやプラグインで共通設定が行える場合もありますので、Webサイトに合わせて設定しましょう。
head要素内にprefix属性を記述
OGP設定を行いたいページのhead要素内（html）に、prefix属性の記述が必要です。prefix属性とは「これからOGPを設定します」という宣言文のようなものです。
TOPページの場合
<head prefix=”og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# website:http://ogp.me/ns/website#”>
TOPページ以外の場合
<head prefix=”og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# article:http://ogp.me/ns/article#”>
共通OGPの記述
続けてhead内に、OGPに関するメタ要素を記述します。
<meta property=”og:url” content=”ページのURL”/>
<meta property=”og:type” content=”ページの種類”/>
<meta property=”og:title” content=”ページのタイトル”/>
<meta property=”og:description” content=”説明文（80～100字程度が最適）”/>
<meta property=”og:site_name” content=”Webサイト名”/>
<meta property=”og:image” content=”表示したいサムネイル画像のURL”/>
上記の日本語部分は、Webページの内容に応じて書き換えてください。なお「ページのURL」の項目は、相対パスではなく絶対パス(http～で始まるURL)で指定します。
「ページの種類」は、websiteやblog、articleなどページの種類を指定します。トップページの場合は「website」、トップページ以外の場合は「article」を指定すればOKです。それ以外の要素は任意で記述してください。
FacebookのOGP設定方法
FacebookでOGPを表示させるためには、先ほど追加したメタに加え、下記のメタ要素を記述すればOKです。下記の記述を行わなくてもOGPの表示は可能ですが、設定することで「いいね」の数や閲覧数などの各種インサイトの確認ができるようになります。
<meta property=”fb:app_id” content=”FacebookアプリID”/>
「fb:app_id （FacebookアプリID）」のところには、15桁の数字が入ります。FacebookアプリIDがない場合には、「facebook for developers」で取得しておきましょう。
出典：facebook for developers
TwitterのOGP設定方法
TwitterでOGPを表示させるためには、基本設定で記述したタグに加え、以下の設定が必要です。
<meta name=”twitter:card” content=”カードの種類”/>
<meta name=”twitter:site” content=”@ユーザー名”/>
| プロパティ | 項目 |
| “twitter:card”（カードの種類） | Webページの場合は下記のどちらかを記入 ・summary ・summary_large_image その他 ・app（アプリ） ・player（動画） |
| “twitter:site”（＠ユーザー名） | Twitterアカウント「＠ユーザー名」 |
Twitterには「Summary Card（サマリーカード）」と「Summary Card with Large Image（大型画像付きサマリーカード）」、2種類のカード表示形式があります。大き目の画像で表示させたい場合は、「カードの種類」のところを「summary_large_image」に書き換えて設定すればOKです。
OGPに最適な画像サイズは？
サムネイル画像はOGPのなかでも印象に残りやすい項目のため、ページ内容やターゲットにマッチするようなサムネイル画像を設定することで、より効果的に活用できます。ただしSNSによって表示に適した画像サイズやアスペクト比が異なるため、OGP設定時は注意が必要です。
ブログなどで使用しているアイキャッチ画像をなんとなくそのまま流用してしまうと、比率が変わって見えたりサムネイルが見切れてしまったりする場合もあります。それぞれきれいに表示できる画像サイズがどれくらいなのか、把握しておくことも大切でしょう。
FacebookのOGP画像サイズ
Facebookでは600px × 315px以上の画像サイズが推奨されています。これよりも小さいサイズの画像だと、表示の際も小さく見えてしまいます。迷ったときは下記のサイズで作成するとよいでしょう。
・横1200px × 縦630px以上（1.91：1に近いアスペクト比 推奨）
※8MB以下
TwitterのOGP画像サイズ
Twirrerカードには二種類のサマリーカードがあるため、表示させたいカードに合わせた画像を用意します。
- Summary Card with Large Image（大型画像付きサマリーカード）：横300px × 縦157px（1.91:1）
- Summary Card（サマリーカード）：144px × 144px（1:1）
上記は最小サイズですので、大きな画像を用意する場合はそれぞれのアスペクト比に応じた画像を用意すればOKです。なお最大サイズは4,096px × 4,096pxで、ファイルサイズは5MB未満となっています。
迷ったときはこのサイズに
WordPressのプラグインなどを使用し、SNSごとにOGP画像を設定する場合はそれぞれに合った画像サイズにすればOKです。しかし複数のSNSでの表示を想定し、いくつも画像を用意するのは大変だという場合もあるでしょう。
画像サイズに迷ったときは横1,200px × 縦630pxで画像を作成し、表示させたい情報を画像中央部分に630pxの正方形の中に収まるよう設置しておけばOKです。
共通で1枚の画像を指定する場合は、さまざまなSNSで使用しても見切れることがないサイズの画像を用意すると安心でしょう。上記のような画像設定にしておけば、FacebookやTwitterのみならず、LINEやはてなブログなどでも要素が見切れることなく最適に表示できるのでおすすめです。
OGP画像シミュレータで事前に画像表示をチェック
OGP画像シミュレータを使うと、設定した画像や説明文などがイメージ通りに表示できるかどうか事前に確認できます。下記URLにアクセスし、画像を追加するだけで簡単にチェックできますので、あらかじめ見え方を確認しておくと安心です。
OGPが適切に設定されているか確認する方法
OGPの設定が完了したあとは、問題なく表示できるかチェックしておくと安心です。それぞれのチェック方法について解説します。
なお以前は「Card Validator」というTwitter公式ツールが利用できましたが、現在はプレビュー機能が削除されてしまいます。現状としてはTwitter表示の確認には、外部ツールによるチェックが必要です。
Facebook公式ツール
FacebookのOGP確認は、公式のシェアデバッガーツールで確認できます。設定や修正が必要なプロパティがあれば、具体的に通知してくれるので、設定内容の確認にも有効です。
出典：Facebook公式ツール
OGPチェッカー
Web ToolBoxのOGPチェッカーでは、Twitter・FacebookでのOGP表示が確認できます。設定しているプロパティと値も確認できるので、設置タグの記述ミスのチェックもスムーズです。
出典：OGPチェッカー
ラッコツールズ OGP確認
ラッコツールズのOGP確認は、Twitter・Facebook・はてなブックマーク・LINEでのOGP表示が一度に確認できます。対象URLを入力するだけで直感的に活用できるので、見た目をサクッとチェックしたいという場合におすすめです。
出典：ラッコツールズのOGP確認
OGPが表示されないときの対処方法
SNSでページをシェアした際、OGPが表示されない場合の対処方法について説明します。
記述すべき場所があっているかを確認
メタタグを直接記述している場合は、タグの設置場所が適切か確認します。基本的には
タグを設置する場所が誤っている可能性があるため、まずは場所を確認しましょう。
Prefixについては<head>でも<html>でもどちらでも構いませんが、メタタグの場合は<head>～</head>の間に記述するのがルールとなっています。正しい位置に記述されているか一度確認してみましょう。
タグの記述間違いの確認
メタタグの記述に誤りがある場合にも、OGPが正確に表示されないことがあります。タグの閉じ忘れがないか、大文字が混在していないか今一度チェックが必要です。不安な場合は直接記述せずに、参考サイトからコピーペーストしてみるのもおすすめです。
設定しているURLが絶対パスになっているか確認
Facebookで表示する場合には、指定URLを絶対パスで記述する必要があります。絶対パスとはhttp～から始まるすべてのアドレスです。パーマリンクや相対パスなどを記述している場合には、正しく表示されないため、念のため確認してみるとよいでしょう。
画像フォーマットが適切か確認
サムネイル画像のみが表示されない場合には、画像フォーマットが適切なものか確認してみましょう。Twitter OGPでサポートされているフォーマットは「JPG」「PNG」「WEBP」「GIF」です。「SVG」は対象外ですので、使用している場合は別のフォーマット画像に変更しましょう。
OGPは拡散・誘導向上のために効果的！
OGPを設定すればSNSでシェアされた際に、視覚的に情報を伝えやすくなります。印象に残るサムネイルや誘導文を設定することで、より多くの拡散や誘導につなげられるでしょう。得られる効果は大きいのでぜひ設定することをおすすめします。
SEO対策やコンテンツマーケティングなど、WEBマーケティングにおいて幅広いお役立ち情報をお届けします。
弊社では、サイト流入数の増加や新規顧客の獲得など、売上拡大にむけたWEBサイトの最適化をサポートしております。
お役立ち資料もご用意しておりますので、ぜひ参考にしてください。
