エス技研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.

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

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

  関連記事

WordPress 任意のファイルを読み込むショートコードの処理

投稿ページにショートコードを利用して任意のファイルを読み込む処理の解説です。

WordPressのCrayon Syntax Highlighterの使い方

PHP、HTMLなどのソースコードを紹介する際に見やすく編集してくれる Crayon Syntax Highlighterの設定の方法、利用方法の解説です。

WordPressの一般設定 投稿設定 表示設定 ディスカッション メディア

基本的な設定を行う「設定」の解説です。ブログサイトを構築する際に必要な設定内容を一般設定、投稿設定、表示設定などの各項目を説明しながら設定内容を提示しています。

WordPressのスラッグとは?

WordPressのスラッグって何?それを解説している記事です。なんとなく分かっている気になっているものを改めてしっかり確認をしてみませんか?

WordPressの不正ログインを Force email loginで回避

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

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

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

WordPressのウィジェットにGoogle+ページのバッジ編集方法

Google+ページの特徴(Facebook、Mixiとの違い)や構築のメリット(Google対策)、登録、バッジの編集方法の解説。

WordPress csvインポート、エクスポートのプラグイン

WordPressから csvファイルをエクスポート、インポートする方法を紹介しています。

30分でWordPressを引越し・他のサーバに引越しや開発環境の構築手順

WordPressを他のサーバに引っ越しするとき、テスト環境を作るときなどの作業手順をまとめました。プラグインを使う方法もありますが手作業でも簡単です。

WordPressの 外観のテーマのための関数の並び順

WordPressのカスタマイズの際にテーマのテンプレートを編集しますが、そのテーマファイルの並び順の解説です。