株式会社PLAN-BブログマーケティングOGPはSNSシェアを狙うなら設定しておくべき！確認ツールと最適な画像サイズについて
人気コンテンツ！欲しい情報が一目でわかる。体系的に学べるSEO・広告・サイト制作

OGPはSNSシェアを狙うなら設定しておくべき！確認ツールと最適な画像サイズについて

writer

松本 健吾

2021.04.28

2022.12.23

PLAN-Bのご紹介資料
今すぐ無料ダウンロード
目次
    1. OGPとはSNSでシェアされた際に表示される画像などのデータのこと
      1. OGPを設定するメリット
      2. OGPが設定されていないとページ内容がシェア先で正しく伝わらない
      3. シェアを増やす機会を損失することになる
    2. OGPの基本的な設定方法
      1. og:title：OGPで表示するページのタイトル
      2. og:type：ページの種類
      3. og:image：SNSシェア時に表示させたい画像
      4. og:url：OGPを設定するページのURL
      5. og:description：ページの説明文（概要）
      6. OGP設定のHTML記述例
      7. TwitterにOGPを表示させる記述
        1. Twitter Cardについて
      8. FacebookにOGPを表示させる記述
    3. SNS別のOGP画像サイズについて
    4. OGPの見え方を確認できるWebツール
      1. OGP確認はURLと画像から確認できる
      2. OGP画像シミュレーターはFacebookの画像表示の確認に便利
      3. Twitter Card ValidatorはTwitterの画像表示の確認に使う
    5. まとめ：OGPを適切に設置してシェア率を伸ばそう

無料で資料をダウンロード

※フォーム送信後、メールにて資料をお送りいたします。

PLAN-Bのご紹介資料

弊社の会社概要と、ケイパビリティのご紹介資料です。ご覧いただき、お気軽にお問い合わせください。

※フォーム送信後、メールにて資料をお送りいたします。

STEP 1


フォームでの問い合わせが
完了いたしました。
メールにて資料をお送りいたします。

OGPは、シェア先のSNSで「シェアされたWebコンテンツの内容」を簡潔に説明するための仕組みです。

SNSでシェアされたWebサイトの記事に正方形や長方形の画像と記事タイトル、記事の簡単な説明文が掲載されているのを見たことがありますよね。

OGPを設定するとそれらが表示されるようになるのです。

OGPを設定していないと、各SNS既定のシェア時の表示になってしまうので、ユーザーにシェアされた記事の内容が伝わりにくく、再度のシェア率や訪問率が悪くなります。

この記事では、OGPの設定方法や各SNSでの適切な画像サイズ、シェア時の表示の確認方法について紹介します。

OGPとはSNSでシェアされた際に表示される画像などのデータのこと

OGPとは、WebサイトのコンテンツがSNSでシェアされた際に「タイトル」「画像」「コンテンツの概要」を表示するためのHTML要素のことです。Open Graph Protocolの頭文字をとってOGPと省略されています。

OGPを設定するメリット

OGPを設定するとシェア先のSNSでの訴求効果の改善やCTRの向上が見込めます。

シェアされたコンテンツの概要が一目でわかるようになるため、シェアされたコンテンツを目にしたSNSユーザーが「シェアされたコンテンツの有益性」を瞬時に理解できるためです。

有益であると判断されたコンテンツは、目にしたユーザーによって拡散されやすく、目にしたユーザーがシェアしていくことで、記事の訪問者や訴求対象へのリーチが上がります。

OGPが設定されていないとページ内容がシェア先で正しく伝わらない

OGPが適切に設定されていない場合、SNSユーザーは、シェアされた投稿を見ても

  • 自分に関係があるのか
  • 役に立つのか
  • 読むことでどんなメリットがあるのか

がわかりません。

タイムラインにシェアされたコンテンツが自分に有益かどうかを判断するのに、いちいち投稿内容を確認するためにクリックするユーザーは稀だからです。ぱっと見の印象で「拡散すべきかどうか」を判断するユーザーもいますが、それもOGPが設定されていなければ難しいでしょう。

アメリカ大統領選挙の際、Twitterのリツイート機能が変更になりシェアする前に「リンク先の記事を読みましたか」と表示されるようになったのは記憶に新しいですよね。それほどに、記事の内容を読まない人が多く、ぱっと見の印象で拡散されているのです。

OGPが設定されていない場合、シェアされたコンテンツが「要するに何なのか」がわかりません。あっという間に流れていってしまうタイムラインの中で、「これは自分に関係ありそうだ」「これは拡散すべきだ」と思われない可能性が高いのです。

せっかくコンテンツがSNSでシェアされても、シェアされたSNSからの流入が低くなってしまうということにつながります。

