【WordPress】プラグインはいらない!FacebookのOGP設定をテーマに直接書き込む方法

FacebookのOGPを設定していいね!の表示をいいね!って感じにする

ブログにFacebookのOGPを適切に設定出来てますか?

よっひー(@yosiakatsuki)です。

WordPressであればOGPを設定できる便利なプラグインがありますが、プラグインとの相性等もあり、うまく表示されないことも…

プラグインとの相性や仕様変更に惑わされないよう、自分でOGPの設定ができるようテーマをカスタマイズしてみました。

今回は、意外と簡単にOGPの設定がいい感じになるようにカスタマイズ出来たよ!ってお話です。

FacebookのOGPって?

「Open Graph Protocol」。略して「OGP」

OGPの設定をしておくとSNSにブログ記事をシェアしたときに「この画像を表示して!」「説明文はコレね!」ということを指定することができます。

google+、gree、mixiなどでも使われていますが、今回はFacebookのOGP設定にフォーカスして紹介します!(僕はFacebook以外のOGPについてはほったらかしです…)

Facebookでの表示例

Facebookをいいねした時の表示例

FacebookのOGP設定をしていると、例のように、画像や記事の要約を表示することができます。

設定なしでも表示されることはありますが、画像だと何が表示されるかわからないし、要約については全く意図していない文が表示されることもあります…

もし、画像に記事内にある広告画像が表示されたらどうでしょう。シェアされたリンクをクリックしたいとは思わないですよね…

シェアされたリンクを思わずクリックしてみたくなる表示にするためにOGPの設定は必須です!

「いいね!」ボタンを設置して満足しているだけではだめですよ!

FacebookのOGPを設定する!

HTMLまたはHEADにコード追加!

<html>タグまたは<head>タグにコードを追加します。

たらハコはHTML5で作っているので、タグにコードを追加します。

HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要」の最後にトップページと個別記事で記述が違うと紹介されてますので、IF文で分岐しました。

header.phpに下記コードを記述します。

<?php if(is_single()): ?>
    <head prefix="og: http://ogp.me/ns# fb:  article: http://ogp.me/ns/article#">
<?php else:; ?>
    <head prefix="og: http://ogp.me/ns# fb:  blog: http://ogp.me/ns/blog#">
<?php endif; ?>

※head内に追記ではなく、headの開始タグを置き換える形になりますのでご注意を

固定ページでも分けたほうがいいかなとも思いましたが、固定ページには「いいね!」ボタンは設置していないので、個別記事かそれ以外で分けています。

HTML5以外(HTML4?)の場合はタグに下記のように「xmlns:og=」から始まるコードを追加するらしいです。未確認でゴメンナサイ。

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

HEAD内にメタタグを追加!

続いて、<head>タグ内にOGPのメタタグを記述していきます。</head>の直前に追加します。

「property=”og:~”」と書かれているメタタグでOGPのアレコレを設定しています。

残念ながら、コピペでは動きません… 参考にしていただける場合は詳細を読んでご自身のサイトに合った設定をしてくださいね!

<meta property="fb:admins" content="※1 FacebookアカウントIDを入れる">
<meta property="article:publisher" content="※2 FacebookページのURLを入れる">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
     if (is_single() or is_page()){//単一記事ページか固定ページの場合
        echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
            echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
        if (get_post_meta($post->ID, _aioseop_description, true) != '') {  //aioseoに設定している場合
            echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";
        } else {
            echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";
        }
        echo '<meta property="og:type" content="article">'; echo "\n";
        $str = $post->post_content;
        $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
        if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
            echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
        } else {
            echo '<meta property="og:image" content="※3 '.get_template_directory_uri().'/images/tarahakologo200.png'; echo '">';echo "\n";
        }
     } else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
        echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
            echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
        echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
        echo '<meta property="og:type" content="website">'; echo "\n";
        echo '<meta property="og:image" content="※3 '.get_template_directory_uri().'/images/tarahakologo200.png'; echo '">';echo "\n";
     }
?>

※1 Facebookアカウントと紐づける!

下記コードの「※1 FacebookアカウントIDを入れる」の部分にご自身のFacebookアカウントIDを入れてください。

<meta property="fb:admins" content="※1 FacebookアカウントIDを入れる">

アカウントIDはFacebookの自分のタイムラインを表示して、自分の写真をクリックして表示できるURL内から取得できます。

Facebookの自分のタイムラインに表示されている写真をクリックします。

Facebookの自分のアイコンをクリック

写真をクリックして表示されたページのURLの「&type=1」の直前の数字を「※1 FacebookアカウントIDを入れる」の部分に入力します。

&type=直前の数字の羅列をメモ

「&type=1」の直前といっても、いくつかの数字の羅列が「.」で区切られていてわかり辛いと思いますが、下記例の太字の部分だけでOKです。

例:「https://www.facebook.com/photo.php?fbid=123456789012345
&set=a.123456789012345.1234.123456789012345&type=1&…」

※2 Facebookページと紐づける

下記コードの「※2 FacebookページのURLを入れる」の部分にFacebookページのURLを入れてください。

<meta property="article:publisher" content="※2 FacebookページのURLを入れる>

たらハコの場合は次のようになります。

<meta property="article:publisher" content="https://www.facebook.com/yosiakatsuki/"/>

※3 記事に画像がなかった場合とTOPページの画像URLを変更する!

記事に画像がなかった場合と、TOPページやアーカイブページの時に表示する画像を指定します。

※3の部分を表示したい画像のURLに変更してください。

echo '<meta property="og:image" content="※3 '.get_template_directory_uri().'/images/tarahakologo200.png'; echo '">';echo "\n";

OGP設定で表示される内容

このOGP設定で表示される内容は以下のとおりです。

個別記事・固定ページの場合

記事のタイトル・リンク
記事タイトルが表示されて、リンクにはパーマリンクが設定されます。
記事画像
記事中の最初の画像を表示。 画像がない場合は※3に設定した画像を表示します。
記事要約
All in One SEOの_aioseop_descriptionを表示。ない場合は記事の先頭から100文字を抜粋して表示します。

TOPページ・アーカイブ

タイトル・リンク
ブログ名とTOPページへのリンク
記事画像
※3に設定した画像を表示します。
記事要約
管理画面で設定したdescriptionを表示します。

表示内容の確認

OGPを設定してみたら、設定が正しく反映されているか確認します。

開発者向けツールのデバッガーで確認してみましょう!

確認するページのURLを入力して「デバッグ」を押すと、設定内容を確認できます。

Facebookのデバッガーで設定内容がちゃんと反映されているか確認

OGPの設定が正しくできていれば、各パラメータの値が表示されます。

リンクをシェアしたときにどう表示されるかも確認できます。

シェア・いいねされた時の表示も確認できる

デバッガーはFacebookにキャッシュされた情報を更新することもできるので、タイトルを変えたり、画像を変えた時にもデバッガーが活躍します!

参考にした記事

FacebookのOGP設定について、以下の記事を参考にさせていただきました。

ブログトップページのOGP設定も忘れずに確認!

個別記事の確認はOKでも、トップページのOGP設定の確認を怠ると、WordPressテーマのロゴが表示されたり、概要がうまく表示されないことがあるので、忘れずにトップページも確認することをおすすめします。

よっしーのひとこと

よっひー

たらハコの記事はそれほどFacebookからの流入はないですけど、いつどの記事が大量にいいね!されるかわかりませんからね。

備えあればなんとやらです。早めの設定でいつでもいいね!されてもいいようにしておきたいですね!

ではまた。