プラグイン不要でFacebook OGPをコピペでサクッと設置する方法|WordPressカスタマイズ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Facebook

以前、Facebook OGPの設定について以下のような記事を書きました。

Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった

これも、かなり簡素化されたOGP設定の方法なんですが、All in One SEO Packのようなプラグインを使う必要があったり、トップページのog:image画像を用意する必要がありました。けれど、今回の方法は、そういった作業も不要にし、さらに簡略化したものに書き換えてみました。

基本的に数回コピペしてFacebook管理者情報の入力をすればOKな方法になっています。

「Facebook OGPとは何ぞや?」という方は上記のリンクを参照してください。

photo by Coletivo Mambembe

スポンサーリンク
レクタングル(大)広告

プラグイン無しでのOGP設定手順

プラグイン無しでOGPの設定をするには以下をダウンロードして中身のogp.phpをテーマフォルダ内にコピペしてください。

ogp.phpのダウンロード

ogp.phpの中身は以下のようになっています。

上記コードの開発者情報部分は、Facebookの「管理者ID」と「アプリID」は自身のものに変更してください。

登録方法は、以下を参照してください。

Facebook : 開発者登録をしてApp IDを取得するまで | MUSHIKAGO APPS MEMO

【Facebook-OGP】「fb:admins」「fb:app_id」「SecretKey」の場所 | Qlay

この作業はちょっと面倒くさいかもしれません。

個人的には、「管理者ID」と「アプリID」のタグはなくてもOGP情報が表示されるので必要ないような気もしますが、Facebook自体は登録を推奨しているようです。Facebook自体ユーザーを把握したいというのもあるでしょう。面倒くさい場合は、タグを消してしまっても良いでしょう。後からいくらでも記入できるので。

最後に、テーマのヘッダーファイル(header.php)の<head></head>タグ内に以下のコードでogp.phpを呼び出して終了です。

Facebook開発者情報の登録がなければ、コピペ2回ほどで終わります。

動作確認

テーマをカスタマイズしたら、動作を確認します。

ソースチェック

まずはソースの確認です。ブラウザのソースは以下のように表示されます。

タグの記載に誤りがないかチェックしてください。

動作チェック

動作確認は、Facebook Debuggerを用いて行います。チェックしたいURLを入力して「Debug」をクリックしてください。

Facebookデバッガー

以下のように、OGP情報が表示されればOKです。

Object Debugger

まとめ

これで、かなり簡単にFacebookのOGP情報表示ができるようになったと思います。

プラグインで、細かく設定したいという人には向いてないかもしれませんが、手っ取り早くOGP情報を表示させたいという人にはお勧めです。

『プラグイン不要でFacebook OGPをコピペでサクッと設置する方法|WordPressカスタマイズ』へのコメント

  1. 名前:テンタン 投稿日:2015/06/24(水) 02:30:17 ID:43679459b

    ソースをありがとうございます。
    大変ありがたく使わせていただいたのですが、

    >がひとつ多く、ヘッダートップに
    >が表示されてしまいます。

    が22個あります。

    削除できる「>」はございますでしょうか?

    よろしくお願いいたします。

  2. 名前:テンタン 投稿日:2015/06/24(水) 02:32:25 ID:43679459b

    申し訳ありません。
    脱字がありました。

    が22個

    です。

    よろしくお願いいたします。

  3. わいひら 名前:わいひら 投稿日:2015/06/24(水) 17:42:06 ID:742957fc9

    <よりも、>が1つ多いのは以下で使われているからだと思います。

    ざっと見た感じでは、タグにおかしな部分は見当たりませんでした。
    何か他の原因などは考えられないでしょうか?
    ちょっと原因は、サイトのソースでも見てみないとわからないかもしれません。

  4. 名前:テンタン 投稿日:2015/06/25(木) 03:13:04 ID:90ec40298

    ご確認いただき誠にありがとうございます。

    確かにfacebookには正常に表示されますし、エラーも出ません。

    ヘッダーの上に「>」が表示されるのは、全ページではなく、single.phpのみでした。

    コメントいただいた「サイトのソースでも見てみないとわからないかもしれません。」のお言葉で、自分のソースを改めてみて原因がわかりました。

    「続きを読む」の次にアイコンフォントで「>>」を表示させてました。そこを普通に「>>」にしましたら、ヘッダーから表示が消えました。

    大変ありがとうございました。

    とても有益なブログの存在に感謝申し上げます。

  5. 名前:JUN 投稿日:2015/11/02(月) 14:27:13 ID:fc8354ef6

    わいひらさん、初めまして。
    Webデザイン ABCというサイトを管理してます、WebデザイナーのJUNと申します。

    最近OGPの設定を色々試し、わいひらさんのこちらの記事を参考にして、この記事、http://webdesign-abc.com/howto/ogp/ を書かせていただきました。

    間違ったことを書いていたり、不都合があれば、改変、また削除いたしますので、おっしゃっていただければありがたいです。

    あと一つ質問なのですが、Debugを実行すると、なんどやってもog:localeの部分がおかしいのですが、もし記述がおかしいようであれば教えていただきたくも思っています。

    お手数おかけしますが、よろしくお願い致します。

    JUN

  6. わいひら 名前:わいひら 投稿日:2015/11/14(土) 11:59:27 ID:a210ea93e

    返事が遅れて申しわけありません。

    記事の引用は、全然問題ありません。
    逆に、記事を紹介していただきありがとうございます。

    Debugというのは、こちらでよろしいでしょうか。
    デバッガー – 開発者向けFacebook
    このページを、上のチェッカーで確認してみると、以下のようになります。
    https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fnelog.jp%2Fwp-ogp-settings
    特に、エラーは出ていないように思うのですが、JUNさんの場合は、どのようなエラーが出ておられるのでしょうか?

  7. わいひら 名前:わいひら 投稿日:2016/06/24(金) 05:54:34 ID:742957fc9

    関連トピック。
    OGP設定についての質問です。