投稿先:

Facebookでブログシェア時に意図しない画像が出る!画像を指定する方法

OPGはブログへ流入を増やす為の必須の設定

オープングラフ© by KAORI CREATIVE
LINEで送る
[`evernote` not found]
Pocket

WordPressは持っていてブログ書いているけど、OGP設定をしていない方、ちらほら見かけます。

OGPはソーシャルメディアに記事をシェアする際に最適化された状態で見せられるようにすること。ブログへのより多くの流入が見込めるので、ブログをシェアする人は必須です。
※この方法は2016年7月現在

OGP(オージーピー)って何!?

OPGとは、Open Graph Protocolの略で、
ソーシャルメディアでシェアをしたときに最適化させるための通信ルールのこと。
画像やタイトル、概要を表示させるので、目を引き、リンク先の内容が一目てつかめるような外観になります。おそらくご自分のタイムラインで目にしたことがあるものです。

実際にどんなんかというと、Facebookでシェアした時(= 投稿画面にURLをコピペする)に、このような表示になるようにする設定です。

ogp 例

・大きいサムネイル画像
・タイトル
・概要
・ドメインURL(KAORI-CREATIVE.COMとある所)
が表示されていますよね。

こういう画面、ご自身のニュースフィードで 何かの記事シェアで見た事ありますよね。タイトル付きで見栄えも良いし、目を引くでしょ?

サムネイル画像がこのように小さく表示される場合もありますが、画像自体の横幅が足りない、またはきちんとした設定がされてない場合にこういう小さいサムネイルになるようです。

ogp 小例
画像がないよりはいいけれど、やっぱり大きいサイズのほうがインパクトは大きく目をひきます。

どうやればOGPの表示になるの?

ブログ側とFacebook側を関連づける設定をします。必要なものは以下。

    • Facebookアカウント
      → Facebookと連携を取るため必要
    • Facebook アドミンID または App ID
      → ブログ(WordPress)側との連携をとる情報
    • サムネイルとブログの中で表示させる画像
      → 表示させるための画像は、記事内容にあったものを用意
    • 画像をピクセル指定してJPGやPNGに書き出せるソフト等
      → ニュースフィードに表示させるのに最適なサイズがあり、それに合わせて画像を用意するためです。
      基本的には「同じサイズの画像」を記事に付けるようにしてください。

 

OGPを設定していなかった実例

ここではプラグインを利用したカンタンな方法を説明します。
プラグインはSEO設定もできる「All in One SEO」を使って説明します。

VK All in One Expansion Unit」をご使用の場合は、機能がすでに入っていますので、そのプラグインを使ってください。

 

ハリウッド式の声帯の筋トレで「声をつくらず、自信をつくる」プラウドボイスメイクの金丸明日香さん。人気のボイストレーナーさんです♡

asuka-kanemaru
明日香さんはWordPressでブログサイトを運営されていますが、OGP設定をしていませんでした。

http://kanemaruasuka.com/

そのため、ワークショップの案内ページをFacebookでシェアするとこのように特定のお客さまの顔写真がサムネイルとして表示されてしまっていたのです!

プラウドボイスメイク ワークショップ募集OGP未設定

このお客さまは案内ページに掲載されている体験者のお一人ですが、なぜかその方の写真が出てしまうのです。

OGP設定をしていないことで、
意図しない画像が表示されたり、
画像がないタイトルだけ表示されたり、表示が不安定になるのです。

明日香さんは、毎回記事にはバナー画像を添付してシェアしていましたが、毎回バナーを付けるのも面倒ですし、
記事タイトルと画像の不一致は、届けるパワーを下げてしまいます。

ワークショップと一目でわかる画像を表示して
ニュースフィードで目をひくものにしてゆきましょう。

[関連記事]  SNSで信頼されるには発信と交流!今はネット→リアルの時代

「WordPressは運営しているけどOPG未設定」の方は、
この記事を見ながら設定してみてください。

 

FacebookでアドミンIDとアプリケーションIDを取得する

WordPressとFacebookを連携をさせるための情報として、FacebookのアドミンIDか、FacebookのアプリケーションIDのどちらかが必要です。

具体的な説明はこちらの記事を参照してください。

