ワードプレスのテーマにOGP(Open Graph Protocol)を簡単に対応させる方法

OGPとは

OGPとは「Open Graph Protocol」の略語でいろんなSNSで使われる共通仕様の事です。
ほぼ、共通で使えるのですが、FaceBookとTwitterは専用のタグがあります。
今回はそんなOGPをワードプレステーマで対応させるためのコードを紹介します。

OGPについての説明とサイト対応についてはこちらから

用意するもの

先程も述べましたが、OGPには共通仕様の部分と、FaceBook用、Twitter用のタグがあります。
そのタグを完成させるためにそれぞれのSNSのIDを取得する必要があります。
FaceBook非対応、TwitterCard非対応でいいのであればこの章は飛ばして下さい。
また、表示用の画像を取得する必要があるので、function.phpにOGP用イメージ取得用のコードを追加します。

FaceBookのID取得

FaceBookのID取得については以前、書いた記事があるのでそちらを確認してください。

こちらの方法でIDを取得しておいて下さい。

TwitterのID取得と対応手順

TwitterのIDはTwitterのユーザー名になります。
このサイトであれば@seiji_webcreateがIDですね。

OGP用イメージの準備

OGP用の画像イメージを取得するためにfunction.phpに次のコードを追加します。

// OGP用イメージURL取得
function get_featured_image_url() { 
    $image_id = get_post_thumbnail_id();
    $image_url = wp_get_attachment_image_src($image_id,'large', true); 
    echo $image_url[0]; 
}

ここではサムネイル画像から元の画像を呼び出して使うコードになっています。
よって、投稿記事にサムネイル画像を設定する必要があります。
ただ、投稿内容によってサムネイル画像が無い場合や、カテゴリページなどを表示する場合の為にサムネイル画像が無い場合は、最初から用意している画像を使うように設定しています。
そのためにテーマフォルダのimagesフォルダにnoimage.jpgの名前でヘッダ画像やサイトの代表的な画像を入れておいて下さい。

テーマにコードを反映

headタグの変更

テーマのヘッダ部分に<head>の記述があると思います。
そのを次のコードとそっくり入れ替えて下さい。

<?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{ ?>
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php } ?>

ここではサイトのトップページであれば、

website: http://ogp.me/ns/website#

投稿記事や、固定記事であれば

article: http://ogp.me/ns/article#

が表示されるようにしています。

取得IDの挿入

次にmetaコードにFaceBookIDやTwitterのユーザー名を挿入します。
次のコードのFacebookIDを挿入の部分にFacebookIDを、@TwitterIDを挿入の部分にTwitterのアカウントを挿入します。
Twitterのアカウントの頭には@を付けておいて下さい。
また、FaceBook、TwitterCardを使わない場合は、ID挿入部分を、content=””という風に空欄にしておいて下さい。

<!-- ogp -->
<meta property="fb:app_id" content=" FacebookIDを挿入">
<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:url" content="<?php echo home_url().$_SERVER["REQUEST_URI"]; ?>" >
<meta property="og:title" content="<?php if(is_front_page()){bloginfo('name');}else{the_title();} ?>" >
<meta property="og:image" content="<?php get_featured_image_url(); ?>">
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/noimage.jpg">
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" >
<meta property="og:description" content="<?php if(is_front_page()){bloginfo('description');}else{echo $description;} ?>">
<!-- //ogp -->
<!-- twitter card -->
<meta name="twitter:site" content="@TwitterIDを挿入">
<meta name="twitter:creator" content="@TwitterIDを挿入">
<meta name="twitter:card" content="summary">
<meta name="twitter: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 name="twitter:image:src" content="<?php get_featured_image_url(); ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/noimage.gif" />
<?php } ?>
<!-- //twitter card -->

metaコードの挿入

次にmetaコードの挿入です。
ヘッダを構成しているheader.phpを管理画面の外観⇒テーマの編集を開いて探し出し、の~の間の任意の場所に先程、作成したコードを挿入します。
挿入場所がいまいち判らないという場合は、<title>の下、もしくは<meta name=”discription”>の下に入れておけば問題ないと思います。
コード挿入位置

動作チェック

上記設定を終えたら、動作チェックをしてみましょう。

TwitterCardの設定確認

以前、TwitterCardのコード反映確認、及び申請を説明している記事があるのでそちらをご覧ください。

TwitterCard申請後に設定の確認をしてみましょう。

Twitterのタイムラインを確認していて概要が表示されていれば設定が反映されています。

FaceBookの設定確認

ファイスブックの確認ですが、投稿記事のFaceBookのいいねをクリックして記事をシェアすると、FaceBookページに表示されると思います。
表示されない場合は少し時間をおいてみてみて下さい。
されでも表示されない場合は設定が間違っている可能性があるので抜けが無いか、間違いがないか確認してみてくだ愛。

まとめ

難しいと思われているワードプレステーマへのOGPの設定ですが、手順通りに行えば、10分程度で行える作業です。
一度、設定しておけば、あとのメンテナンスは基本いらないので一度、試してみて下さい。

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

コメントを残す




関連記事

ワードプレステーマを変更せずにCSSを追加・管理する方法
bitnamiで作ったワードプレスのテスト環境を英語から日本語環境に変更する方法
無料テーマPrinciple限定でのOGP設定方法(コードあり)
あなたのサイトは大丈夫ですか?「Pingback」機能が悪用されているかも?
Ping送信管理プラグイン「WordPress Ping Optimizer」で送信エラーをチェック
Jetpackで自動に生成されるOGPタグを削除する方法
htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
CSVデータインポート時に体験した注意点やインポートエラーの解決方法
ワードプレスの投稿記事を簡単に一括削除する3つの方法
MySQLデータベースを使用しないでワードプレスを構築する方法
ワードプレスでfunctions.phpのコードを簡単に管理できるプラグイン「Code Snippets」
過去の投稿記事をTwitterで自動再ツイートするプラグイン・Tweetily
ワードプレスの定番プラグイン「Jetpack」の使える便利な機能、5つをピックアップ!
サイトの動きが重たい時に調査する方法-ワードプレス限定
ワードプレスでヒートマップ解析を簡単に行えるツール「User Heat」

Menu

HOME

 TOP