Facebookにurlを書いても画像が出なかったのをちゃんと直す

Image

コワーキングスペース八王子 8Beat もオープンまであと3日!(こわい)となりました。

そんな中、「ホームページにOGP指定されています?リンク画像が何も出ないので。。。。」という書き込みがスタッフページに上がり、あうっ(>_<)、と色々やりました。それについて書きます。

ogp画像の設定を見直してみる

まずはソースを見てみます。ogp設定は何もしたつもりがなかったので「何もないんじゃないかなー」と思ってましたがしっかり入っていました。

Jetpackさんがうまくやってくれているようです。しかし画像が、

ブランクになっちゃっています。なぜ~?と 「jetpack ogp 設定」で、ググりました。そして、一番上にあったものをクリックしたら、

JetpackのOGPのimageがブランクのときはサイトのロゴにする

自分のページでした~(^_^;。書いておいて良かった、そういうことをした記憶すらなくなってました。

書いてあるもののリンク先を読むと「アイキャッチ画像が指定されてないページの時にブランクが出てしまう」ということがわかりました。functions.phpにコードを追加すればなおるようなのでさっそくやってみました。

WordPress : Jetpackが生成する og:image のデフォルト画像「blank.jpg」を変更したい

のソースをコピーさせていただいて、

このようにfunctions.phpに追加してみました。

修正結果を確認してみる

サーバーにfunctions.phpをアップして確認します。

Image

urlを入力してみますが、ちらっと読み込みの状態になって、、画像が出てきません。うーん、これは…というところで思い出しました。FacebookのDebuggerで何かして更新するということをしなきゃいけないのかなということを。

FacebookのDebugger

ページに行き、

Image

urlを入力して、Debug ボタンを押します。

これでうまくいったはずー、とFacebookでurlを入力します。

Image

か、変わりません。うーん。もう一度debugページを見てみると、

Image

なにやら、ボタンが2つになっていて右の「Fetch new scrape information」というものが気になります。直訳すると「新しい擦り傷情報を取得する」ということらしいですが(^_^;、きっとこれを押すとちゃんと更新されるような気がするので押します。

そしてFacebookでurlを入力してみると、

Image

お!?おー…、なんかまぁ画像は出ました。ロゴじゃないけど。

Image

イメージの上に矢印があるので押してみると、

Image

ロゴが出ました。。。うーん。これでもいいのかなー。

なぜロゴを指定したのに出てこなかったのか、調べてみる

今まででしたらちょっとこの状態で放っておくつもりだったのですが、ちょっと気になるので調べてみました。

もう一度、Facebookのdebuggerページを見てみると

Image

こんな表示があることに気づきました。超訳だと「og:imageが見つからなかったか、ダウンロード出来なかったか、充分大きくなかったでした。画像を選んでね少なくとも200×200ピクセルぐらいのFacebookからアクセス出来るやつをね。代わりに http://8beat.tokyo/wp-content/uploads/2014/10/cropped-photo8beat.jpg 使われます~」って事らしいです。お…お、おぅ。ちゃんと書いてあるのに英語ってことでさらっと見逃せてしまう自分が怖い。

ということで、大きめの画像をアップしておいてからfunctions.phpのソースを書き換えました。

そして、確認してみると、

Image

今度はちゃんとロゴが最初に表示されました。

Image

矢印もあって、クリックすると

Image

そのページにある、別の画像も選べるようです。

まとめ:英語だからといって読み飛ばさずに読んでみよう~

英語で何か書いてあると面倒でつい読み飛ばしちゃうのですが、今回のようにちゃんと役立つ文言があったりします(当たり前か(>_<))。

なので、英語部分もなるべく読むようにしたいと思います。また必要な部分だけを見てしまって他をパスする傾向があるのですが、今日気づいたらFacebookのdebaggerページの一番下に、

Image

こんな表示があって、超訳「シェアしたらこんな感じに一緒にかきこまれるよー」という、分かりやすいものがありました。うむ、最初からこれを見ていたら割と楽だった、、はず。情報はちゃんとみましょう(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る