シェアを増やす機会を損失することになる

OGPが設定されていない場合、ユーザーがシェアされたコンテンツの内容を把握しにくいため、シェア率が減少します。

SNSでのシェアが減ることによるメリットは、炎上リスクが減る程度です。

シェア・拡散されることで自社サービスの認知度が上がり、見込み顧客へのアプローチにもつながります。SNSマーケティングと併用することで、大きな効果が見込めるので、OGPの設定をしない選択肢はないでしょう。

OGPの基本的な設定方法

OGPは、HTMLソース内にmetaタグを記述して設定します。WordPressでWebサイトを作っている場合は、使用テーマに設定ページが用意されていることがあります。

基本的な手順はこの2つです。

  1. head要素にprefix属性を追加
  2. meta要素を追加

追加する基本的なmeta要素は5つあります。必要に応じて追加してください。

  1. og:title：OGPで表示するページのタイトル
  2. og:type：ページの種類
  3. og:image：SNSシェア時に表示させたい画像
  4. og:url：OGPを設定するページのURL
  5. og:description：ページの説明文（概要）

LINEやはてなブックマークのOGPは、この基本設定がすんでいれば表示されます。TwitterとFacebookは別個に追加しなければいけない記述があるので、この先もご参考ください。

og:title：OGPで表示するページのタイトル

OGPで表示するタイトルを設定します。

記事タイトルそのままでも大丈夫ですが、SEO対策に特化したタイトルよりも、より拡散されやすいシェアを狙うSNSと相性のいいタイトルに変更してもいいでしょう。タイトルの文字数は多すぎても読みにくいです。どのSNSでも20文字前後が適切です。

og:type：ページの種類

OGPを設定したページの種類を設定します。これを設定することでOGPが表示されたときの形式が変わります。

  • Webサイトのトップページの場合：website
  • Webサイト内の記事コンテンツの場合：article
  • CEOや担当者のブログトップページの場合：blog
  • 製品やサービスの紹介ページの場合：product

og:image：SNSシェア時に表示させたい画像

SNSシェアされたときに表示される画像を指定します。画像を指定するときは絶対パスで指定することを忘れないようにしましょう。

それぞれのSNSで最適な画像サイズについては後述しますので、そちらを参考にしてください。

og:url：OGPを設定するページのURL

OGPを設定するページのURLを指定します。

こちらのURLも画像と同じように絶対パスで指定してください。

og:description：ページの説明文（概要）

OGPを設定するページの概要を入力します。

全文表示させたい場合は100文字未満で入力してください。Web検索上で表示されるディスクリプションの最適な文字数は100文字から120文字とされていますので、OGP用に短いバージョンを用意する必要があります。

「この先に何が書いてあるんだろう」と期待感を持たせたい場合は、100文字以上入力して、わざと文章が途中で切れるようにするのも手です。

OGP設定のHTML記述例

Webサイト「PLAN-B」のOGP設定例

