ホームページ制作アトリエ

心えがおホームページ制作 atelier(アトリエ)は、ホームページ・動画制作、教育ICT・アプリ開発、名刺・ポスター・チラシの作成を行っております。

Facebookにサムネイルが表示されない

カテゴリー:MISC, Trouble
a FacebookにURLを張ると自動的にサムネイル(ある場合は)や抜粋のテキストが表示されるはずですが、何故か急に非表示になるというトラブルが起こりました。
ちょっと解決に時間がかかってしまったので備忘録です。


そもそもFacebook等でリンクを張るだけで、こういった紹介がされるのは、OGPがあるお陰です。
これが設定されていないと、勝手にソーシャルメディアがそのページにある文字や画像を拾って書き出してしまうため、自分が意図としない文字や画像が表に出てしまい、伝えたい事が伝わらなかったり、はたまたとんでもないテキストを拾われたり。
まだ画像を読み込んでくれるなら良いですが、今回みたいに画像が空欄になって文字だけになるとクリック率が三分の一くらいまで減ってしまう恐れも…X( てなわけで、このトラブルをほおっておくわけにはいかない!ので、ちょっとお勉強。

まず、OGP(OPEN Graph Protocol(オープン・グラフ・プロトコル))ってなに?

b OGPとはOPEN Graph Protocol(オープン・グラフ・プロトコル)の略です。
簡単にいってしまうと、その記事の自己紹介みたいなもの。つまり、その記事の情報をそこに記述しておくことで、シェアされた時に、自分が意図とした通りにソーシャルメディアで表示させることが出来るってわけです。
具体的には、HTMLのhead内に書き出されたMEATタグの情報のことです。(右画像)
これと同じように、ソーシャルメディア用の付加情報をHTMLのタグ内に指定します。

og:type – ページの種類を記述します(blog, Websiteなど)
og:description – サイト、またはページの説明文。概要を記述します
og:title – サイト、またはページのタイトルを記述します
or:url – URL(アドレス)を記述します
og:site_name – サイト名を記述します
og:image – サムネイル画像を指定します
fb:admins – facebookページの管理者ID

Facebook デバッガー

FacebookデバッガーはページのOGP設定が正しく行われているか確認できるツールです。
結果を表示するときにページのクロールが行われるため、すぐに問題が解決できます。
これによりFacebookサーバ内のキャッシュがリセットされ、直る場合があります。
正しくクロールできなかった場合は、赤い三角マークのエラーが発生するので、そこを正しく設定し直します。
あと、色々と調べていると、サムネイルが縦横200px以下だとエラーになるという情報もありました。
サムネイルが小さい人は大きくすると表示されるかも。

WordPressで オープングラフ・プロトコルを記述する

方法は2つ。

1:プラグインを使う(Open Graph Pro、WP-OGP)
2:header.phpにMETAタグを自動的に記述するタグを埋め込む(テーマ編集)

1のプラグインを使う方法ですが、FacebookやWordPressの仕様変更により、プラグインの対応が追えてないのか「プラグインは不安定」といった声が沢山ありました。WP-OGPはバグも多いみたいなので、プラグインを使うとしたらOpen Graph Proの方が良いみたいです。
私はプラグインはなるべく使いたくないので、2の「header.php にメタタグを記述」する方法を見ていきます。

xmlns属性の変更

<!DOCTYPE html>の直後の宣言を、以下のように変更。

OGP用のコードを追加

</head>の直前に、以下のコードを追加。 ※fb:adminsは自分のIDに書き換えてください。
上から見ていくと・・・
og:typeはホームでだけblog。その他のページはarticle
こうすることでホーム以外でいいねボタンが押されてもFacebookで新規ページは作られません。

11~21行目
投稿または固定ページでは、「og:title」にタイトル、「og:description」に記事の抜粋本文を指定。
それ以外のホームやアーカイブページではブログのタイトルとブログの説明文を表示


19~35行目
まずは19行目「サムネイルがある場合はサムネイルを指定」という処理。
続いて23行目「サムネイルがない場合は投稿にある最初の画像を指定」
最後に25行目「サムネイルも画像もない場合は指定の画像」という3段階の条件分岐になっています。

設定は以上で終了です。
c 次に正しくOGPが設定されているかFacebook DEVELOPERS:デバッガー(ツール)にアクセスし、デバッグ。

正しく設定できていれば指定した画像、タイトル、抜粋文がエラー無く表示されるはず。(左画像)
これでキャッシュも消えるのでFacebookにシェアしてもサムネイルと文字が意図した通りに抜き出されているはずです。

でも。。。ちょっとコードをいじった方がいいかも・・・

しかし、こんちくわさんのブログによると、上記コードだと単一記事以外のページのOGP設定はそのページ内の一番最初の記事の情報が設定されてしまうのだとか。なので以下のように編集してくれていました。 (こんちくわさん、ありがとうございました。) これで単一記事ページの場合は、単一記事ページのタイトル、URL、抜粋文を。
単一記事以外は管理画面の情報を。
となりました。

またサムネイル画像についても単一記事以外の場合はデフォルトの画像を設定するように変更されています。

最後に・・・

このままだと、記事をシェアしてもらった際に文字化けしてしまう可能性があるので、下記コードを追記しておくといいでしょう。
こちらのサイト様を参考にさせてもらいました。ありがとうございました。