WordPressでOGPを設定するソースコードと注意するポイント

バイラルメディアを始めSNSでの拡散も戦略にするサイトにとってOGP(Open Graph Protocol)。今回はWordPressにおけるOGP設定方法と設定にあたり注意するべきポイントをまとめます。

WordPressにOGPを設定するソースコード

テーマやプラグインでOGPの設定を行わない場合はheader.phpを修正します。

まずはheadタグを下記に修正。細かい理由は置いといて、これをやっておくとFacebookでシェアした時にリッチコンテンツなるとかどうとか。

次にheader.phpの「< php wp_head(); >」前に書きをコピペします。

fb:app_idは最悪削除しちゃっても問題ありませんが、自分のFacebookアカウントのプロフィール画像のリンクの「00000000000000&type=3&theater」の「00000000000000」部分の数字を設定しておかないとリッチコンテンツにならないとかどうとか。

SimplicityやXeoryはOGP設定が組み込まれたテーマ

無料の人気テーマでもあるSimplicityXeoryは、テーマのPHPをいじらずともWordPress管理画面の操作からOGPが設定できます。詳しくは各テーマの公式サイトを確認してください。

プラグイン「All In One SEO Pack」からもOGP設定が可能

定番のSEO対策プラグイン「All In One SEO Pack」の「Feature Manager」から「Social Meta」をONにすることでOGPの設定が可能です。ですが全文英語という点と、ちょっと挙動があやしい点から自分は使いません。

OGPの重複に注意

上記のOGP設定組込型テーマに「All In One SEO Pack」の「Social Meta」がONの状態だとヘッダーの中にOGPが複数ある状態になります。HTMLの性質上、下にある記述がおかしいと正常にSNSに反映されません。OGPの設定は一箇所だけ。不要な記述は削除しましょう。

JetpackのOGPを消す

またプラグイン「Jetpack」を利用してSNSへ自動投稿を行っている場合は、プラグインの仕様でJetpackのOGPが勝手に挿入されます。なので、functions.phpに下記を追記してJetpackのOGPを削除。

fb:app_idで個人情報だだ漏れ

Facebookのリッチコンテンツ用に設定が必要なfb:app_idですが、そのままではソースコードから丸見えでFacebookの名前や職場などの個人情報がバレてしまい、サイト運営者と紐付けられます。「https://www.facebook.com/0000000000000」のようにFacebookのURLの後ろにfb:app_idをつけると個人のページに飛びます。

これじゃ困るので、Facebookログイン→設定→プライバシーから設定を変更します。

  • 私のコンテンツを見ることができる人→友人
  • 私を検索できる人→「外部検索エンジンから私のタイムラインへのリンク」のチェックを外す

これで「https://www.facebook.com/0000000000000」といったURLから身バレすることはありません。

いいね!のお慈悲を…

この記事が良かったらシェアをお願いしゃっす!

記事の感想はこちら