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

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

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

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

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

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

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

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

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

OGPコードの記述場所

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

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

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のリファレンスを確認して規格に合った表示に変える必要があります。(このまま、落ち着いてくれるのが一番ですが)

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

是非、試して下さい。

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

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

注意:コードの追加情報

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

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

変更点は2点です。

まずは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)さんへ。ご指摘有難う御座いました。

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

あなたのサイトは大丈夫ですか?「Pingback」機能が悪用されているかも?
Ping送信管理プラグイン「WordPress Ping Optimizer」で送信エラーをチェック
Google+でウェブサイト用にページを追加する方法(ワードプレスとの連携を踏まえて)
いろんな用途が見込めるフリーのアイコン集(PSDファイルでダウンロード出来るよ)
bitnamiで作ったワードプレスのテスト環境を英語から日本語環境に変更する方法
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
ワードプレスの投稿記事を簡単に一括削除する3つの方法
本当に必要?ワードプレスでのピンバック(PingBack)を止める方法
MySQLデータベースを使用しないでワードプレスを構築する方法
ワードプレスデータをMovable Type(MT)や無料ブログにインポート(移行)する方法
Twitterのフォロワー数推移を見るためのツールまとめ
サイトの動きが重たい時に調査する方法-ワードプレス限定
Bootstrapを採用しているhtmlテンプレート&テーマ
初心者でも出来るPCにWordPress環境を簡単に構築する方法
ワードプレスとGoogle+を連携させるプラグイン「JetPack」の設定方法

Menu

HOME

 TOP