WordPressでプラグインに頼らずにFacebook OGPを設定する

Wordpressでのプラグインの負荷を抑えるため、Facebook OGPをプラグインではなく、テンプレートファイルに直接書き込む試みの記事です。

プラグイン実装をやめようと思った理由

きっかけは「P3 Plugin Profiler」でプラグインがWordpress上でどれくらいの負荷をかけているのか測定してくれるプラグインを実装してチェックしていたのですが、
スクリーンショット 2016-03-21 12.59.28
Plugin Load Time:0.7秒(ひとつのページのうちでプラグインを起動させる時間)
Plugin Impact:56.7%(1アクセスを100%としてプラグインの読み込み時間の割合)

プラグインの占めている割合大きすぎ

要はページにアクセスする時に半分以上がプラグインの読み込みに時間を食っているという結果に。時間食い虫め!!
1位はキャッシュを作成Wordpressを高速化する”W3 Total Cache”なのですが、2位が”All In One Seo Pack”でした。
All In One Seo Packはタイトルや概要文を管理画面上から簡単に編集することができるプラグインで、Wordpress
初めたての頃にすごい重宝していたのですが、色々知見を得た今日このごろ。
SEO TITLE:そもそも変更する必要なくね?
SEO DESCRIPTION:抜粋を使えばOGPに対応できる事実
SEO KEYWORD:タグ機能をちゃんと使えば良い話

というわけでOGP設定を手動で設定する

    <!-- OGP Setting -->
    <meta property="og:title" content="<?php the_title(); ?>" />
    <meta property="og:type" content="blog" /><!-- いいねボタンを押された時に新規にページを作りたくない場合はarticle -->
    <meta property="og:url" content="<?php the_permalink(); ?>" />
    <?php
    if (is_single()){//投稿ページの場合
         if(have_posts()): while(have_posts()): the_post();
              echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n";//抜粋を表示
         endwhile; endif;
    } else {//投稿ページ以外の場合(アーカイブページやホームなど)
         echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
    }
    ?>
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
    <?php
    $str = $post->post_content;
    $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか探す
    if (has_post_thumbnail() && !is_archive()){//投稿にサムネイルがある場合の処理
         $image_id = get_post_thumbnail_id();
         $image = wp_get_attachment_image_src( $image_id, 'full');
         echo '<meta property="og:image" content="'.$image[0].'" />';echo "\n";
    } else 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="http://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg" />';echo "\n";
    }
    ?>
    <!-- /OGP Setting -->

上記をmetaコードの直前に入れます。
他の記事だとwp headの前に入れろとかありますが、テーマファイルによってテンプレートタグの入れ方がまったく違うのでテーマファイル内をよく見ていれた方がよさげです。
基本的にはFacebook OGPの中にそれぞれのタイトルや抜粋を取得するテンプレートタグを入れている感じです。
OGP画像を設定する所だけ、サムネイルがあるかないか取得→ない場合は特定の画像を設定 という条件分岐を入れている感じです。

抜粋を使う

上記でも少しかじりましたが、descriptionについては抜粋の機能を使います。
抜粋とは記事の大まかな概要を意味する機能で「これは○○○の記事」ですといったざっくりとした意味を伝えるものです。
この抜粋を指定しないまま、Facebookでシェアをすると、タイトルの下にブログの本文がそのまま表示されます(下記のイメージ)
スクリーンショット_2016-03-21_13_20_57
それに対し、例えば抜粋をちょこちょこっと1行だけ指定すると、下記のようにスマートに表示できます。
スクリーンショット_2016-03-21_13_21_58
シンプルになって見やすいですねb

プラグインの削除&代用でだいぶ軽くなった!

というわけで、All In One Seo Packと負荷第1位のW3 Total Cacheを消した状態が下記です。
(キャッシュ対策でW3 Total Cache → Wp Super Cacheに変更しました)
スクリーンショット 2016-03-21 13.08.07
Load TimeもImpactもだいぶ改善できました!
プラグインも非常に便利なのですが、どうしてもページ上と管理ページの負荷が生じてサイトアクセスのスピードが低下してしまうので、少しずつ改善していきたいですね。
次はWP Total Hacksかなー。