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

2016年2月2日

テクノロジー 日記

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

FaceBookにURLをアップしてみる

とりあえず、FaceBookは内部に”クロール機能”がありwebページのURLが投稿されると、そのページのコンテンツ文言とサムネイル分を取得してくれます。 サムネイルはWEBページではなく、アイキャッチまたはページ内で使用されている画像が取得されるようです。 ブログページであればやはりアイキャッチが取得されるべきですね。 とりあえず、URLを投稿してみると・・・ 何も表示されません。 別の記事を投稿してみると・・・ アイキャッチではない画像が取得されてしまいます。 もしかすると僕の使っているWordpressのテーマが対応していないだけなのかもしれませんが、今回のタイトルでググってみると、同じ症状の人がたくさんいることが分かります。

原因

単純に考えるとDOM構造が何かおかしいのではないかと思い、別のブログを見てみるが、アイキャッチ画像まわりの構造でそんなに大差はない。 ていうか、このアイキャッチ取得ロジックがいまいち理解できなくなってきた。 ページ内のimgタグを取得するだけではないんですね。 普通に考えると、同一ドメインの画像を取得し、優先順位を取得座標の小さい順にすればいいのに・・・ ググってみると、色々なSNSのサムネイル取得のロジックで「OGP(Open Graph Protocol)設定が 必要という事が分かりました。 http://nex.fm/ogp/ metaタグをセットすればいいんですね。 RSS的な仕様なのかな???

対応方法

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

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

https://developers.facebook.com/tools/debug このページにURLを入力して「Debug」ボタンを押すと、ページ内の取得される内容が表示されて投稿前に確認できるというモノです。 おそらくFaceBookのクロール機能と連動していて、こちらで事前にURLを入力しておくと、本番ページの投稿の際にクロールされるのが瞬時に行われるので、きっと同じ箇所のDBに溜め込んでいるんだと思われる。 ※アイキャッチが正常に取得できない状態

再取得

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

FaceBookでも正常取得

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

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