<html prefix=”og: https://ogp.me/ns#”>
<head>
<title>PLAN-B</title>
<meta property=”og:title” content=”PLAN-B” />
<meta property=”og:type” content=”website” />
<meta property=”og:description”
content=”デジタルマーケティングカンパニー 株式会社PLAN-B(プラン …www.plan-b.co.jp
株式会社PLAN-B(プランビー)の公式企業サイトです。” />
<meta property=”og:url” content=”https://service.plan-b.co.jp/” />
<meta property=”og:image” content=”表示させたい画像の絶対パス” />
…
</head>
…
</html>

より詳しく知りたい方は、こちらの参考サイトをご覧ください。

参考サイト：https://ogp.me/

TwitterにOGPを表示させる記述

基本のOGP設定が完了したら、TwitterにOGPを表示させる記述を記載しましょう。

TwitterはOGPのカードの種類とTwitterのユーザー名を指定する必要があります。

<meta name=”twitter:card” content=”カードの種類” />
<meta name=”twitter:site” content=”@ツイッターのユーザー名” />

Twitter Cardについて

Twitter Cardは4種類から選択します。

  • summary：タイトル、説明、サムネイル（画像表示が正方形）
  • summary_large_image：タイトル、説明、サムネイル（画像表示が長方形）
  • app：アプリ配布用
  • player：ビデオやオーディオなどのメディア用

基本的には、summaryとsummary_large_imageを使うことになります。

FacebookにOGPを表示させる記述

Facebookでは、Facebook App IDを記述する必要があります。

<meta property=”fb:app_id” content=”facebook for developersで取得するID”>

このIDを取得することで、Facebookからの流入を閲覧できる機能が使用できるようになります。

関連サイト：facebook for developers

SNS別のOGP画像サイズについて

Twitter、Facebook、はてなブックマークでWebコンテンツがシェアされた場合のOGP画像サイズについて紹介します。

FacebookのOGPは1種類ですが、Twitterは正方形と長方形の2種類あることに注意してください。

  • FacebookのOGP画像の推奨サイズは1200p×630px
  • Twitterの「Summary Card」は正方形。144px144px以上、4096px4096px以下
  • Twitterの「Summary Card with Large Image」は2:1。300px157px以上、4096px4096px以下
  • はてなブックマークは、1200px840px
  • LINEは正方形。630px630px

横長長方形・正方形のどちらでシェアされても対応できるようにするポイントは3つです。

  • もっとも目立たせたいものを画像中心部に置く
  • 上下左右がカットされてもいいデザインにする（横長長方形が主流のため）
  • 横：縦の比率は、1:0.5程度の画像を作成する

OGPの見え方を確認できるツールもありますので、アップする前にツールで確認すると間違いありません。

OGPの見え方を確認できるWebツール

OGPの見え方を確認する際に便利なWebツールを3つ紹介します。

Web上にURLや画像をアップロードするだけで簡単に確認できますので、基本になる形を決める際に利用し、形が決定したらそれをテンプレートとして利用すると、手間がかかりません。

OGP確認はURLと画像から確認できる

公式サイト：https://rakko.tools/tools/9/

ラッコWEBサービスが提供する「ラッコツールズ」には、SNSシェア時のOGPを確認するツールもあります。

対応しているSNSは

  • Facebook
  • Twitter
  • はてなブックマーク
  • LINE

の4種類です。

確認したい記事のURLを入力すると、SNSでシェアされたときの

  • OGP画像
  • タイトル
  • 説明文のサイズ・見え方

を確認できます。

画像をアップロードすると

各SNSでの画像の見え方を確認できます。画像は50枚までまとめて選択できるので、どの画像がOGPとしてふさわしいか悩んでいる場合の比較にも便利です。

ブックマークレットとしても利用可能なので、OGP設定を確認したいページの設定をブックマークバーからワンクリックで確認することも可能です。

OGP画像シミュレーターはFacebookの画像表示の確認に便利

公式サイト：http://ogimage.tsmallfield.com/

Tohl SMALLFIELD氏が提供している「OGP画像シミュレーター」は、FacebookのOGP画像表示の確認に使えるツールです。

Facebookでシェアされた場合のOGP画像の見え方を確認することができます。Ver.2にアップデートされたことで、複数画像の選択にも対応しており、画像比較にも利用可能です。

Twitter Card ValidatorはTwitterの画像表示の確認に使う

公式サイト：https://twitter.com/login?redirect_after_login=https%3A%2F%2Fcards-dev.twitter.com%2Fvalidator

Twitter社が提供している「Twitter Card Validator」は、Twitterでシェアされた場合のOGP画像表示を確認できるツールです。

Twitterアカウントでログインした状態でなければ使用できないので、他のツールに比べると不便です。

設定を確認したいページのURLを入力すると、Twitter上での表示を確認できます。

まとめ：OGPを適切に設置してシェア率を伸ばそう

OGPを設定することで、シェア先のSNSのユーザーにもコンテンツの内容を把握してもらうことができます。

OGPが適切に設定されていないと、シェアされてもぱっと見ただけで素通りされてしまう可能性が高く、訪問者数もシェア率も増えません。

SNSユーザーは、一度流れてしまったタイムラインを遡ってまで記事を探そうとはしないものです。瞬間的に「この投稿は自分に関係ありそう」「有益な内容が書かれていそう」と判断してもらうためにも、OGPは設定しておいた方がいいでしょう。

PLAN-Bのご紹介資料

弊社の会社概要と、ケイパビリティのご紹介資料です。ご覧いただき、お気軽にお問い合わせください。

フォームに必要事項をご記入いただくと、
無料で資料ダウンロードが可能です。

資料請求
ありがとうございました。

WRITER

松本 健吾

マーケティング部 マーケティングユニット

京都大学卒。2020年に株式会社PLAN-Bに入社。現在はSEOツール「SEARCH WRITE」やCVR改善ツール「SEARCH WRITE LEAD」などのマーケティング責任者。オウンドメディア「PINTO!」の編集長も兼任しており、自社ツール活用やSEOの深い知見を活かし、獲得リード数を3倍以上に伸ばした実績を持つ。

RELATED POSTS

関連する記事はこちら

DOWNLOAD

無料資料ダウンロードはこちら

CONTACT

お問い合わせはこちら