エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


WordPressにプラグインを使わず OGP(Open Graph Protocol)の設定方法解説

      2014/10/04

WordPressに OGPのタグを記述する

 

OGP(Open Graph Protocol)とは?

 
そもそも OGPって何?ってことに関しては、下記のサイトが参考になると思います。
http://webmemo.biz/wordpress/facebook-ogp-setting-seo/
 
簡単に言うと、facebook、mixiなどの SNSでブログの記事が紹介された時に、見栄えよく紹介してもらえるように、表示してもらいたい情報にタグをつけて SNSに提供しよう、というものですね。
 
なので、情報として提供するものは、サイト名称だったり、サイトの URLだったり、説明文(description)だったりします。
 
これがなければ、facebookなどは自動的にサイトから情報を取得しますので、なくても困るということはありませんが、これをしっかり設定することでアクセスアップにつながりますので、ぜひとも設定しておきたい項目です。
 
 

OGPに使われる「fb:app_id」「fb:admins」はどう違うの?

 
若干説明の順番が前後している気もしますが、facebook用の OGPを設定する際に、「fb:app_id」「fb:admins」を設定することが求められます。
これは、facebookが OGPが設定してあるサイトの管理者と facebookのユーザをヒモ付けるためものですので、もしかしたら付けない方がいいのかもしれませんが、これを付けないと facebookのデバッガーではエラーになります。
また、これを付けていることで、facebookの「インサイト」というアクセス管理ツールを利用できるようになり、facebook上でどのように見られているかなどの情報が確認できますので、付けることによるメリットも提供されています。
 
で、OGPに使われる「fb:app_id」「fb:admins」はどう違うの?といったことについては、下記のサイトが参考になると思います。
 http://blog.sixapart.jp/2012-04/fb-app-id.html
 http://snowadays.jp/2012/09/788
 
上の方の参考サイトに書いてありますが、複数人で管理するか、一人で管理するか、で分ければいいと思います。
 
ただ、このブログでは特に複数人で管理するわけではありませんが「app_id」を利用しています。
理由は、「admins」の IDを公開したくないからです。
 
アプリを登録して「app_id」を取得しても、アプリの登録情報から管理者を探すことは可能なのですが、直接的に ID情報を提供することは避けたい、ということですね。
 
具体的な「app_id」の取得方法も上記の参考サイトを読んでいただければ問題なく取得できると思います。 
 

プラグインを使わないことで表示を速くする

 
前置きが長くなりましたが、いよいよ具体的に OGPの設定です。
 
OGPは、プラグインでも設定できますが、直接記述することで表示スピードを速くすることができますので、ここでは直接記述する方法を説明します。
 
記述の内容の説明は、最初の参考サイトをもとにしていますので、まずはそちらを一読してください。
 
また、この後編集を行うテーマのテンプレートファイルの編集方法に関しては「WordPressのテーマ管理方法とテーマのHTML編集のポイント解説」に記事を書いていますので、参考にしてください。
 
 

OGPを設定するサンプルコード

 
そして、私は下記の様にコードを編集しました。
これを編集するのは、「外観」-「テーマ編集」の「ヘッダー(header.php)」のファイルです。
また、編集場所は「<head>」~「</head>」の間にあれば問題ありませんが、分かりやすいように「</head>」の直前などに編集しておきましょう。
 
——————————-

——————————-
 
上記のソースコードは、参考にしたサイトから下記の場所を修正している、もしくは、修正する必要がある個所の説明です。
 
※2行目の「fb:app_id」の値(”***************”)は、自身で取得したアプリ IDを編集してください。この値は全ページで同じです。
 私は「app_id」を取得して利用していますが、「admins」を利用する方は「app_id」を「admins」に変更し、adminsの値を編集してください。
 
※5行目~ 11行目の「og:type」ですが、トップページは「website」、下層ページは「article」とする決まりになっていますので、そのように処理を記述しています。
 (かつては、ブログを表す「blog」があったようですが、現在はすべて「website」にするように指示されています。また、「blog」と書いても「website」として処理されるようです。)
 
※16行目は、「og:description」の値を編集する箇所ですが、私は「All in One SEO Pack」ではなく「Meta Manager」を利用していますので、「_aioseop_description」の部分は「_description」に変更しています。
 
※37行目、40行目の「og:image」は、画像が編集されていない場合に表示させる代替画像の URLになりますので、それを自身のものに変更してください。
 画像は、「メディア」からアップしています。
 
 

上記のサンプルコードの注意点

 
上記のサンプルコードでは、投稿ページ、固定ページはオリジナルの情報が提供されますが、カテゴリページ、アーカイブページはトップページと同じ情報になっています。
 
せめて、カテゴリページだけはオリジナルの内容にしたいと思って変更にチャレンジしてみましたが、時間の都合などもありまして現在は対応ができていません。
 
将来的には変更しようと思っていますので、対応した時はまた改めて報告いたします。

 - WordPress

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

PoeditでWordPressの日本語対応方法。英語プラグインの日本語翻訳ファイル作成

プラグインの日本語化の手順のまとめ。.pot、.po、.moファイルの解説や便利ツールの Poeditの紹介を行いつつ、手順、ファイル設置場所、注意ポイントなども紹介。

WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーとは?

WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーの基本的な内容を解説。お薦めのプラグインと編集方法も解説しサンプルソースなども紹介。

WordPress投稿にPHPを記述するショートコードの使い方add_shortcode

WordPressの投稿ページで PHPの処理を行うには add_shortcode関数を使ったショートコードという機能を利用します。

カスタムタクソノミーのターム一覧をウィジェットにショートコードで編集

カスタムタクソノミーに属するターム(カテゴリ)の一覧を wp_list_categories()関数+ショートコードでウィジェットに編集するサンプルプログラムです。

BizVektor環境の引越しでメニュー、バナーが消える不具合の対応方法解説

BizVektor環境の引越し方法と不具合が発生しやすい箇所の解説です。引っ越し作業をする際にURLやファイルのパスを置換する際の手順解説と対応方法についての解説です。

SMTP Mailerでスパム判定回避。WP Mail SMTPで発生する送信エラーも対応
SMTP Mailerでスパム判定回避。WP Mail SMTPで発生する送信エラーも対応

WordPressからのメールをスパム判定されずに送信する「SMTP Mailer」の解説。SMTP MailerはPHP 5.6、7.0になってもSMTP接続でエラーにならない設定を搭載しているのが特徴。

WordPressの送信メールが協定世界時(UTC・グリニッジ標準時)の問題対応

WordPressから送信されてくるメールが9時間ずれている。その不具合の解消方法と根本原因の解説です。date_default_timezone_set();の設定を変更で対応できます。

WordPressに Favicon(ファビコン)を設定する(プラグイン必要なし)

WordPressに Favicon(ファビコン)をプラグインなしで設定する方法をサンプルソース付きで説明します。

WordPressで使うおススメ FTP、テキストエディタ、圧縮解凍ソフト

WordPressサイトを構築、運用するために必要となるFTPソフト、テキストエディタ、圧縮解凍ソフトのオススメソフトを紹介。

Edit Author Slugで WordPressの不正ログイン・不正アクセスを回避

WordPressのセキュリティ強化に Edit Author Slugを使う理由と設定方法の解説をしています。