編集長ブログ―安田英久
FacebookでシェアしたときのOGP画像、大きな表示で出てますか?

Facebookで自社サイトの記事がシェアされたときに、大きな画像で表示されるようにする方法

今日は、Facebookの話題を。自社サイトの記事がシェアされたときに、大きな画像で表示されるようにする方法を解説します。ポイントはog:image画像のサイズです。

Facebookでシェアされたときの画像表示には2パターンある

Facebookでページがシェアされたときに表示される内容を指定する、OGP(Open Graph Protocol)は、当然、ページのHTMLで指定していますよね? さすがに、イマドキOGPを指定していないページは非常に少ないと思います。

でも、og:imageで指定する画像がFacebookで表示されるパターンは2種類あることをご存じですか? 記事タイトルの上に画像が大きく出るスタイルと、記事タイトルの左に画像が小さく出るスタイルがあるんです。

記事タイトルの上に画像が大きく出るスタイル
記事タイトルの左に画像が小さく出るスタイル

どちらのほうが目立つか……そりゃ、画像が大きく出るほうがいいですよ。

画像を大きく表示するには、画像のサイズを大きくする

では、画像が大きく出るスタイルで表示されるには、どうすればいいのでしょうか。ポイントは、og:imageで指定する画像の縦横サイズです。

Facebookの公式情報では、次のように書かれています。

高解像度のデバイスで画像をよく表示するには、1200ピクセル×630ピクセル以上のサイズの画像を使ってください。現状では、600ピクセル×315ピクセル以上の大さの画像使う必要があります。

横600ピクセル×高さ315ピクセル以上の画像でないと、大きく表示されるスタイルにはならないということですね(「高解像度のデバイス」というのはRetina採用のiPhoneなどを指していると思われます)。

つまり、og:imageで指定する画像を大きなものにすれば、Facebookでシェアされたときの画像が大きく表示されるようになるということですね。

Web担でも以前にOGPの画像サイズルールに関して解説したことがありますが、そのときは「画像が小さすぎるとプレビューアイコンとして使われない」と説明していただけでした。今はプレビューの表示スタイルに影響しているんですね。

実際には398ピクセル×209ピクセルあればいい?

Facebookは「600ピクセル×315ピクセル」と言っていますが、編集部でテストしたところ、現状では、横幅が398ピクセル、高さが209ピクセル以上であれば大きく表示されるようでした。

  • 大きく表示される
    • 398×209以上
      • 398×300
      • 400×300
      • 600×300
      • 398×398
      • 400×400
      • 1500×209
      • など
  • 小さく表示される
    • 300×300
    • 397×300
    • 350×350
    • 397×398
    • 398×208
    • 400×200
    • 1500×200
    • など

といっても、これもすぐFacebook側での処理が変わる可能性があるので、今後のことを考えると1200×630というサイズにしておくのがいいですね。

ちなみに、小さい表示のときは正方形の画像でも大丈夫ですが、大きい表示のときは、縦横比が1.91:1となるとのことで、画像もその縦横比に近くすることを、Facebookで推奨しています。

昔からOGPに対応しているサイトは要チェック

画像が大きく表示されるスタイルはここ最近(といってもけっこう前ですが)に追加されたものなので、昔からOGPに対応しているサイトでは、画像が小さく出るスタイルのままになっていることが多いようです。

昔はOGP画像の最小サイズが200ピクセル×200ピクセルということだったので、それに準じているサイトが多いかもしれませんが、今のFacebookでの表示をより良い形にするには、OGP用の画像を別途用意するようにするのがいいでしょう。

OGP用画像はCMSで自動生成&自動クロール処理が楽

でも、わざわざOGP用に大きな画像を作るのも大変ですし、そのURLをCMSに登録できるようにするのも……大変ですよね。

Web担では、通常のサイト内で使うアイコン画像を、サーバー側で自動処理して、OGP用の画像を生成するようにしています。具体的には、次のような処理を行っています(実際にはなぜかWeb担では940×492のサイズにしていますが)。

  1. 元画像(縦横比が1:1)を、縦横630ピクセル四方に拡大(アップスケール)
  2. 画像キャンバスとして1200ピクセル×630ピクセルを設定(背景色は白)

だいたいのCMSには、元画像にこうした処理を加えて別バージョンの画像を作る仕組みが備わっていると思いますので、その機能を使うのがいいでしょう。

まぁ、それなりに重い処理になりますし、Facebookのクローラが画像を認識していない状態でシェアされると画像なしになってしまいますので、OGP画像に関しては次のような処理をオススメします。

  • CMSへの記事の保存時に、次の2つのアクションを実行する
    1. OGP用の大きな画像の自動生成を行う

    2. 次のどちらかを自動実行する

      • 管理画面上でURL Debuggerにアクセスした結果の画面を自動表示する(管理画面にアクセスしている人がログインしているFacebookアカウントでDebuggerを実行

      • OGPのAPIで「scrape=true」を付けてクロールさせることで、Facebookのクローラに画像を読み込ませる(特にFacebookアカウントは必要なし)

ちょっと難しい話題ですが、OGPの画像に悩んでいる方は、技術がわかる人に上記の説明をしたら、わかってもらえると思います。

この記事が役に立ったらシェア!
tweet52このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

トラフィック誘導
「トラフィック誘導(traffic sourcing、トラフィックソーシング)」 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore