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

2014/02/03 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>」の直前などに編集しておきましょう。
　
——————————-

<!-- ここからOGP -->
<meta property="fb:app_id" content="***************" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">

<?php
if (is_front_page()){ //トップページ判定
    echo '<meta property="og:type" content="website">';
} else {
    echo '<meta property="og:type" content="article">';
}
?>

<?php
if (is_single()){//単一記事ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'. get_post_meta($post->ID, _description, true).'">';echo "\n";//抜粋を表示
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
     echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
     echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
     echo '<meta property="og:image" content="http://xxxx.xxx/wp-content/uploads/xxxx/xx/ogp.gif">';echo "\n";
}
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
     echo '<meta property="og:image" content="http://xxxx.xxx/wp-content/uploads/xxxx/xx/ogp.gif">';echo "\n";
}
?>
<!-- ここまでOGP -->

<?php

if (is_front_page()){ //トップページ判定

echo '<meta property="og:type" content="website">';

} else {

echo '<meta property="og:type" content="article">';

}

<?php

if (is_single()){//単一記事ページの場合

if(have_posts()): while(have_posts()): the_post();

echo '<meta property="og:description" content="'. get_post_meta($post->ID, _description, true).'">';echo "\n";//抜粋を表示

endwhile; endif;

echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示

echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示

} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）

echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示

echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示

echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示

}

<?php

$str = $post->post_content;

$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる

if (is_single()){//単一記事ページの場合

if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理

$image_id = get_post_thumbnail_id();

$image = wp_get_attachment_image_src( $image_id, 'full');

echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";

} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理

echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";

} else {//投稿にサムネイルも画像も無い場合の処理

echo '<meta property="og:image" content="http://xxxx.xxx/wp-content/uploads/xxxx/xx/ogp.gif">';echo "\n";

}

} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）

echo '<meta property="og:image" content="http://xxxx.xxx/wp-content/uploads/xxxx/xx/ogp.gif">';echo "\n";

}

——————————-
　
上記のソースコードは、参考にしたサイトから下記の場所を修正している、もしくは、修正する必要がある個所の説明です。
　
※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の基本設定

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

Message コメントをキャンセル

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

: WordPressのログイン画面 URLを変更する　管理画面に Basic認証を設定する

ログインURLは誰でも知っています。そのまま使うとリスクが高まりますのでログインURLを変更し Basic認証で二重チェックをする方法を解説。

: WordPress投稿テキストを検索・置換するSearch Regexの使い方解説

WordPressの投稿テキストを検索、置換するプラグイン Search Regexの使い方の詳細解説です。

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

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

: WordPressのプラグイン WP-DBMANAGERを使って PHP、CakePHP、baserCMSなどで作った Webサービスのデータベースも自動バックアップ

WP-DBMANAGERを使って WordPress以外の PHP、CakePHP、baserCMSなどで作った Webサービスのデータベースも自動バックアップする方法を解説。

: WordPressのサイトマップ生成ツールPS Auto Sitemapの使い方

サイトマップを PS Auto Sitemapで自動生成する方法を説明します。このプラグインは Google用のサイトマップではなく一般ユーザが見るためのサイトマップページを作ります。

: WordPressのユーザ名を後から変更する方法。adminの使用は危険。

運用中のユーザ名を変更する方法を解説。かつてのデフォルト設定だった「admin」は誰もが使うIDのため非常に危険です。今からでも変更しましょう。

: WordPressのPing・更新情報サービス設定方法とPingサーバ

WordPressのPing機能、更新情報サービスの設定方法の解説と Pingサーバのリストを提供しています。

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

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

: WordPressのコメントスパム対策 3つのプラグイン

対策なしではコメントスパムがやってきます。その対策方針としてプラグインを提示しながら解説します。いずれかの対策は必須です。

: WordPressのインストール方法・セキュリティ重視 3つのポイント

WordPressのインストールをセキュリティ重視の視点から3つのポイントの解説と設定方法です。

PREV: WordPressの不正ログインを Force email loginで回避
NEXT: WordPressに Favicon（ファビコン）を設定する（プラグイン必要なし）

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28

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

WordPressに OGPのタグを記述する

OGP（Open Graph Protocol）とは？

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

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

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

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

GoogleAdwords

GoogleAdwords

Message コメントをキャンセル

関連記事

WordPressのログイン画面 URLを変更する　管理画面に Basic認証を設定する

WordPress投稿テキストを検索・置換するSearch Regexの使い方解説

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

WordPressのプラグイン WP-DBMANAGERを使って PHP、CakePHP、baserCMSなどで作った Webサービスのデータベースも自動バックアップ

WordPressのサイトマップ生成ツールPS Auto Sitemapの使い方

WordPressのユーザ名を後から変更する方法。adminの使用は危険。

WordPressのPing・更新情報サービス設定方法とPingサーバ

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

WordPressのコメントスパム対策 3つのプラグイン

WordPressのインストール方法・セキュリティ重視 3つのポイント

カスタムフィールド決定版！Advanced Custom Fields全項目完全解説・管理画面編

Advanced Custom Fieldsの全項目解説・公開側表示編集編

WordPressプラグイン開発・ショートコード内でincludeするときにはob_start、ob_get_contents

超簡単！Custom Field Templateでカスタムフィールドをフル活用

BackWPupでバックアップ・リストア（復元）の具体的手順