WEB担当ラボ

覚えておきたいWEB担当の業務ノウハウを共有・公開中

[Facebook]投稿したページのサムネイル画像が表示されない

without comments

最終更新日:2013/05/03 19:27

デバッガー - Facebook開発者_20130503-182907

「wordpress facebook」
で検索した結果の1ページ目に表示される様になってから、WEB担当者ラボのアクセスが上がってきました。
※リンク部分をクリックするとパーソナライズ検索を抜いたgoogleの検索結果画面に移動します。
※該当ページ「wordpress facebookの連動方法 Facebook1.1.10 – WEB担当ラボ
自分と同じ悩みを抱えている人が、相当数いるんだなと思いうれしく思います。
最近、またひとつfacebook投稿絡みで最近悩んだので解決方法をポストします。

悩みどころ
記事を書いて、リンクをfacebookで投稿をした際、
記事の中で利用している画像を表示させたいが、
選択肢に表示される画像に想定している画像が表示されない。

結論から言うと、facebook側のクローラーが記事の情報をキャッシュしており、
新たに選択した画像情報を読み込んでいない事が原因ですので、facebookデバッガーから該当のURLのキャッシュ情報をクリアしてあげれば解決します。

以下詳細です。

原因:facebookがクローラを使用して初回接続時の情報を保持しているから

google同様に、facebookやmixiもクローラーを使用してWEB上の情報を収集しています。

サーバーのログにFacebookが記録されているのはなぜですか?
Facebookでは、ユーザーが他のユーザーに対して、面白いコンテンツを含んだリンクなどを送信することができます。Facebookでは一時的に特定の画像やリンク先を表示することによってホームページのタイトルや動画にタグされたものを表示できます。このシステムはユーザーがリンクを提供したときのみ情報を検索します。もしかしたら、他のユーザーがあなたのホームページからその他のユーザーにリンクを送ったからかもしれません。

相変わらずfacebookさんは日本語が苦手ですが、誰かが投稿にリンクを貼った際に、
サイト情報をクロールするよと申しています。
引用元:http://www.facebook.com/externalhit_uatext.php

facebook_キャッチ画像

誰かがあなたのサイトのリンクをfacebookの投稿しようとした際に、
上記のクローラーはfacebookはあなたのページをキャッシュします。(1)
その後、あなたはサイトのキャッチ画像を追加して(2)、そのサイトを自分のfacebookファンページから
告知しようした場合、既にキャッチ画像が無い(1)の時のサイト情報がキャッシュされている為
目的の画像が表示されなくなります。
今回の悩みどころの原因はこんなところだと思います。

自分のサイトがまだ弱く、誰かが自然にリンクを投稿するなんて考えられない場合、
もしかしたら、facebook系のプラグインからキックをしているかもしれません。

ちなみに、facebookの表示画像はhtmlヘッダーの「og:image」で決まります。
こちらもfacebook上でキャッシュがされますのでご注意ください。
またfacebookの写真のサイズは「200×200 px」~「1500×1500 px」、
サイズは5Mまでとのことです。推奨サイズに該当しない場合には表示されないかもしれません。

og:image

URL

The URL of an image which is used in stories published about this object. We suggest that you give us an image of at least 200×200 pixels. However, bigger is better, so if you have a 1500×1500 image that you can use, please give it to us. We’ll downsample and crop it for for people using smaller-resolution devices but will use it on a larger device. The larger this image is, the better engagement stories featuring it will get. (Note: image sizes must be no more than 5MB in size.) Note that you can include more than that one og:image in your object if you have more than one resolution available.

引用:http://developers.facebook.com/docs/opengraph/creating-object-types/

解決方法:googleデバッガーから該当ページのキャッシュを消す

以下のアドレスからfacebookデバッガーサイトへ移動してください。
facebookデバッガー

「URL、アクセストークン、オープングラフのアクションIDなどを入力してください」というアナウンスの下に
入力ボックスが確認できるかと思います。

入力ボックスに、該当URLを入れて「デバッグ」ボタンをクリックしてください。

以上で作業は終了です。簡単です。
普段facebookデバッガーを利用しない方もこれを機会に一度ためしてみるの楽しいです。
私のサイトには「og:imageをつけろーー!」なんてメッセージがでますが、
初期はもっと色々出ていた気がします(※og:descriptionの文字コード指定が間違っていたりとか)

解決方法2:投稿するfacebookへのリンクにパラメータをつける

上の解決方法があるけど、他の方法を考える場合には該当ページのリンクを貼る時にパラメータを付けても解消します。
URLが違うから、新たなページとして認識されます。
その為キャッシュを気にしなくてもよくなります。

通常:http://www.imohei.com
対策後:http://www.imohei.com?fb

利点としてはgoogleアナリティクスを利用した際に、
ランディングページをfbからのページで単独でみえるのでユーザ導線フローを検証しやすい。
※大人しくアドバンス セグメントで参照元でウンヌンしろって説もありますが・・・

注意点として、facebook経由のgoogleクローラーも同一のページとしてみないため、
サイト内での重複コンテンツ問題に直面します。
WEBマスターツールから、「fb」の引数はページの表示に影響を与えないパラメータであることを通知しておく必要があります。

以上「投稿したページのサムネイル画像が表示されない」場合の対処方法でした。
突っ込みどころは突っ込んで頂ければ幸せです。

「アドバンス セグメントで参照元でウンヌン」の部分に興味がある場合にはサイドバーから
WEB担当者ラボを「イイネ」して頂くと更新がfacebook上で通知されますので便利です!!

Facebookに参加しています

WEB担当ラボは、WEB担当者暦11年の経験を配信しています。
Facebookにご参加頂くと、未定期の更新をFacebook上でお知らせいたします。



Rss配信を行なっています

RSS登録

編集: admin

5月 3rd, 2013 at 7:27 pm

カテゴリ: WEB担当の備忘録

Comments are closed.