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];
}
ワードプレスでfunctions.phpのコードを簡単に管理できるプラグイン「Code Snippets」
ここではサムネイル画像から元の画像を呼び出して使うコードになっています。
よって、投稿記事にサムネイル画像を設定する必要があります。
ただ、投稿内容によってサムネイル画像が無い場合や、カテゴリページなどを表示する場合の為にサムネイル画像が無い場合は、最初から用意している画像を使うように設定しています。
そのためにテーマフォルダの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分程度で行える作業です。
一度、設定しておけば、あとのメンテナンスは基本いらないので一度、試してみて下さい。
コメント