SNSでシェアしようとしたらサムネイル画像が出ない!時にはリンクも出ない!
う~ん・・・また長いタイトルになってしまいましたが、WordPressでサイトやブログを作っている皆さん、ページをSNSでシェアしようとした時に
リンクにサムネイル画像表示されない
ひどいときはリンクも貼られていない
などという問題が発生したことないですか?
僕はあります。というか最近発生しました。
慌てて調べたところ、ありました。web上にいくつか「こんな便利な解消方法があったのか!」という方法が紹介されていました。僕も自分で試してみたところ、見事問題が解決したため、今回シェアさせていただきます。
WordPress初心者や、本件ご存じなかった方がいらっしゃいましたら、下記に簡単な対処法を書いていますので、よろしければご参照ください。
今回はFacebookについて、次回はツイッターについて紹介させて戴く予定です。
Facebookでサムネイル画像が表示されなかったりリンクが貼られていない(表示されていない)時の対処法
僕のこのブログはWordPressで作っているのですが、記事にFacebookやツイッターのいいね、やシェアボタンを設置しています(Facebookやツイッターの公式ページが提供しているコードをWordPressの<body>(本文記入部分)に埋め込むという方法でボタンを表示させています。下記に少し詳細を書いていますのでよろしければご参照ください。)
おっさんがWORDPRESS(ワードプレス)使ってみた!!!6 ~初心者のためのFACEBOOK/TWITTERアイコン設置方法~
これまでこの方法で特に問題なくシェアできてきました。
Facebookでシェアするときは、小さなサムネイル画像と記事のタイトルが、リンクと共に表示され、ツイッターでシェアするときはリンクのみがシェアできるという状態です。
が、ある日突然、Facebook上でサムネイル画像が表示されなかったり、リンクが貼られていなかったりという問題が発生しました。
画像が無いだけならまだしも、シェアしても肝心のリンクが貼られていなければ全く意味がありません。
Facebook Debugger
そこで調べたところ、『Facebookデバッガー』なるものがあり、多くの場合、これを使うと問題が解消されるとネット上にかいてありました。
で、早速試してみることに。
■Facebook Debugger
https://developers.facebook.com/tools/debug/
検索窓にシェアしたいページのURLを貼り付け、右端にある青い『デバッグ』ボタンを押します。
が、サムネイル画像、もしくはリンクがFacebook上で上手く表示されていないページのURLの場合は、レスポンスコードに見慣れない番号(正常な場合は200)が表示され、その下(カノニカルURL)の下にある『リンクをプレビュー』という箇所にも(本来表示されるはずの)ページサムネイル画像が表示されません。時にはリンクも表示されません。
↑この『カノニカルURL』の下に『リンクをプレビュー』という欄があり、そこに通常サムネイル画像とリンク(件名含む)が表示されます(下記参照ください)。※スミマセン、表示されていない(白紙の)ときのプレビュー画像取り忘れました・・・。
ですが心配は不要です。通常は(時間を置いたりしながら)何度か『もう一度スクレイピング』というボタンを押すと、正常な状態になり、同ページのプレビュー画面にサムネイル画像とリンク(タイトル)が表示されるようになります。
レスポンスコードも通常の200になっていますね。
この状態になったら、いつもの通り『シェア』ボタンを押すと、画像とリンクが表示されているはずです。
これで簡単に問題が解決され、一安心。
もしもこれでも解決しない場合は、別の原因があるかもしれません(画像が大きすぎる、Facebook側の一時的な問題等)ので、専門的なサイトや書籍で調べてみてください。
次回はツイッターでシェアするときにサムネイル画像やページタイトルを表示させる方法について紹介させて戴きたいと思います。
今回の紹介本
WordPressをカスタマイズすることでそのしくみを理解していくという内容で、多少HTMLやCSSの知識が必要となるため、少しハードルが高めのマニュアル本だと思います。しかし実際にローカル環境にWordPressをインストールし、新しいサイトを構築しながら学んでいく実践スタイルのため、非常に身につきやすい本だといえます。発売時期も2016年と比較的近年で、HTML5やCSS3に対応した内容となっているところもポイント高いです。