WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

WordPressテーマ「STINGER3」にプラグインなしでOGPを設定するカスタマイズ

      2016/01/22

STINGER3

出典:http://stinger3.com/

FacebookなどのSNSで「いいね!」された際などに、タイムラインに投稿される形式の共通仕様を「OGP(Open Graph Protocol)」という。

以前、その「OGP(Open Graph Protocol)」を簡単に設定できるプラグイン「Open Graph Pro」を使用して、OGPを出力する方法を紹介しました。

以前の記事はこちら⇒WordPressプラグイン「Open Graph Pro」でOGP対応

今回は、プラグインを使用せずに、テーマをカスタマイズして、OGPを出力するようにしたいと思います。

使用しているテーマは、検索エンジン最適化(SEO)に強いと言われている「STINGER3」です。

自分でOGPを設定するメリットは、自分の思い通りに出力させることができるし、プラグインに頼らないことで、プラグインの読込などの無駄な処理を行わなくなるので、少しは画面の表示速度も速くなるといったところです。

また、Facebook公式プラグインなどのFacebook連携プラグインのOGPは、出力されるタグが少しおかしかったり、複数のプラグインで重複してOGPが出力されたりもするので、自分でOGPを設定する方が良いのかなと思います。

なお、今回のバージョンは以下です。

  • WordPress 3.9.2
  • STINGER3_ver20140327

スポンサード リンク

OGPの設定

自分でOGPを設定するにあたって、ゆめぴょんの知恵さんの記事を参考にさせていただきました。

編集するのは、ヘッダーファイルの「header.php」。

まずは、「html」タグに次のように追記する。

「STINGER3」は、HTML5ではないので、以下の記述でよい。

HTML5で作られているテーマの場合は、「head」タグに次のように追記する。

HTML5かどうかの判断は、HTMLソースコードの一番上の宣言部分に「<!DOCTYPE html>」の記述があれば、HTML5らしい。

続いて、「head」タグ内に次のように追記する。

少し変更したところは、投稿記事と固定ページの場合にそのページ情報をOGPに設定するようにし、アイキャッチが設定されていない場合は、投稿内の画像を探さずに、固定の画像を設定するようにした。

FacebookアプリID(fb:app_id)の取得方法は、こちらの記事を参照してください。

Facebook開発者登録とページ投稿・OGP用Facebookアプリの作り方

FacebookユーザーID(fb:admins)の確認方法は、「https://graph.facebook.com/自分のユーザーネーム(ユニニークURL)」へアクセスし、表示されたIDがFacebookユーザーIDです。

FacebookユーザーID(fb:admins)は、個人情報になるので、設定したくなかったら行を削除してください。

各プラグインのOGP出力をオフにする

自分でテーマにOGPを設定した場合は、各プラグインで自動出力されるOGPがあると、重複して出力され、思い通りの結果にならない可能性がある。

なので、各プラグインのOGP出力をオフにする必要がある。

Facebook公式プラグインの場合

設定項目でオフにすることはできないので、テーマのための関数(functions.php)に以下のように記述し、フィルターを追加することで、OGPを出力しないようにする。

「Jetpack」の場合

こちらも同様に、設定項目でオフにすることはできないので、テーマのための関数(functions.php)に以下のように記述し、フィルターを追加することで、OGPを出力しないようにする。

以上です。

参考サイト

【ブログ術】FacebookのOGP設定をプラグインなしで設置する方法 – ゆめぴょんの知恵
ウェブサイトが HTML5 で記述されているか簡単に見分ける – Google Chrome の HTML5 markup detector, Firefox の Html Validator | すぐに忘れる脳みそのためのメモ

 - STINGER3