無料テーマPrinciple限定でのOGP設定方法（コードあり）

スポンサーリンク
OGPをワードプレステーマに対応 SNS
2014.06.02

ワードプレスでOGP（Open Graph Protocol）を設定する際に必要なコードを書いてみました。

このサイトは無料のワードプレスSEOテーマ「Principle」を使っているのでこのテーマに沿ったコードを書いていますが基本的にはどのテーマでも同じコードで対応できると思います。

「Principle」テーマ以外をお使いの方へ

「Principle」テーマの場合は下記コードの追加で良いのですが、それ以外のテーマではイメージファイルの取得に問題がありました。

その為、「Principle」対応部分のみを掲載し直しています。

標準のテーマに対しては今後、掲載予定です。

内容は５月２８日にOGPにおける記述方法の勘違いと修正方法という記事を書いていますが、それをワードプレステーマに採用したものとなります。

なのでHTML版のOGPの記述方法についてはそちらをご覧ください。

スポンサーリンク

OGPコードの記述場所

OGPコードですが基本的にHEADタグの中の２か所を変更することで対応できます。

コードの変更を行う場合には必ずバックアップを取ってから作業を行ってください。
間違ってコードをを入れて適用してしまってもバックアップから復旧出来ます。

headタグのprefixの記述

OGPコードはサイトのトップページと記事ページで変わるという事は上記の「OGPにおける記述方法の勘違いと修正方法」で書いている通りですが、それを自動で変更させます。
変更場所は「Principle」テーマでいうと親テーマの「header.php」になります。
「header.php」を開くと次のようなコードの記述があります。

<?php if(is_front_page()){ ?>
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
<?php }else if(is_singular()){ ?>
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php }else{ ?>
	<head>
<?php } ?>

この部分を次のように変更します。

<?php if(is_front_page()){ ?>
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<?php }else if(is_singular()){ ?>
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php }else{ ?>
	<head>
<?php } ?>

このコードの説明ですが、まずは「is-front_page()」で表示するページがサイトのトップページの場合、「head prefix」以下のコードをページに吐き出すようにしています。トップページなのでOGPの設定は「website」にしています。

次に「is-singular」で表示するページが単一記事の場合、OGPの設定が「article」のコードを吐き出すように設定しています。

それ以外のページはOGPの設定を入れる必要が今のところ無いので＜head＞のみにしています。

メタコードの記述

次にメタ部分の記述ですが、もともとは次のような記述になっています。

<meta property="og:title" content="<?php if(is_front_page()){bloginfo('name');}else{the_title();} ?>" >
<meta property="og:type" content="blog" />
<meta property="og:description" content="<?php if(is_front_page()){bloginfo('description');}else{echo $description;} ?>">
<meta property="og:url" content="<?php echo home_url().$_SERVER["REQUEST_URI"]; ?>" >
<meta property="og:image" content="<?php if(!is_single()){get_myimage();}else{get_image_url(array(250,250),'e');} ?>" >
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" >
<meta property="fb:admins" content="" >

※Principleの新しいバージョンにはすでにTwitterのOGP設定は入っているようです。

この部分を次のように変更します

<!-- ogp -->
<meta property="og:title" content="<?php if(is_front_page()){bloginfo('name');}else{the_title();} ?>" >
<?php if(is_front_page()){ ?>
<meta property="og:type" content="website" />
<?php }else{ ?>
<meta property="og:type" content="article" />
<?php } ?>
<meta property="og:description" content="<?php if(is_front_page()){bloginfo('description');}else{echo $description;} ?>">
<meta property="og:url" content="<?php echo home_url().$_SERVER["REQUEST_URI"]; ?>" >
<meta property="og:image" content="<?php if(!is_single()){get_myimage();}else{get_image_url(array(250,250),'e');} ?>" >
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" >
<meta property="fb:admins" content="FacebookIDを入れて下さい" >
<meta name="twitter:site" content="@TwitterIDを入れて下さい">
<meta name="twitter:card" content="summary">
<!-- //ogp -->

この設定でトップページはOGPのtypeが「website」に、その他は「article」になるようにします。

これでワードプレステーマで自動的にOGPの設定が変わるようになりました。

最後に

このOGPの設定ですが規格自体が割と頻繁に変わっているようです。

時々、OGPのリファレンスを確認して規格に合った表示に変える必要があります。（このまま、落ち着いてくれるのが一番ですが）

OGPのリファレンスはこちら
Open Graph Reference Documentation

また、設定自体は簡単ですし、一度、設定しておけばとりあえずしばらくは有効だと思います。

是非、試して下さい。

課題としてはカテゴリページや固定ページのTYPEをどうすればいいのかが現在、悩み中です。

いい案や知恵があればお教えください。

注意：コードの追加情報

「Principle」テーマ以外をお使いの方へコードの追加情報です。

注意：下記コードはあくまで参考・暫定版です。テーマによっては使える場合と使えない場合があります。

変更点は２点です。

まずはfunction.phpに関数定義を追加します。この関数で記事内の最初の画像をイメージとして取得します。
また、トップページはプロフィール画像をイメージとして取得します。

/**** 記事の最初の画像を取得 ****/
function get_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('//i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
        $first_img = "noimages.jpg";
    }
    return $first_img;
}

このnoimages.jpgの部分に画像が無い場合に共通で表示する画像のファイル名を入れて下さい。

次にog:image部分のコードを変更します。

10行目の部分になります。

<!-- ogp -->
<meta property="og:title" content="<?php if(is_front_page()){bloginfo('name');}else{the_title();} ?>" >
<?php if(is_front_page()){ ?>
<meta property="og:type" content="website" />
<?php }else{ ?>
<meta property="og:type" content="article" />
<?php } ?>
<meta property="og:description" content="<?php if(is_front_page()){bloginfo('description');}else{echo $description;} ?>">
<meta property="og:url" content="<?php echo home_url().$_SERVER["REQUEST_URI"]; ?>" >
<meta property="og:image" content="<?php {get_that_image(array(250,250),'e');} ?>" >
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" >
<meta property="fb:admins" content="FacebookIDを入れて下さい" >
<meta name="twitter:site" content="@TwitterIDを入れて下さい">
<meta name="twitter:card" content="summary">
<!-- //ogp -->

コードの間違いについて指摘を頂きました、Nobuo(@Nobuo_Create)さんへ。ご指摘有難う御座いました。

コメント