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>」の直前などに編集しておきましょう。
——————————-
[php]
‘;
} else {
echo ‘‘;
}
?>
ID, _description, true).'”>’;echo “\n”;//抜粋を表示
endwhile; endif;
echo ‘‘;echo “\n”;//単一記事タイトルを表示
echo ‘‘;echo “\n”;//単一記事URLを表示
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
echo ‘‘;echo “\n”;//「一般設定」管理画面で指定したブログの説明文を表示
echo ‘‘;echo “\n”;//「一般設定」管理画面で指定したブログのタイトルを表示
echo ‘‘;echo “\n”;//「一般設定」管理画面で指定したブログのURLを表示
}
?>
post_content;
$searchPattern = ‘/
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, ‘full’);
echo ‘‘;echo “\n”;
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo ‘‘;echo “\n”;
} else {//投稿にサムネイルも画像も無い場合の処理
echo ‘‘;echo “\n”;
}
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
echo ‘‘;echo “\n”;
}
?>
[/php]
——————————-
上記のソースコードは、参考にしたサイトから下記の場所を修正している、もしくは、修正する必要がある個所の説明です。
※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のテーマ管理方法とテーマのHTML編集のポイント解説
テーマ変更で無限の可能性！テーマの選び方と設定方法、デザイン修正のためのHTML修正のポイントを解説。
-
-
WordPressのサイドバー（サイドナビ）はウィジェットで編集
サイドバー（サイドナビ）を編集するウィジェットの利用方法の解説です。カテゴリ一覧、アーカイブ、リンク集などを設定する方法を解説しています。
-
-
Meta ManagerでWordPressのキーワード、ディスクリプションを編集
WordPressの基本機能にないキーワード、ディスクリプションを編集するプラグインMeta Managerの解説です。
-
-
WordPressの高速化でSEO対策！広告費も削減！高速化の施策のまとめ
WordPressを高速化するためのまとめ記事。これまで多様な高速化の対応を行ってきましたが、それを具体的に何をすればいいかが一目でわかるようまとめ記事にしました。
-
-
WordPressのウィジェットにGoogle+ページのバッジ編集方法
Google+ページの特徴（Facebook、Mixiとの違い）や構築のメリット（Google対策）、登録、バッジの編集方法の解説。
-
-
テキストエディタ秀丸で正規表現による置換の方法の解説
秀丸で正規表現による置換を行うポイントを紹介。置換をしながら特定のキーワードは置換せずに置換結果に残す方法を実例を上げながら解説しています。
-
-
WordPressは危険？最新バージョンにアップデートして利用しよう
WordPress最新バージョン使ってますか？WordPressのバージョンアップをしないリスクを説明し、バージョンアップの手順、バックアップの重要性を解説しています。
-
-
実測比較・レンタルサーバスピード選手権！WordPressが速いのは？
WordPressが一番速く動くレンタルサーバはどれだ！実際にこのエス技研ブログをコピーして8つのサーバを比較。結果はヘテムル、X10、さくらプレミアムが同レベルで優秀。
-
-
WordPressグローバルナビ・メニューの編集の方法解説
グローバルナビであるメニューの編集方法の解説です。メニューの管理画面の使い方の解説と設定のポイント、テーマによって設定する項目が違う点などを解説します。
-
-
WordPressの管理画面ログインURLファイルにBasic認証を設定する方法解説
管理画面のログインURLにBasic認証を追加することでさらなる極めて高いセキュリティ向上の方法を解説します。