WordPress FacebookのOGPをプラグインなしで指定する!

Image

WordPressでOGPを設定するとなるとプラグインを使った方法が多いのかもしれません。しかし、プラグインは色々いれると重い本体のバージョンが上がったときに対応してないとそれまで動いていたものが動かなくなったりする可能性があります。

ということで、子テーマで対応出来るものは子テーマで対応することを心がけています。OGPの設定も必要だよなーと思いつつ、放置してあったので今回ちょっとちゃんとやってみようかなと思いました。

今現在の状況を確認してみました

今現在、このblogをFacebookでシェアするとどうなるか?Facebookで公開先を自分のみにして試してみました。

2014/06/25 このblogの通りにやって、OGPのdescriptionが「関連」になってしまう人はこちらを参照(>_<)

トップページ
Image

↑画像がない…

投稿ページ
Image

↑複数の画像が選択できるような感じです。ただ、そのままシェアすると意図しない画像になってるみたいですね。

about us
Image

↑画像がない…

アーカイブページ
Image

↑これも投稿と同じく、複数の画像から選ぶことになりそうです。

うーん、、、よろしくない(>_<)

WordPressOGPをheader.phpに指定する

ということで、子テーマのheader.phpを修正して意図したとおりのOGPを出したいと思います。

どのように出したいかというと、

投稿ページ、固定ページは、

アイキャッチがあればアイキャッチ
なければ、1つめの画像
画像がなければ、blogのデフォルトで指定したOGP画像

それ以外のページについてはすべて、blogのデフォルトで指定したOGP画像としたいと思います。

やり方は~、とググったら分かりやすいページがあったので参考にさせていただきました。

【WordPress】コピペでOK!FacebookOGPとTwitterCardsをプラグイン不要で設置

まず、子テーマのheader.phpを開き、

という部分を

に置き換えます。

それから、fb:admins に指定するIDを探します。自分のFacebookページを見て、

Image

左上の自分の写真をクリック!

Image

ちょっと大きくなった自分の写真をクリック!(だんだん大きくなる)

Image

わ!かおがでっかい!とか、動揺しますが落ち着いてURLの欄を見ます。 &type=1 と書いてある直前の15桁の数字をコピーして保存しておきます。15桁じゃないかもしれませんが .(ドット) が区切りになっていると思いますのでその区切りまでの数字をコピーします。

あとは参照させていただいたページにあるとおりに置き換えました。twitter cardsはまだ申し込んでないので今はちょっと省きました。

これを 子テーマのheader.php

の直前にペーストして保存しました。

簡単!これでOGPがちゃんと見えるはず…なのでしたが、ちゃんと見えるまでの2ステップが必要でした(>_<)

ふむふむ…簡単!これでOGPがちゃんとしたものに!と思って勇んで見てみたのですが、かかか、変わっていない(><)。<人によります(^^;

htmlのソースを見ると何かおかしい、og:imageなどが2カ所指定されています1カ所は今追加したコードですがもう1カ所は、

うーん。コメントを見るとどうも Jetpack がOGPを出力しているようです。OGPの設定は自分でやるから(^_^;、Jetpackが出すOGPは出さないようにしたいと思います。で、ググりました!

Jetpackが出力するOGPが仕様変更? 無効化設定が無視され出力されていた件

こちらにJetpackが出力するOGPを出さないようにする方法が書いてありました。

子テーマの、functions.php

これを追加しました。

これでページを読み込み直してhtmlソースを見てみると、Jetpackが出力していたOGPが消えました(^^)/

やった~!と喜び勇んでFacebookでシェアしてみると…、かかか、変わっていません(>_<)

おかしい、たしかにJetpackのOGPは消えたのに… ちょっと考えていたら、 キャッシュ? ということばが浮かびました。以前、別のCMSでもOGP関係の設定をしていてそのときOGPのコードを新しくしてもFacebookでは古いままの表示になっていたような…その原因がキャッシュだったのでした。

ということで、 Facebook OGP キャッシュ でググって、キャッシュの消し方が分かりました。

Image
Facegook Open Graph Object Debugger

です。ここで、さっき試しにFacebookでシェアしようとしたURLを

Image

入力し、 Debug ボタンを押します。こうすることでキャッシュがクリアされます。試しにシェアしたページは全てここでキャッシュをクリアします。

ということで、OGPは正しく表示されました(^^)/

ということで、ようやく

トップページ
Image

投稿ページ

Image

about us
Image

アーカイブページ
Image

と、意図通りに表示されるようになりました!

ちょっとステップがいくつかありましたがJetpackのパブリサイズ共有を有効化していなかったり、一度試しに見てみていなければ最初に参考にしたページの通りにするだけでちゃんと表示できるので簡単です♪

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

シェアする

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

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. […] WordPress FacebookのOGPをプラグインなしで指定する! | RYUS blog […]

トップへ戻る