Facebookで表示されないアイキャッチ画像を出す超簡単な方法(デバッガー不要)

スポンサーリンク

アイキャッチ画像が出ない、とお嘆きのアナタに

facebook

サイトやブログを開設している場合、専用の「Facebookページ」を作成し、そちらに記事をシェアして拡散しているブロガーさんやサイト管理者さん、大勢いらっしゃると思います。

Facebookページへのシェアに関しては、WordPressの場合はプラグインやツールを使って「自動シェア」している人もいれば、記事公開した後で「手動シェア」作業をしてる人もいるでしょう。

自動・手動にかかわらず、ブログやサイトで書いた記事の情報をFacebookに正しく伝えるためには「OGP」をキチンと設定してあげる必要があります。OGP情報が正しくないと、ブログ記事のタイトルやアイキャッチ画像などがFacebookに正しく反映されません。

そのOGP情報を正しくセットし、以前は問題なく記事タイトルやアイキャッチ画像などがFacebookに表示されてたはずなのに、最近になって表示がおかしくなってきたぞ、という話をあちらこちらで目にするようになりました。私のFacebookもおかしくなってました。

特に最近おかしいのがアイキャッチ画像。私はFacebookページを毎回手動でシェアしているのですが、記事URLを貼り付けた際、以前であれば記事タイトルとアイキャッチの両方がプレビューとして表示されたのに、最近は記事タイトルしか表示されません。

同じように困ってらっしゃるブロガーさんも多いようで、Facebookページにアイキャッチ画像が表示されなくなった場合の対処法を解説した記事が多数公開されています。

いろんな記事を拝見したのですが、だいたい皆さん「アイキャッチ画像が表示されない時はデバッガーを使おう!」という内容。私も以前はそのとおり、表示されない時は毎回デバッガーを利用してから再度シェアをやり直してました。

しかし、デバッガーを使わず、もっと簡単にアイキャッチ画像を表示できる方法があります。私自身は今回紹介する方法で毎回やっており、デバッガーを全く使ってませんがアイキャッチ画像はキチンと表示されてます。

※今回紹介する方法は、アイキャッチ画像が「必ず表示される」ことを保証するものではありません。お手持ちのサイトやブログでのOGP情報が正常にセットされていることが最低条件となります。

したがって「以前は正常にアイキャッチ画像が表示されてたのに、最近おかしい」という場合は有効ですが、「もともと最初から記事タイトルもアイキャッチ画像も表示できていなかったが今回の方法で表示されるようになる」ということはありません。

あくまで「以前は表示されてたのに最近表示されない」場合を想定して書いています。悪しからずご了承ください。

Facebookで表示されないアイキャッチ画像を表示させる方法

今回紹介するのは、WindowsやMacなどの「PCブラウザ」でFacebookページに手動シェアする場合の解決法です。

私は俗に言う「モブログ」(=iPhoneなどスマートフォンからブログ記事を更新する)を一切やらないので、モバイル環境にてFacebookページにシェアすると有効なのかどうかは正直分かりません。成功するかもしれないしダメかもしれない。

ということで、一人でも多くの方々に「成功した!」と言ってもらえることを祈りつつ、方法を紹介します。

記事URLをコピー

▲ ブログ記事を公開した直後、PCブラウザで当該記事を表示させ、記事URLをコピーします。

Facebookページ

▲ 続いてPCブラウザで自身のFacebookページを表示させ、投稿欄に記事URLやシェアコメントなどを記入して手動シェアします。

Facebookページに記事を投稿

▲ まずは先ほどコピーした記事URLを投稿欄にペースト(貼り付け)。

URLをペーストすることで読込処理が開始され、入力されたURLを基にFacebookがOGP情報を取得しにいきます。投稿欄の下側に「プレビューを読み込み中です」と表示されています。

以前であれば、この直後に記事タイトルとアイキャッチ画像の両方がプレビュー表示されたんですよ。

プレビューにアイキャッチ画像がない

▲ しかし、記事タイトルは表示されるものの、アイキャッチ画像はプレビューに表示されません。多くの方々が「おかしい」と言ってるのはこの現象だと思われます。

※この時点で記事タイトルすらも表示されず空白だったり、他の何か(例:記事タイトルではなくブログタイトル)が表示されてしまう場合は、OGP設定に問題がある可能性が高いです。FacebookデバッガーでOGPの設定状況を確認してみることをオススメします。

