Facebook投稿時にサムネイルが自動表示されなくなった! WordPressでの対策とOGP設定方法。

facebook ロゴFacebookとWordPressのトラブルシューティング記事です。

つい先日、ブログの更新をFacebookのウォールでお知らせしようとしたところ、サムネイル(小さい画像)が表示されなくなりました。

これまでは「近況アップデート」欄にURL(アドレス)を入力すると、自動的にブログ内で使われている画像が表示されていたのですが…。

Facebook ウォール投稿(サムネイル表示あり)
▲投稿欄「近況アップデート」にURLを入力。通常はこのように表示されます。

Facebook ウォール投稿(サムネイル表示なし)
▲あっさりと文字のみ。これでは告知してもサラッと流されてクリックされない!><

 

まず、OGP(Open Graph Protocol / オープングラフ・プロトコル)について。

ひとことで言えば「そのページの自己紹介」。OGPがあるお陰でFacebookなどでリンクを張るだけで、ちゃんと紹介されるのです。具体的には、HTMLのヘッダー(head)内にタグ(MEATタグ)として記述します。例えばこんな感じ。


<meta property=”fb:admins” content=”100002020839919″ />
<meta property=”og:type” content=”blog”>
<meta property=”og:description” content=”公立高校で英語の先生をやっている友達がいます。20代女性で自分よりだいぶ年下なのですが、ランチに誘い「オレ、今度こそちゃんと英語勉強しようと思う。英語習得のコツを教えて欲しい!」と、恥を忍んで相談しました。皆さんにも役に立ちそうなので、その要点をまとめます。外国人と談笑したり仕事をしたり出来るようになりたいけど、英語に苦手意識のある方&初心者の方へオススメの勉強法です。”>
<meta property=”og:title” content=”高校の女性英語教師から聞いた、大人&高校生向け英会話学習5つのステップ”>
<meta property=”og:url” content=”https://swinginthinkin.com/english-5step/”>
<meta property=”og:site_name” content=”SwinginThinkin”>
<meta property=”og:image” content=”https://swinginthinkin.com/wp-content/uploads/121225_eigo_sensei_highschool.jpg”>


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

【処方 その1】Facebook デバッガーを試す。

facebook デバッガー(URL、アクセストークン、オープングラフのアクションIDなどを入力)

まずは、上記ページにアクセスし、サムネイルが表示されないなど問題のページのURLを入力し、「デバック」をクリックしてください。これによりFacebookサーバ内のキャッシュがリセットされ、あっさり直る場合があります。

自分の場合は、残念ながら直らず、以下のようなエラーが表示されました。


Tiny og:image: All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.


上で紹介した「og:image」がおかしいですよ、との事。サイズが縦横とも200px以上が必要です、と言われている訳ですが、ページ内の画像はそれより大きいサイズなので問題ないはず。FacebookとSwingin’ Thinkin’ の紐付けがおかしくなり、上手くリンクしていない様子。

これは、もう強制的に「オープングラフ・プロトコル」を記述するしかない!という事で以下へ。

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

Open Graph Protocol LOGO

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

ネットを検索していると「プラグインは不安定」といった声が沢山ありました。FacebookやWordPressの仕様変更により、プラグインの対応が追えてないのが原因かも知れません。

と言う事で、自分は2の「header.php にメタタグを記述」を選択しました。

【処方 その2】ヘッダーにオープングラフ・プロトコルを追加する。

これは簡単!プラグインを使わずにOGPを設定する方法

ズバリ、この記事が超参考になりました。ブログオーナーこんちくわさん( @conchikuwa )に大感謝です!手順は以下のとおり。

  1. WordPressダッシュボードで、外観 > テーマ編集 > ヘッダー (header.php) を開く。
  2. xmlns属性のタグを変更する(上記記事よりコピペでOK)。
  3. </head>タグの直前に、OGP用の追加コードをコピペ(上記記事よりコピペしますが、Facebook IDのみ自分の数字を書き込みます。やり方も書かれています)。
  4. 再び、Facebook DEVELOPERS:デバッガー(ツール) へアクセス。URLを入力し、Facebookに残っているキャッシュをクリアする。

以上です。これでバッチリ直っているかと思います。もし直らないのであれば、該当ページのソースを開き、<head> 〜 </head>内にMETAタグが記述されているか確認してください。


<注意>
こんちくわさんのブログに記載されていたタグでは、og:imageはアイキャッチ画像があればアイキャッチがサムネイルとして指定されるようになっています。Swingin’ Thinkin’のアイキャッチ画像は横長サイズで高さが200px未満なので、記事一番最初の画像がog:imageに指定されるように、タグを一部削除しました。


 

これで終了です。一見難しそうに見えますが作業自体は簡単です。OGPはFacebook以外でも採用されているので、トラブルが無くても今後のために設定しておいても良いかもですね。頑張ってください!


<最後にひとこと>
最初Facebookで問題が起きた際、Google+で試してみるとちゃんとサムネイルが表示されました。Facebookは少しくせ者なのかも知れません。

あと、今回の問題がおきた際、Facebookのウォールで親身にサポート頂いたウェブデザイナーのモリカメラさん( @moritkk )に御礼申し上げます。心優しいサポートありがとうございます。

3 コメント

  1. この記事のおかげさまで問題が解決できました!

    3日前からブログをFBでシェアする際にアイキャッチ&ディスクリプションの両方が表示されなくなったのですが公式デバッカーで試した所、あっさり解決です。

    どうもありがとう!

    • お役に立ててよかったです!ご丁寧にコメントまで残して頂きありがとうございます。

      草食男子さんって凄いお名前だなぁ、と思ったら、ベジタブルフードのサイト運営されていたんですね。マクロビとかも気になっていたので面白かったです!! LIMA CAFE行ってみます。^^

  2. はじめまして、OGPの設定に詰まってこちらに辿り着きました。

    >Swingin’ Thinkin’のアイキャッチ画像は横長サイズで高さが200px未満なので、記事一番最初の画像がog:imageに指定されるように、タグを一部削除しました。
    こちらの部分について、具体的にどこを削除されたか教えて頂けますでしょうか…?
    私のブログもアイキャッチ画像を短辺200px以下にしており、詰まってしまいました。
    何卒、お願い致します。

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

CAPTCHA