WordPressテーマ「STINGER3」にプラグインなしでOGPを設定するカスタマイズ

WordPress WordPress

FacebookなどのSNSで「いいね!」された際などに、タイムラインに投稿される形式の共通仕様を「OGP(Open Graph Protocol)」という。

以前、その「OGP(Open Graph Protocol)」を簡単に設定できるプラグイン「Open Graph Pro」を使用して、OGPを出力する方法を紹介しました。

以前の記事はこちら⇒WordPressプラグイン「Open Graph Pro」でOGP対応

今回は、プラグインを使用せずに、テーマをカスタマイズして、OGPを出力するようにしたいと思います。

使用しているテーマは、検索エンジン最適化(SEO)に強いと言われている「STINGER3」です。

自分でOGPを設定するメリットは、自分の思い通りに出力させることができるし、プラグインに頼らないことで、プラグインの読込などの無駄な処理を行わなくなるので、少しは画面の表示速度も速くなるといったところです。

また、Facebook公式プラグインなどのFacebook連携プラグインのOGPは、出力されるタグが少しおかしかったり、複数のプラグインで重複してOGPが出力されたりもするので、自分でOGPを設定する方が良いのかなと思います。

なお、今回のバージョンは以下です。

  • WordPress 3.9.2
  • STINGER3_ver20140327
スポンサーリンク

OGPの設定

自分でOGPを設定するにあたって、ゆめぴょんの知恵さんの記事を参考にさせていただきました。

編集するのは、ヘッダーファイルの「header.php」。

まずは、「html」タグに次のように追記する。

「STINGER3」は、HTML5ではないので、以下の記述でよい。

<html <?php language_attributes(); ?> xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

HTML5で作られているテーマの場合は、「head」タグに次のように追記する。

HTML5かどうかの判断は、HTMLソースコードの一番上の宣言部分に「<!DOCTYPE html>」の記述があれば、HTML5らしい。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

続いて、「head」タグ内に次のように追記する。

少し変更したところは、投稿記事と固定ページの場合にそのページ情報をOGPに設定するようにし、アイキャッチが設定されていない場合は、投稿内の画像を探さずに、固定の画像を設定するようにした。

<!--OGP-->
<meta property="fb:admins" content="FacebookユーザーID" />
<meta property="fb:app_id" content="FacebookアプリID" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php
if(is_single() or is_page()){
    //投稿記事か固定ページの場合
    if(have_posts()): while(have_posts()): the_post();
        echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'" />';echo "n"; //All In One SEO PackのDescription
    endwhile; endif;
    echo '<meta property="og:title" content="'; the_title(); echo '" />';echo "n";   //投稿記事タイトル
    echo '<meta property="og:url" content="'; the_permalink(); echo '" />';echo "n"; //投稿記事パーマリンク
} else {
    //投稿記事か固定ページ以外(ホーム、カテゴリーなど)
    echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "n"; //「一般設定」のブログ説明文
    echo '<meta property="og:title" content="'; bloginfo('name'); echo '" />';echo "n";              //「一般設定」のブログタイトル
    echo '<meta property="og:url" content="'; bloginfo('url'); echo '" />';echo "n";                 //「一般設定」のブログURL
}
?>
<?php
if(is_single() or is_page()){
    //投稿記事か固定ページの場合
    if(has_post_thumbnail()){
        //アイキャッチがある場合
        $image_id = get_post_thumbnail_id();
        $image = wp_get_attachment_image_src($image_id, 'full');
        echo '<meta property="og:image" content="'.$image&#91;0&#93;.'" />';echo "n"; //アイキャッチ画像
    } else {
        //アイキャッチがない場合
        echo '<meta property="og:image" content="画像URL" />';echo "n"; //指定の画像
    }
} else {
    //投稿記事や固定ページ以外の場合(ホーム、カテゴリーなど)
    echo '<meta property="og:image" content="画像URL" />';echo "n"; //指定の画像
}
?>
<!--/OGP-->

FacebookアプリID(fb:app_id)の取得方法は、こちらの記事を参照してください。

Facebook開発者登録とページ投稿・OGP用Facebookアプリの作り方

FacebookユーザーID(fb:admins)の確認方法は、「https://graph.facebook.com/自分のユーザーネーム(ユニニークURL)」へアクセスし、表示されたIDがFacebookユーザーIDです。

FacebookユーザーID(fb:admins)は、個人情報になるので、設定したくなかったら行を削除してください。

各プラグインのOGP出力をオフにする

自分でテーマにOGPを設定した場合は、各プラグインで自動出力されるOGPがあると、重複して出力され、思い通りの結果にならない可能性がある。

なので、各プラグインのOGP出力をオフにする必要がある。

Facebook公式プラグインの場合

設定項目でオフにすることはできないので、テーマのための関数(functions.php)に以下のように記述し、フィルターを追加することで、OGPを出力しないようにする。

//Facebook公式プラグインのOGP削除
function not_facebook_meta($meta){
    // 何も出力させない
    return '';
}
add_filter("fb_meta_tags", "not_facebook_meta");

「Jetpack」の場合

こちらも同様に、設定項目でオフにすることはできないので、テーマのための関数(functions.php)に以下のように記述し、フィルターを追加することで、OGPを出力しないようにする。

//JetpackプラグインのOPG削除
add_filter("jetpack_enable_open_graph", "__return_false");

以上です。

参考サイト

【ブログ術】FacebookのOGP設定をプラグインなしで設置する方法 – ゆめぴょんの知恵
ウェブサイトが HTML5 で記述されているか簡単に見分ける – Google Chrome の HTML5 markup detector, Firefox の Html Validator | すぐに忘れる脳みそのためのメモ

コメント

  1. そよかぜ より:

    Hideyukiさん

    はじめまして!
    そよかぜと申します。
    人気ブログランキングより飛んで参りました。

    私もSTINGER3を使ったサイトを運営していますが
    こんなに情報が沢山あるなんて、素晴らしいです!
    いろいろと参考にさせてください!

    応援☆させて頂きました!
    またお邪魔させてください。

  2. hide hide より:

    >そよかぜさん
    コメントありがとうございました!
    これからもよろしくお願いします。

タイトルとURLをコピーしました