【2016年7月時点】Facebook アドミンIDとアプリケーションID取得方法

 

WordPressにアプリIDを登録!-まずはプラグインをインストール

ここではプラグインを使ってFacebookとWordPressをつなげます。
SEO対策ができるメジャーなプラグイン「All in ONE SEO」を使いましょう。
※すでにWordPressをお持ちの方前提です。

「All in One SEO 」プラグインをWordPressにインストール

all-in-one-seo

1. プラグイン>新規追加の画面を開き、
検索フォームに「All in One SEO」を入力します。

2. インストールしてプラグインを有効化します。

allinoneseo1

3. 管理画面の左上に「All in One SEO」のメニューが表示されたことを確認したら、All in One SEOのメニュー内「機能管理」をクリック。
画面右の「Socialメディア」を「Activate(有効化する)」を押します。

allinoneseo3
4. 先ほどの「機能管理」の上に「ソーシャルメディア」のメニューが追加され、先ほどのグレーの画像アイコンがブルーに変わり、有効化されたことが分ります。

allinoneseo4
5. 「ソーシャルメディア」メニューをクリック。
スクロールしてゆくと「画像設定」というコーナーがあります。
そこではOGP用の画像をどうするか選択します。

ここではアイキャッチ画像と選択します。
記事ごとにアイキャッチに登録した画像をシェア時のサムネイルに表示させることになります。

allinoneseo5

上から3項目めの「デフォルトのOG:image」は、アイキャッチ画像を設定していなかったときに表示させる画像を指定します。
私は必ず記事には画像を用意しますので、私の場合ここは空欄です。

6. さらにスクロールすると「Facebook設定」がありますので、こちらに先ほど取得した15桁の数字を入力します。

私はApp IDだけで問題なく表示されていますので、どちらか一つで問題ありません。

allinoneseio8

その下をスクロールすると
「Twitter設定」もありますので、使っている方は入力しておくとよいでしょう。

7. ページの最下部にある「設定を更新」を押してください。
これを押さないと設定が反映されませんのでご注意。

allinoneseio-button

「All in One SEO」には他にも大切な設定ができますが、ここではOGP設定に関する方法のみです。

これでWordPressとFacebookを連携させることができました。
これはご自分のWordPressサイト全体の設定が完了です。

あとはシェア時に表示される画像でもあり記事の始めに表示されるイメージ画像=アイキャッチ画像を用意しましょう。

記事ごとにアイキャッチ画像の設定の仕方

1.  アイキャッチ画像をまずは用意します。

サイズはFacebookの開発者向けページでは次のように説明されています。

高解像度デバイス上で最適に表示されるよう、1200 x 630ピクセル以上の画像を使用します。
リンクページ投稿で大きい画像を表示するには、少なくとも600 x 315ピクセルの画像を使用してください。画像の最大サイズは8MBです。

4.画像を最適化して優れたプレビューを生成する
-ウェブサイトおよびモバイルアプリのシェアのベストプラクティス
facebook for developers

fb-ogp

2016年7月現在。これは今後変わる可能性有り。

お使いのWordPressのテーマによってはアイキャッチの横幅は大きめのものがありますので、その横幅に対して同じ比率がキレイになるでしょう。

私の場合は<横 1000ピクセル 縦525ピクセル>にしています。

[関連記事]  プロ視点のアドバイスで思い込みや勘違いを理解できたーひらめき脳育クリエイター菊谷恵子さま

明日香さんの場合、使用するページの幅が広くなかったので <横600ピクセル 縦315ピクセル>の画像を用意しました。

asuka-banner

2. 記事の編集画面を開き、右下の「アイキャッチ画像を設定」をクリックし、画像をアップロードし、「アイキャッチ画像を設定」を押すと設定されます。

※この画像は明日香さんの記事ではなくこの記事の編集画面です。

setup-eyecatch
3. アイキャッチ画像を指定した後は
「下書きを更新」または一度公開した記事の編集であれば「公開」ボタンを押します。

4. 記事下のAll in One SEOの記事別の設定エリアがあります。
「ソーシャル」のタブを開き、
「画像」の中でアイキャッチ画像を選択します。

