【WordPress】Stinger3にFacebookのOGP設定をしたよ。

当ブログもたまにツイッターでシェアしてくれたり、フェイスブックでいいね！してくれたりする記事があるので、せっかくシェアされたチャンスをもっと活かせるようにきちんと設定をしておくことにしました。
まずはフェイスブックのOGP設定をしましたので、Stinger3でフェイスブックのOGP設定をする方法としてまとめておきたいと思います。
OGP設定ってなによ？って方はここらへんが参考になるかと。

事前準備
最終的にはき出したいOGP用のHTMLコードは以下です。
上記のコードをWordPressに吐き出させるためのコードが以下です。
コードの解説
正しく設置できているか確認

事前準備

テンプレートのカスタマイズをするので、Stinger3の子テーマを作成しておきます。（今回カスタマイズするのは、header.phpのみです。）
フェイスブックのアカウントが必須ですので、持ってない方は登録します。
fb:app_idを使う場合はapp_idの登録もします。

最終的にはき出したいOGP用のHTMLコードは以下です。

投稿・固定ページ用

<meta property="og:title" content="【ページタイトル】">
<meta property="og:type" content="article">
<meta property="og:url" content="【ページのURL】">
<meta property="og:image" content="【アイキャッチ画像（ない場合の設定も一応）】">
<meta property="og:description" content="【ページの説明文】">
<meta property="og:site_name" content="【ブログ名】">
<meta property="fb:app_id" content="【FacebookのAPP ID】">

アーカイブページ用

<meta property="og:title" content="【ページタイトル】">
<meta property="og:type" content="article">
<meta property="og:url" content="【ページのURL】">
<meta property="og:image" content="【アーカイブ用の画像】">
<meta property="og:description" content="【アーカイブの説明文】">
<meta property="og:site_name" content="【ブログ名】">
<meta property="fb:app_id" content="【FacebookのAPP ID】">

トップページ用

<meta property="og:title" content="【ブログ名】">
<meta property="og:type" content="blog">
<meta property="og:url" content="【サイトのURL】">
<meta property="og:image" content="【トップページ用の画像】">
<meta property="og:description" content="【ブログの説明文】">
<meta property="og:site_name" content="【サイトタイトル】">
<meta property="fb:app_id" content="【FacebookのAPP ID">

上記のコードをWordPressに吐き出させるためのコードが以下です。

まず、header.phpの先頭の

<?php language_attributes(); ?>

を、以下に書き換えます。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#">

さらにちょっと長いですが、以下のコードを、header.phpの<head>セクションに追記します。
このコードは、Electric Fruits（エレクトリック・フルーツ）さんの記事で公開されていたものをちょっとカスタマイズさせていただきました。
【Wordpress】プラグインを使わずにOGPを設定する方法 – WEBサイト制作のElectric Fruits

<!--//OGP設定ここから-->
<?php if(is_single() || is_page()):// for single page ogp ?>
<meta property="og:title" content="<?php wp_title(''); ?>">
<meta property="og:type" content="<?php echo 'article'; ?>">
<meta property="og:url" content="<?php the_permalink(); ?>">
<meta property="og:image" content="<?php //アイキャッチ画像が設定されている場合の画像指定 if(has_post_thumbnail()): $opgimg_id = get_post_thumbnail_id(); $opgimg = wp_get_attachment_image_src($opgimg_id,$size="full",$icon=false); echo esc_url($opgimg[0]); else ://アイキャッチ画像が設定されていない場合の画像の指定 echo esc_url(home_url('/')) . 'img/ogp-article-logo.jpg'; endif; ?>">
<meta property='og:description' content='<?php the_excerpt(); ?>'>
<?php elseif(is_archive())://for archive page ogp ?>
<meta property="og:title" content="<?php wp_title(''); ?>">
<meta property="og:type" content="<?php echo 'article'; ?>">
<meta property="og:url" content="<?php echo esc_url(home_url('','http') . $_SERVER['REQUEST_URI']); ?>">
<meta property="og:image" content="<?php echo esc_url(home_url('/')) . 'img/ogp-archive-logo.jpg'; ?>">
<meta property="og:description" content="<?php bloginfo('description')?>"> <?php elseif(is_front_page())://for front_page ogp ?>
<meta property="og:title" content="<?php bloginfo('name')?>">
<meta property="og:type" content="blog">
<meta property="og:url" content="<?php echo esc_url(home_url('/')); ?>">
<meta property="og:image" content="<?php echo esc_url(home_url('/')) . 'img/ogp-front-logo.jpg'; ?>">
<meta property="og:description" content="<?php bloginfo('description')?>"> <?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:app_id" content="【それぞれのFacebookのapp_idに置き換え】">
<!--//OGP設定ここまで-->

コードの解説

if(is_single() || is_page()): // for single page ogp
elseif(is_archive()): //for archive page ogp
elseif(is_front_page()): //for front_page ogp

と条件分岐していて、それぞれ、投稿・固定ページ用、アーカイブページ用、トップページ用と3パターンの設定をしています。

投稿・固定ページ用の画像にはアイキャッチ画像を使用するようにしており、もしアイキャッチ画像が設定されていない場合は、ogp-article-logo.jpgという画像を表示するようにしています。
基本的にアイキャッチ画像を設定しないって選択肢はないのですが、まあ一応設定しておきました。

画像のパスとかファイル名とかはそれぞれ好きなものに変更してお使いください。

アーカイブページとトップページ用の画像はそれぞれ、ogp-archive-logo.jpgとogp-front-logo.jpgという画像を固定で設定しています。
カテゴリ毎に表示する画像を変えたいという場合は、Advanced Custom Fieldsでカテゴリにカスタムフィールドを追加し表示する方法を見て頂ければ設定できると思います。

アーカイブ用の説明文もちょっと手抜きしてブログの説明文を表示するようにしていますが、カテゴリの説明文を表示するようにしてもいいと思います。
カテゴリページがシェアされることはまあないかな？と思い、ちょっとここらへんは手抜きしています。

最後に、投稿・固定ページ用、アーカイブページ用、トップページ用で共通に表示される項目として、
<meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>”>
<meta property=”fb:app_id” content=”【それぞれのFacebookのapp_idに置き換え】”>

で、ブログ名とFacebookのapp_idを表示しています。

app_idではなく、
<meta property=”fb:admins” content=”facebookのユーザーID” />
を使ってもOKです。