[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

  • あとで読みたい人は…

こんにちは、@cappeeです。

WordPressで作ったブログにOGPを設定しようとしたところ、つまづいたのでメモしておきます。

「Open Graph Pro」プラグインを入れてみた

FacebookのOGPを設定するプラグインとして「Open Graph Pro」の評価が高かったので導入してみました。

デバッガーで確認したところ、ページによってIDが認識されなかったり、descriptionが表示されなかったりと結構不具合が。。

といっても便利なプラグインなことに間違いないので、もしphpファイルを直接触るのに抵抗があるという方は「Open Graph Pro」よりインストールしてください。

インストール方法はこちらが参考になります。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

Facebookからの流入を増やしたい時、OGPの設定は絶対必要!

上記の記事を書いた方も後々不具合に気づいたようです。
Facebook OGP向けプラグイン「Open Graph Pro」を外した理由

プラグインなしでFacebookのOGPを設定することに

プラグインなしでFacebookのOGPを設定するには、下記が参考にしました。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由

個人的に並び方を整理したのと、app_idも追加したのでそのコードも載せておきます。

<!-- ここからOGP -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_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を表示
}
$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://cappee.net/wp/wp-content/uploads/IMG_0117.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="http://cappee.net/wp/wp-content/uploads/IMG_0117.jpgg">';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="管理者ID">
<meta property="fb:app_id" content="アプリID">
<!-- ここまでOGP -->

ソーシャルボタンの設置方法などはこちらをご覧ください。
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正]

管理者IDとアプリIDの取得に関してはこちらをどうぞ。

 [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

Pocket
article clipper [WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

6 thoughts on “[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし

  1. Pingback: WordPress Facebook 関連プラグインの比較

  2. Pingback: SEOに強いサイトを作成する!やること+WordPressプラグイン30選 | Make & Nature | iPhoneアプリ開発者ハッピーブログ

  3. Pingback: TwitterCardsがWordPressで表示されたり、されなかったりする場合の対処法 | ガジェとろ

  4. Pingback: 更新通知を画像付きでツイートするようにした

  5. Pingback: 【Wordpress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった

  6. Pingback: 記事本文でカスタマイズしたい項目一覧 | step by step

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>