Facebookシェアに最適な画像サイズとOGP設定【2016年版】

2016.08.08 (Mon)

笹本雅人

ソーシャルメディア

ogp-eyecatch

Facebookで記事をシェアする際には投稿欄にURLを貼り付けると自動的に画像や記事概要が表示されますね。
この際、上の画像のように途中で切れていたり、そもそも画像が表示されていなかったり、適切な画像や概要テキストではなかったりする場合もあります。

こうしたことが起こってしまう原因として次のようなことが考えられます。

  • 記事のOGP(Open Graph Protocol)が設定されていない
  • 画像のサイズが適切ではない

このような記事に行き当たった場合、シェアしようとしたユーザーはそのままシェアしてくれるかもしれませんが、それを見た他のユーザーには画像が適切でないためにシェアされた内容が伝わらないかもしれません。
また、画像が表示されなかった場合には、シェアすることをやめてしまうユーザーもいるのではないでしょうか。
こうしたことを避けるために、どのようなことをしておけばよいのか解説します。

目次

OGPとは

OGPとはOpen Graph Protocolの略で、ブログなどのHTMLに書いておくfacebook向けのタグのようなもののことです。
Facebookはこのタグを読むことで、シェアされようとしている記事のタイトルや画像などを識別しています。
OGPはブログやサイトの運営者・著者が設定するものなので、読者が設定することはできません。

OGPはページのHTMLソースの中で、以下のように書かれています。


<meta property="og:title" content="Webマーケティングの株式会社ブレインネット">
<meta property="og:url" content="https://www.brain-solution.net/">
<meta property="og:image" content="https://www.brain-solution.net/logo.jpg">
<meta property="og:description" content="WEB集客・SEO対策・WEBサイト制作ならブレインネット">

上記はOGPの中で、シェアされる画像や概要テキストに関する最低限のものを示しており、それぞれの説明は以下のとおりです。

og:title
シェアしようとしている記事のタイトル
og:url
シェアしようとしている記事のURL
og:image
シェアしようとしている記事の画像のURL
og:description
シェアしようとしている記事の概要文章

OGPはpropertyの中に設定する項目を記述し、contentの中にその内容(テキストや画像URL)を記述します。
これらを正しく設定しておけば、基本的な準備は完了です。

後述するように、og:imageの画像サイズに制約があるのですが、その話の前にOGPをより理解するために実験してみました。

テスト記事を作ってみましたので、次の記事を見てみてください。
https://www.brain-solution.net/test/ogptest.html

◆記事チャプチャ

article-image

上のような記事が表示されましたね。

次にこの記事のシェアのプレビューを見てみてください。
(シェアのプレビューはご自分のfacebook投稿画面にURLを貼り付けてみるか、FacebookのOpen Graph Debuggerにアクセスして、プレビューを見たいURLを貼り付ければOKです。)

◆シェアプレビューキャプチャ

share-image

(うまく表示されなければ、”Scrape Again”の部分をクリックしてみてください。今までにシェアされたことのない記事や、最後にシェアされてからOGPが更新された記事では、初めてシェアしようとした際にOGPの設定どおりに表示されないことがあります)

記事を実際に見たものと、シェアのプレビューの画像やテキストが違うことがわかります。
このように、OGPに設定する画像やテキストはそのURLで使用されていなくてもよく、web上にある画像であれば好きなものを指定することができます。
記事のシェアを促進するためにも、画像を使っていない記事でもog:imageは設定しておくことをおきましょう。
(ただ、上記の例のように極端に変えてしまうとユーザーを混乱させる恐れがあります。テキストのマイナーチェンジや画像のサイズ変更程度にとどめておきましょう。)

Facebookシェア向けに最適な画像サイズ

さて、本題の画像サイズの話です。
結論として、Facebookシェアに最適な画像サイズは縦630px×横1200pxで、この画像をOGPに設定することでシェアの際にこの画像が表示されます。
以下でその理由をご説明します。