※アイキャッチを正しく登録し、記事を更新しないとここに表示されません。
※この画像は、明日香さんの記事ではなく私のこの記事の編集画面です。

ogp-allinoneseo

これで記事の設定はOKです!

デバッガーで正しく表示されるか確認・修正する

実際にシェア投稿してみると古い画像のキャッシュが残っていたり、記事を公開した直後は上手く表示されない場合がありますので、最後に必ずデバッガーで表示を確認してください。

デバッガーとはプログラムの欠陥や不具合を探して修正する作業をするソフトウエア。作業自体はカンタンです。

1.Facebook デバッガーにアクセスする
https://developers.facebook.com/tools/debug/

2. URLを入力という欄に、シェアしたいブログ記事のURLをコピペします。
debugger1

3. 右の「デバッグ」ボタンをクリック。

4. Link Preview という欄を見るとやはりお客さまの顔が出ている状態のままです。

debugger2
5. これまでの設定がただしければ、キャッシュが強く残っていると思われますので「Scrape Again」のボタンを何度か押してみてください。

6. 3〜4回目でようやく正しく表示されました!

debugger3

これでFacebookに投稿しても大丈夫な状態になりました。

毎月、このアイキャッチ画像を変更する場合は、差し替えた新しい画像に常時が入れ変わるまでしっかりデバッガーをかけてください。

イメージ画像が表示されるのでバナー無しで安心してシェアできますし、さらにお申し込みが増えますね!

asuka-kaori

まとめ

一度OGP設定をすれば、あとは記事ごとに以下を行うだけです。

1. 記事ごとにアイキャッチ画像を設定
2. All in One SEOの「ソーシャル」タブの画像でそれの画像を選択。
3. デバッガーで確認/調整

アイキャッチ画像を用意することが面倒くさいと感じる方もいると思いますが、画像があることでその下に続く文字を読みやすくすること(ブログ画面)、そしてニュースフィードでは目を引くという効果があります。

ブロガーさんなどは必ずやっている設定ですのでせっかくのブログ記事を読んでもらうためには、ぜひやっておきたいですね。

WordPressにしてみたいけど、どうしていいか分らない方へ

見ながらできるWordPressカンタン設定ガイド

WordPressがいいとは聞くのだけど、

・無料ブログとどう違うの?
・そもそもワードプレスって何?
・なぜワードプレスがいいの?
・どうやって作るの?
・シゴト化とシクミ化させるには?
・ワードプレスは私でもできるの?
・無料ブログを続けていていいの?
・ホームページとブログを一つにしたい

どれかに一つでも当てはまるなら、このテキストに答えがみつかります。

見込み客を集める強力なブログツール『ワードプレス』を理解し、立ち上げるための基礎が学べる内容が、この一冊にまとまっています。

手に入れた方からは、
『こんなものが欲しかった』
『専門書では分らないけど、初心者用書籍には書いていないことがある』
といった声をいただいています。

あなたもぜひ入手してください。

WordPressが作れる無料テキストを手に入れる

 

※テキストをお届けの後は、
「集客ブログでファンを創る シェアコンテンツを学ぶ7日間講座」、
その後は「ブログをメディアにするヒント」を不定期でお送りいたします!

 

関連記事

【2016年7月時点】Facebook アドミンIDとアプリケーションID取得方法

Facebookデバッガー
Facebook上で正しく画像等が表示されるか確認/修正

Twitter バリデーター
 Twitterで正しく表示されるかの確認

その他のおすすめ記事

LINEで送る
[`evernote` not found]
Pocket


この記事を書いた人

竹花 香
ファン創造WEBプロデューサー。大中規模企業のWEBサイト ディレクション、デザインで伝えたいことを具体な形にする役割を担う。
メッセージ、面白いアイディアなど「まだ形になっていない見えないもの」の、見える・伝わる表現を探し出すことに熱が入る。そこが自分の使命であり、プロとしてのスキルでもある。基本はウェブ周り。
【好きなもの】ネコ、犬、絵、クロッキー、五平餅、牛皮、メロン、ラ・コルベリーヌのクルミ入酵母パン「ノア」、 エンタメ、青森ねぶた、映画。