【保存版】All In One SEO Packを使ってFacebook OGPを設定する方法

スポンサーリンク

サイトやブログを運営している方は、今や必ず意識しておかないといけないレベルとなった、FacebookへのOGP(Open Graph Protocol)設定。

私は今までなんとなくしか設定していなくて、意識して設定していませんでした。Jetpackというプラグインがあり、それを使うと簡単にOGPの設定ができるからです。

ただ、Jetpackだけだと細かいところに気が利かないので、この際プラグインを使わずにOGPを設定することにしました。

プラグインを使わないと言っていますが、ウソです。All In One SEO Packというプラグインと連携させて、独自でOGPを設定する方法を紹介します。

 

All In One SEO Packの仕組みを理解する

All In One SEO Packプラグインを導入すると、記事を投稿するときに以下のような画面がでてきます。

All In One SEO Pack投稿時

上から「検索エンジンに表示されるタイトル」「META Description」「META Keyword」です。

これら3つはそれぞれカスタムフィールドとなっています。

カスタムフィールド名は以下のとおりです。

・Title → _aioseop_title
・Description → _aioseop_description
・Keywords → _aioseop_keywords

頭に「_aioseop_」が付く形なので覚えやすいですね。

このカスタムフィールドはあとで使いますので、頭の片隅に置いていてくださいね。 

 

Jetpackプラグインを使っている場合は、OGP設定を削除する

ここからが設定の話となります。

もし、Jetpackプラグインを使っているのであれば、functions.phpに以下のコードを書いて、JetpackでOGPが動かないようにしておきましょう。

remove_action('wp_head','jetpack_og_tags');

このコードを書くだけでJetpackからOGPのコードが書かれることはなくなります。

 

header.phpにOGPを設定するコードを入れる

次は独自でOGPのコードを設定します。以下にサンプルのコードを載せますが、使うサイトによって、若干異なります。

<meta property="fb:app_id" content="119933094859360">
<meta property="og:locale" content="ja_JP">
<?php if (is_home()){ ?>
<meta property="og:type" content="blog">
<?php }else{ ?>
<meta property="og:type" content="article">
<?php } ?>
<?php
if (is_single()){
     if(have_posts()): while(have_posts()): the_post();
     	if( get_post_meta($post->ID, _aioseop_description, true) != "" ){
	     	echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">'."n";
     	}else{
	     	echo '<meta property="og:description" content="'.strip_tags( get_the_excerpt() ).'">'."n";
     	}
          
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">'."n";
     echo '<meta property="og:url" content="'; the_permalink(); echo '">'."n";
} else {
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">'."n";
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">'."n";
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '">'."n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?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].'">'."n";
	} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
	     echo '<meta property="og:image" content="'.$imgurl[2].'">'."n";
	} else {
	     echo '<meta property="og:image" content="http://footlight.biz/wp-content/uploads/2013/04/vi_512sq.png">'."n";
	}
} else {
     echo '<meta property="og:image" content="http://footlight.biz/wp-content/uploads/2013/04/vi_512sq.png">'."n";
}
?>

このコードの大半は「あかめ女子のwebメモ」というサイトを参考にさせていただきました。ありがとうございます!

[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ

ただ、上記で紹介されているコードだと不完全なので、完全版をここでは紹介しています。

独自で変更しないといけないところは1行目の「fb:app_id」の「content=”119933094859360″」となっている数字のところです。これは自分で取得したFacebookアプリのIDを設定してください。

次は4行目の「content=”blog”」です。設定しようとしているのがブログであれば変更する必要はありませんが、普通のサイトの場合は「content=”website”」にする必要があります。

3行目でif文を書いているのは「content=”blog”」「content=”website”」を設定できるのはトップページだけだからです。その他のページは「content=”article”」とする必要があります(6行目)。

参考ページがこちら。

OGPのog:typeでwebsiteやblogを設定するときの注意点とPHPでの振り分け方法 | Cappee Design

11〜15行目。記事内にAll In One SEO PackでMETA Descriptionが設定されている場合は、その内容をog:descriptionに設定します。META Descriptionが空白の場合は、記事に一部を抜粋して表示しています。

あと、下の方にある「http://footlight.biz/wp-content/uploads/2013/04/vi_512sq.png」はサイトのアイコンです。これも自分のサイトやブログに合わせて変更するようにしましょう。記事にアイキャッチ画像がない場合に表示されます。

自分で設定できるとプラグイン不要

以上でOGPの設定が完了となります。プラグインを使わずともOGPを設定できるので、できるのであればやっておいた方がいいですよ。プラグインを使うとその分どうしてもファイルが多くなるので、重くなってしまいます。