OGPはTwitterやFacebookなどのSNSでWebページがシェアされた際に、ページの情報をわかりやすく表示する仕組みです。設定するとコンテンツの視認性が向上し、ユーザーがページの内容を把握しやすくなるため、興味付けの効果も期待できます。
しかし設定方法がわからず、活用できていない方も多いのではないでしょうか。
そこでこの記事では、OGPが必要な理由やSNSごとの設定方法について解説していきます。
検索エンジンや広告以外からWebサイトへの流入を増やす重要な施策であるため、ぜひ参考にしてください。
目次
OGPとは？
OGPはOpen Graph Protocolの略称で、SNSでWebページがシェアされた際に下記項目を表示する仕組みです。
- タイトル
- 画像
- URL
- 説明文
設定すると、カードのような見た目でリンクやページの概要が表示され、クリック率の向上が期待できます。
OGPが必要な理由
OGPを設定していない場合、SNSでシェアされたコンテンツは以下のように表示されます。
- URLのみそのまま表示
- SNS側が自動的選択したリンク先のページのテキストや画像が表示
URLのみ表示された場合ユーザーの視認性が低下し、ページの内容が把握できません。
また、SNSによっては自動的に内容を抽出してくれる場合もありますが、意図通りの箇所が表示されるとは限りません。そのため、ターゲットとしているユーザーへの興味付けが弱くなる、ページ内容に誤解を与えてしまうなどのリスクがあります。
OGPを設定すれば上記のような事態を防げ、SNSユーザーにも正確にコンテンツを届けられるようになります。結果としてクリック率が向上し、見込み顧客をサイトに呼び込めるため、必ず設定しましょう。
OGPの種類
OGPには下記5つの情報を設定できます。
| og:url | シェアするWebページのURLを設定 |
| og:title | SNS上で表示するWebページのタイトルを設定 |
| og:image | サムネイルとして表示する画像のURLを設定 |
| og:description | SNS上で表示するWebサイトの紹介文や要約文を設定 |
| og:type | コーポレートサイトやオウンドメディアなどのWebサイトの種類を設定 |
上記を1セットとしてHTMLファイル内に記述します。
SNSごとに独自の記述が追加できる場合もありますが、共通して必要な項目であるため覚えておきましょう。
SNS別のHTMLを使ったOGPの設定方法
OGPはHTMLファイルのhead内のメタタグに記述して設定します。SNSごとに設定する必要がありますが、いずれの場合も下記の流れは必須です。
- htmlタグにprefix属性を追加
- メタタグで基本項目を追加
まず、下記のようにhtmlタグにprefix属性を追加してOGPを使う宣言をします。
| <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=”サイトの名前” /> <meta property=”og:image” content=” サムネイルのURL” /> |
以上で基本の設定は完了です。
しかし、表示するSNSの仕様に合わせた記述をしなければ、適切に表示されない場合もあります。利用者が多い下記3つのSNSについて詳しく解説していきます。
なお、WordPressでサイトを構築している場合は、All in One SEOというプラグインを使うと簡単に設定できます。
Twitterは、以下の2つを基本設定の末尾に追加します。
| 項目 | 意味 | 記述方法 |
|---|---|---|
| twitter:card | 画像、動画などの表示サイズ | <meta name=”twitter:card” content=”カードの種類”/> |
| twitter:site | Twitterアカウントのユーザー名 | <meta name=”twitter:site” content=”@ユーザー名”/> |
twitter:cardには下記いずれかの値を設定し、コンテンツの表示形式を指定します。
| summary | ・画像や動画が正方形で表示される ・テキストと横並びになる |
| summary_large_image | ・画像や動画が長方形で表示される ・横いっぱいに広がり、一段下にテキストが入る |
どちらを指定しても優劣はありませんが、見え方が変わるためページや画像の内容に合わせて適した方を選びましょう。
Facebookは、追加の設定をしなくてもOGPは表示されます。
しかし、下記の記述を追加すればFacebookからのトラフィックが分析できる「Facebookインサイト」を利用できるようになります。
| <meta property=”fb:app_id” content=”FacebookのアカウントID”> |
Facebookでは、冒頭で紹介した基本設定の他にFacebookアカウントとの連携が必要です。記述する項目は下記の通りです。
| <meta property=”fb:app_id” content=”FacebookID”/> |
マーケティングを行う上で重要なデータが取得できるため、必ず設定しましょう。
InstagramにはOGPが存在しない
Instagramは投稿にリンクを貼れないため、OGPも存在しません。
しかし、ストーリーズのリンクスタンプやInstagramショッピングなど、独自の機能を使って自社サイトへ流入経路が確保できます。利用者の多いSNSなので運用を推奨しますが、TwitterやFacebookとは使い勝手が異なることを理解しておきましょう。
OGPに適した画像サイズ
OGPで設定する画像サイズを誤ると、必要以上に大きくもしくは小さく表示され視認性が悪いなどの不都合が起こります。そのため、SNSごとの最適な画像サイズを意識した上で設定を行いましょう。
また、正方形と長方形のいずれかで表示できるため、画像に適したサイズ選びも大切です。各SNSに適した大きさは以下の通りです。
| 正方形 | 長方形 | |
|---|---|---|
| 144×144px~4096×4096px | 300×157px~4096×4096px | |
| 200×200px以上 | 600×315px以上 | |
| OGP無し | OGP無し |
またFacebookに関しては、高解像度のディスプレイで閲覧される場合を考慮して、1200×630px以上のサイズが推奨されています。
上記以外の大きさで設定した場合、画質が悪くなったり、見切れたりなど、視認性を低下させる恐れがあるため注意が必要です。
OGPの設定確認ツール
OGPを設定したら、意図通りに表示されるか確認しましょう。SNSで実際に投稿すれば確認できますが、下記のようなツールを使うと便利です。
- シェアデバッカー
- Card validator
- ラッコツールズ
それぞれ詳しく解説していきます。
シェアデバッカー
シェアデバッカーは、Facebookが公式で提供しているコンテンツがシェアされた際の表示を確認できるツールです。
下記の流れで簡単に設定を確認できます。
- OGPの設定をチェックしたいURLを入力
- 「デバッグ」をクリック
実際の表示画面のプレビューはもちろん、設定されているOGPタグ情報も確認でき、不具合が起きていた際に修正箇所を見つけるのにも役立ちます。
便利なツールですが、確認できるのはFacebookの投稿のみであるため注意しましょう。
Card validator
Card validatoは、Twitterが公式で提供している投稿のプレビューを確認できるツールです。
下記の流れで簡単に設定を確認できます。
- OGPを確認したいページのURLを入力
- 「Preview card」をクリック
ページが投稿された際のプレビューや、設定されているOGPタグの情報を、その場で確認できます。なお、確認できるのはTwitterの投稿のみなので、Facebookは別途で確認しましょう。
ラッコツールズ
ラッコツールズは、Webマーケティングを行う上で役に立つさまざまツールを提供しているサービスです。OGPの確認ツールも用意されており、以下の流れで簡単に調査できます。
- OGPを確認したいページのURLを入力
- 「確認する」をクリック
TwitterとFacebookに加えて、はてなブックマークやLINEなどのプレビューも確認できます。また、PCとスマホの表示もそれぞれ確認できるなど、一括でさまざまな情報を得られるためおすすめです。
OGPが表示されない理由と対処法
OGPを設定しても表示されない場合、下記の要因が考えられます。
- キャッシュが残っている
- SVG画像を設定している
- 画像を相対パスで設定している
それぞれ詳しく解説していきます。
キャッシュが残っている
OGPが反映されない場合、キャッシュが原因であることが多いため最初に疑いましょう。
キャッシュとは、Webページの表示速度を速めるために一度閲覧したページの情報を一時的にブラウザに保存しておく仕組みのことです。便利な機能ですが、OGPの設定を行う前のページの情報がキャッシュとして残っていて、表示されないことがあります。
その場合、下記のいずれかの対処で解決できます。
キャッシュクリアの方法はブラウザごとに異なるため、利用しているブラウザの操作方法を確認してみましょう。また、シークレットモードでのWeb閲覧ではキャッシュが残らないため、クリアな状態でページを確認できます。
SVG画像を設定している
SVG形式の画像はOGP側が対応していないため、指定しても表示されません。OGPに対応しているファイル形式は以下の4つです。
- JPG（JPEG）
- PNG
- WebP
- GIF
いずれかの形式に変換し、再設定すれば表示されます。
画像を相対パスで設定している
OGPでの画像設定は、絶対パスで行いましょう。絶対パスと相対パスには、以下のような違いがあります。
| 特徴 | 例 | |
|---|---|---|
| 絶対パス | ファイルの場所までの道筋を最初から最後まで指定する記述形式 | https://example.com/image/thumbnail/ |
| 相対パス | ユーザーの現在地から見たファイルの場所を記述する形式 | ../image/thumbnail |
相対パスで指定した場合、ユーザーがページを閲覧する場所に合わせて記述を変更しなければなりません。
そのためSNSごとに閲覧場所が異なるOGPでは、どこにいても画像が表示される絶対パスで指定する必要があります。Webサイト制作の際は、相対パスで指定することも多いため、意識して使い分けましょう。
まとめ：OGPを設定するとコンテンツが拡散しやすくなる
OGPを設定すると、SNS上でページの内容を伝えられるようになるため、クリック率の向上に繋がります。検索エンジンや広告以外からの流入が期待できるため、コンテンツマーケティングを行う際は必須と言えます。
しかし設定にはHTMLの編集が必要であり、SNSごとの記述ルールもあるため注意が必要です。
この記事を参考に設定方法を理解し、適切な記述を行いましょう。
弊社SEOサービスランクエストではどんなお客様に対しても、予算状況に応じてSEOサービスを提供ができるように、「オーダーメイド型プラン」もご用意しております。お客様の課題や状況に合わせた最適なプランをご提案いたしますので、今後SEO代行業者をお探しになられる方は、ぜひ弊社サービスの内容をご覧ください。
株式会社eclore SEOコンサルタントチーム 責任者
新卒で入社しSEOの営業を年間300社以上行う。4年目でSEOコンサルチームに異動し、個人として約10社以上のコンサルをしている。マネジメントもしており、チームでは合計100サイト以上のSEOに関与。オールジャンル対応できるが、特に得意なのは歯科業界。SEOの先にある売上向上に目を向けて施策を行っている。