og:imageに画像URLを設定していたとしても、シェア画面に正しく表示されない場合があります。
理由は、設定する画像のサイズに制約があるためです。

その制約とは、次の2つです。
・画像の縦横比率
・画像のサイズ(ピクセル)

Facebookで画像つきでシェアされる場合、見え方は2通りあります。

画像が大きく表示される場合

大きい画像はニュースフィードの中でも目を引くため、できればこの形式で表示させたいものです。

大きい画像で表示される際には、Facebookシェア画面での縦横比はデスクトップ/モバイルを問わず常に決まっていて、縦:横の比率は1:1.91となっています。
この形式で表示させるためのog:imageについて、Facebookの推奨は縦630px×横1200pxで、最低でも縦315px×横600pxが必要です。
(最低とされているサイズを多少下回っていてもこの形式で表示されることを確認しています。大きな画像が推奨されているのは、高画質端末が増えてきており画質を重視するためと考えられます。)

縦横比が推奨からずれていると、より横長の画像では左右が、より縦長の画像では上下が削られて表示されてしまいます。
時々、画像の中の顔や文字が切れて表示されている記事をニュースフィードで見かけるのはこのためです。
どうしても推奨の縦横比で画像を準備することができない場合、上下もしくは左右が削られることを見越して、表示させたい部分を画像の中心に据えておくことをおすすめします。

また、画像のサイズや比率に気を取られていると、画像のファイルサイズが重くなってしまうことがあります。
ページ表示速度に悪影響を与える恐れがありますので注意しましょう。

小さい画像がついた場合

小さい画像は、画像のサイズが200px:200px以上縦315px×横600px未満の場合に表示されます。
この形式で表示された場合の画像の縦横比は決まっていません。
縦長の画像の場合、ニュースフィードにも縦長のまま表示されますが、横長の画像の場合は、縦の長さに合わせて正方形に整形されて表示されます。

大きな画像で表示されることを見越して横長の画像をOGPにしていると、意図せず正方形になった際に左右が削られてしまいますので注意が必要です。

画像が表示されない場合

OGPが設定されていない場合でも、シェアしようとしたときにプレビューに画像が表示されることがあります。
これは、Facebookが自動的にページ内で使われている画像の中で適切なサイズのものがないかを探してくれるからです。
アイキャッチ画像を毎回記事ページに表示させているブログがOGPを設定していなくてもシェア画像が表示されるのはこのためです。

一方で、OGPが設定されていても、シェアしようとしたときに画像が何も表示されないことがあります。
これは、200px×200pxを下回る画像はOGPに設定していてもFacebookがエラーを返してしまうためです。

ユーザーにシェアされたいページには、なるべく大きな画像でシェアできるよう、きちんとOGPを設定しておくことがおすすめです。

注意点

Facebookのシェア画像の仕様はこれまでも何度も変更されています。
サイズや比率については執筆時点(2016年8月)のもので、今後も推奨サイズや縦横比率が変わる可能性があります。
なお、本記事は次の公式における記述をもとに私がテスト・検証した上で執筆しています。

ベストプラクティス – シェア機能 – ドキュメンテーション – 開発者向けFacebook

WordPressのAll in One SEO PackプラグインでOGP設定をする

OGPはwordpressであれば、All in One SEO Packで設定することができます。
このプラグインはもともとはSEOに関係するメタタグ等の設定をするためのものですが、同じようにOGPも自動的に記述してくれるので大変便利です。
このプラグインのシェア画像に関する設定についてもご紹介します。

All in One SEO PackはデフォルトではOGP設定はOFFになっているので、これまでソーシャルメディア機能を使ったことがなければアクティブにしておく必要があります。
Wordpressの管理画面から左カラムの”All in One SEO” → “機能管理”と選択し、ソーシャルメディアを有効化(activate)します。

social-activate

有効化すると”All in One SEO”の中に”ソーシャルメディア”という項目が増えますので、これを選択します。
まずはホームページ設定(サイトトップの設定)の中のサイト名やホーム画像URLを設定しておきましょう。

