エス技研WordPress専科

WordPressの基本的な使い方から SEOの対応、プラグイン情報、カスタマイズ方法を解説します。


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 the CAPTCHA.

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

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

  関連記事

FC2からWordPressに引越でcanonicalとmeta refreshで転送設定

FC2からWordPressに引越する際の転送設定はcanonicalとmeta refreshの設定でユーザへもGoogle検索エンジンにも引越し情報を伝えられます。

WordPress初心者向け フォルダ構成・データベース構成解説

BackWPupその11。バックアップを取るために必要なファイル、データベースの解説をします。

Export to Textで WordPressを csv出力

WordPressのデータを csv出力する Export to Textの使い方を解説しています。

WordPress管理画面のメニューに項目を追加する方法解説

WordPressの管理画面のメニューに項目を追加する方法をサンプルソースを交えて解説します。

WordPressの画像ファイルアップロード・メディアの使い方解説

画像ファイルをアップロードするメディアの使い方解説。アップロードしたファイルの管理や編集、ファイルのURL、アップロード先の解説。

WordPress初心者向け講座・詳細解説データベースとは何か?

データベースとは何か?を言葉の意味の説明なども含めエクセルと比較しながら説明しています。

WordPressのウィジェットでショートコードを使う方法add_filter

WordPressのウィジェットでショートコードを利用するには add_filter、do_shortcodeの関数を利用する必要があります。

BackWPupでバックアップ・機能の基本設定 Settings

BackWPupその5。バックアップ設定のベースになるBackWPup自体の設定解説です。

Better Delete Revisionを使って WordPressのリビジョンを削除する方法

自動的に溜まるリビジョンは Better Delete Revisionを使うことで簡単に削除することが出来ます。表示の重さを軽減したり、バックアップファイルのスリム化に貢献します。

WordPress 画面が真っ白になる不具合があった場合の対応の一つ

WordPressで画面が真っ白になる不具合があった場合の対応方法の説明です。PHPでエラーが起こっている場合がほとんどですがその対処方法です。