Facebookにブログページを投稿する時にアイキャッチ画像が表示されない時の原因と対処方法

facebook-1103707_1280
LINEで送る
Share on GREE
Share on LinkedIn

BLOGの露出を増やすために、Twitterのbotだけではなく、FaceBookも活用したいと考えるのは普通だと思います。

僕のブログは現在、Twitter-botだけなので、GoogleAnalyticsを見るとあたりまえですが、Twitterからのアクセスの比率がほとんどです。
たまにHatenaさんが入ってくれるのは非常にうれしいですね。
そして、ごくたまにFaceBookという感じですが、これをもう少し割り合いを高くしたいな〜と考えたわけです。

FaceBookにURLをアップしてみる

とりあえず、FaceBookは内部に”クロール機能”がありwebページのURLが投稿されると、そのページのコンテンツ文言とサムネイル分を取得してくれます。

サムネイルはWEBページではなく、アイキャッチまたはページ内で使用されている画像が取得されるようです。
ブログページであればやはりアイキャッチが取得されるべきですね。

とりあえず、URLを投稿してみると・・・

スクリーンショット 2016-01-30 8.10.13

何も表示されません。

別の記事を投稿してみると・・・

スクリーンショット 2016-01-30 8.12.34

アイキャッチではない画像が取得されてしまいます。

もしかすると僕の使っているWordpressのテーマが対応していないだけなのかもしれませんが、今回のタイトルでググってみると、同じ症状の人がたくさんいることが分かります。

原因

単純に考えるとDOM構造が何かおかしいのではないかと思い、別のブログを見てみるが、アイキャッチ画像まわりの構造でそんなに大差はない。
ていうか、このアイキャッチ取得ロジックがいまいち理解できなくなってきた。
ページ内のimgタグを取得するだけではないんですね。

普通に考えると、同一ドメインの画像を取得し、優先順位を取得座標の小さい順にすればいいのに・・・

ググってみると、色々なSNSのサムネイル取得のロジックで「OGP(Open Graph Protocol)設定が
必要という事が分かりました。

http://nex.fm/ogp/

スクリーンショット 2016-01-30 8.19.25

metaタグをセットすればいいんですね。
RSS的な仕様なのかな???

対応方法

wordpressのテンプレートを変更するのは、いささか面倒くさいという人の為に、「All in One SEO」というプラグインがあります。
このプラグインでは、SNSのOGP設定も行なってくれるので、アイキャッチのmetaタグが楽に認識されるようになります。
※ついでにSEOもしっかり行う必要もありますが・・・orz

スクリーンショット 2016-01-30 8.30.43

All in One SEO Pack の設定方法と使い方

ついでに見つけたFaceBookDevツール

スクリーンショット 2016-01-30 8.17.01

https://developers.facebook.com/tools/debug

このページにURLを入力して「Debug」ボタンを押すと、ページ内の取得される内容が表示されて投稿前に確認できるというモノです。
おそらくFaceBookのクロール機能と連動していて、こちらで事前にURLを入力しておくと、本番ページの投稿の際にクロールされるのが瞬時に行われるので、きっと同じ箇所のDBに溜め込んでいるんだと思われる。

スクリーンショット 2016-01-30 8.18.47

※アイキャッチが正常に取得できない状態

再取得

スクリーンショット 2016-01-30 8.21.40

間違ったアイキャッチが取得されていた場合は「Show existing scrape information」ボタンを押すと再取得してくれるようです。
何度かトライしてみて感じたのは2回目以降の取得は30秒ぐらい時間を置いて行うと綺麗に取得できるようです。

スクリーンショット 2016-01-30 8.19.54

※無事にアイキャッチが取得されました。

FaceBookでも正常取得

スクリーンショット 2016-01-30 8.23.56

とりあえず、ブログのアクセス数を増やす為に、もっと別のSNSにTRYして見ようと思いました。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です