home-config

画像の大きさはすでに述べたようにサイズに注意して、大きく表示される画像サイズを用意しておきましょう。

また記事ページのog:imageはアイキャッチ画像に設定しておくのが便利かと思います。
アイキャッチ画像がない記事でもデフォルトの画像を表示させることもできますので、必要があれば設定しておきましょう。

article-config

加えて、記事投稿ごとに画像を始めとするOGPを個別設定することもできます。
記事投稿画面の下のほうに、All in One SEO Packの設定欄があります。

each-article-config

タブ切り替えで”ソーシャル設定”を選ぶとOGPやTwitter cardの設定ができます。
ラジオボタンで表示されている選択肢の中から画像を選択できるほか、直接画像URLを貼り付けてog:imageに設定する(カスタム画像)こともできます。
アイキャッチ画像と縦横比が異なる画像をアップしたい場合などに便利です。

記事の公開後はデバッガーなどでプレビューをチェックしておきましょう。

ただし、OGPを意識して縦630px×横1200pxの画像をアイキャッチにしていると、WEBサイト内が画像読み込みで重くなってしまうことも考えられます。
OG:imageとアイキャッチ画像を併用する場合は、最低限の縦315px×横600pxにするか、OGPとアイキャッチは別々にトリミングしたものを使うとよいでしょう。

シェア画像がうまく表示されない場合の対処法

画像が表示されない理由として次のようなことが考えられます。

・記事が更新されているにもかかわらず、Facebookが古い情報(画像など)を表示している
→Facebook debuggerにてscrape againをクリックしてみてもう一度確認してみてください。

・OGPに設定された画像のサイズやURLが適切ではない
→意図した画像がOGPに設定されているか、記事のHTMLソースを見て確認してみてください。
(Chromeブラウザであれば、確認したページでCtrl+Uでソースを見ることができます)
og:imageに設定されているURLに直接アクセスして画像を確認した後、保存するなどしてサイズを確かめてください。

まとめ

画像サイズやOGP設定についてまとめると次のようになります。

  • Facebookのシェア画像はOGPをもとに表示される
  • og:imageに設定する画像は縦630px×横1200pxが最適
  • wordpressならAll in One SEO Packプラグインを使うと楽
更新をチェック

Facebookでフォローする

関連記事
この記事を書いた人

笹本雅人 インターネット集客支援事業部 ( )

【所属部署での主な業務】
現在は主にSEOコンサルティングのほか、自社公式サイトの運営・管理を担当しています。
SEOコンサルティングでは、Googleのアルゴリズムが日々変化していることを実感する中、WEB集客の成果につなげていくには何をいけばよいのかを考えながらお客様に新たな施策をご提案しております。
また、公式ブログではSEOを中心に、新しい情報にキャッチアップしてみなさまにお届けしてまいります。

【ひとこと】
社内では立派(?)なスイーツ男子として通っています。
オフィスグリコ設置はかないませんでしたが、自社カフェ&バー「BellB」の売上にスイーツ面から貢献しています。

笹本雅人 インターネット集客支援事業部 ( )

【所属部署での主な業務】
現在は主にSEOコンサルティングのほか、自社公式サイトの運営・管理を担当しています。
SEOコンサルティングでは、Googleのアルゴリズムが日々変化していることを実感する中、WEB集客の成果につなげていくには何をいけばよいのかを考えながらお客様に新たな施策をご提案しております。
また、公式ブログではSEOを中心に、新しい情報にキャッチアップしてみなさまにお届けしてまいります。

【ひとこと】
社内では立派(?)なスイーツ男子として通っています。
オフィスグリコ設置はかないませんでしたが、自社カフェ&バー「BellB」の売上にスイーツ面から貢献しています。

バックナンバー
  
コメント

コメントを残す

更新をチェック

ブレインネットプレス カテゴリー

▲ページTOPへ