アイキャッチ画像だけが表示されない場合、Facebookデバッガーでチェックしてあげることで画像を表示させることができますよ、というのがいろんな記事で紹介されてる方法です。その方法で大正解なんですけど、ちょっとその前に次から紹介する方法を試してみてください

投稿のキャンセル

▲ 投稿欄の右上にある×印をクリックして、いったん投稿をキャンセルします。

投稿のキャンセル

▲ Facebookに投稿してる途中でしたので、「保存してないけど閉じていいの?」という確認ダイアログが表示されますが、保存しなくていいです。気にせず「完了」をクリック。

Facebookページ

▲ 投稿がキャンセルされ、何事もなくFacebookページの初期表示に戻りました。

Facebookページで投稿

▲ ここでもう1回、投稿欄に記事URLをペーストします。キャンセルしてからすぐでOK。

URLをペーストした直後、プレビュー欄が1回目のペースト時よりも大きい枠線になってるのが分かるでしょうか。こうなれば99パーセント成功です。

投稿にアイキャッチ画像反映

▲ 1回目の投稿をキャンセルした後、すぐに2回目の投稿をすれば、ご覧のとおり記事タイトルだけでなくアイキャッチ画像も表示されました。

「すぐに」が具体的にどのくらいの時間かはネット環境で変わるかもしれません。私の環境では1回目の投稿をキャンセルした直後(1秒以内)に2回目の投稿をしても上のとおり成功します。

1回目のキャンセル直後、間髪入れず2回目の投稿をして失敗した(=アイキャッチ画像が表示されなかった)場合は、2〜3秒開けてもう1回再投稿してみてください。それで成功するならデバッガーで再読み込みしてあげるよりも簡単かつ短時間で済みます。

3回投稿してもやっぱりアイキャッチ画像が表示されない場合や、記事にセットしたアイキャッチではなく別の画像が表示されてしまう場合は、これもOGP設定の問題だと考えられます。

その場合はFacebookデバッガーでデバッグしてみて、エラーメッセージを確認してみてください。「og:image」がどうのこうの、と画像に関するエラーが出ているはずです。

念のためソーシャルプラグインのバージョン確認を

ここから書く内容は今回の「アイキャッチ画像が表示されない」という問題と直接関係ないのかもしれません。あるのかもしれません。分かりません。

サイトやブログにFacebookページの「いいね!ボタン」やページボックスを表示させる場合、Facebookのソーシャルプラグインページで自分専用のコードを取得し、サイトやブログにコードを貼り付けて設置という作業をしますよね。

そのコードを設置した時期がもう何年も前だわ〜って人は、Facebook APIのバージョンを確認したほうがいいです

Facebookのソーシャルプラグイン

▲ 2017年7月現在、APIの最新バージョンは「2.9」です。半年に1回くらいのペースでバージョンが更新されてるらしいです。

「アイキャッチ画像が表示されないよ〜」とSNSで嘆いてた某知人のHTMLソースを確認したところ、APIのバージョンが「2.0」でした。あんたそりゃ古すぎだ、とツッコミ入れました。

ここのバージョンとアイキャッチ非表示の関連性は分かりませんが、いいね!ボタンなどの挙動には影響があるはずですので、古いバージョンを今も使用してる方々はFacebookのソーシャルプラグインページで最新のコードを取得し、再設置しておいたほうがいいと思います。

りくま ( @Rikuma_ )的まとめ

アイキャッチ画像が表示されない時はデバッガーで再読込してあげてもいいけど、いったん投稿をキャンセルして再投稿しても表示できますよ、という紹介でした。

デバッガーで再表示に成功できる方々は、だまされたと思って再投稿表示を試してみてください。それでアイキャッチ画像が表示できるようになればラクチンになります。

…と書いておきながらこういうことを言うのもアレですが、Facebookは結構頻繁に仕様を変更してきますので、FacebookデバッガーでOGPのチェックを定期的に実施してあげるのは重要だと思います。

今まで問題なかったけど仕様変更によっておかしくなった、ということがあるかもしれません。その場合はデバッグしてみてエラーメッセージを確認し、修正するのが最も確実で最速な解決法となります。

そうは言ってもエラーメッセージって全部英語だったりするし、慣れてない人には難しいですよね。私もいまだに「お前なに言ってんだ」状態になることありますよ。

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします
コメントComments Off
CATEGORY :