【WordPressでOGPの設定を自作しました】プラグインは挙動が不安定なのでやめました

Facebook このページをあとで読む

最近ちょこちょこと、いろいろなサイトからこのブログへリンクされているのに気づきました。大変ありがたいことです。で、ちょっとまずいな～感じていたことがあったんですが、私のこのブログのOGP設定はめちゃくちゃだなぁ～って思っていました。

プラグインで設定していたのですが、それをやめてコードを書くことにしました。

私がやった方法を少し紹介しますね。

今まで、OGPの設定はこうしていました

ネットで「WordPress　OGP」などと検索すると、

「WordPressのOGP設定はプラグインでカンタンにできる！」

というような記事がたくさん見つかるのですが、私は、

  • open graph pro　プラグイン
  • wp-ogp　プラグイン

の有名な2つのプラグインを試しました。もちろん、それぞれのプラグインを有効にして適切な設定はしていました。設定する箇所が少ないので（facebookのIDを入れて・・・とか）どうも私の設定が間違えているとは考えにくかったんですね。

facebook側の設定（アプリ作成など）も適切に設定してて・・・何かがおかしい、と思っていました。で、facebookは「気が付いたら仕様が変更されているよね～」って思うことが多くて、OGPの仕様だって例外じゃないな・・・と思っています。

それに、facebookの仕様変更に合わせていちいちプラグインも対応しきれていないのではないか、と思っています。

それではここで、今までのでたらめなOGPの設定を見ましょう～。例えば、私の記事の1つをどなたかがシェアするときに、facebookの「いいね！」を押したとしましょう。そしたら、ウォールに以下の投稿がされるんですがね。まったく、何の情報なのかわからないすね＾＾；

これのことです。今までこんな感じでした。

記事に対して画像が全然関係ないものになってるんですね。それに、抜粋もできていないです。うーん、なんともかっこ悪いです。で、これを思ったとおりの動きにしたいと思います。

ちなみに、

  • facebook側の設定は完了している（アプリの作成など）
  • facebookのlikeボタンがブログに設置されている

というのが前提です。

ヘッダーファイル「header.php」にコードを書きます

【<html>タグにコードを追加します】

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

xmlns:og=”http://ogp.me/ns#”　xmlns:fb=”http://www.facebook.com/2008/fbml”

を追加しています。そして、続けて以下のコードを<head>～</head>タグの間に入れます。

【<head>～</head>タグの間にコードを追加します】

 <?php if( is_single() ){ ?>
 <?php while (have_posts()) : the_post(); ?>
 <meta property="og:title" content="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" />
 <meta property="og:description" content="<?php the_excerpt(); ?>" />
 <meta property="og:url" content="<?php echo clean_url( get_permalink() ); ?>" />
 <meta property="og:image" content="<?php if( has_post_thumbnail() ){ $thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ) ); echo $thumbnail[0]; } else { echo 'https://www.imamura.biz/blog/wp-content/uploads/logo-150x150.png'; } ?>" />
 <?php endwhile; ?>
 <?php } else { ?>
 <meta property="og:title" content="<?php bloginfo('name'); ?>" />
 <meta property="og:description" content="<?php bloginfo('description'); ?>" />
 <meta property="og:url" content="<?php echo "https://www.imamura.biz/blog/"; ?>" />
 <meta property="og:image" content="<?php echo 'https://www.imamura.biz/blog/wp-content/uploads/logo-150x150.png'; ?>" />
 <?php } ?>
 <meta property="fb:admins" content="100001155462966" />
 <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
 <meta property="og:type" content="article" />

コード中にある下の3つは、適宜環境に合わせて変更ください。

  • og:img　（アイキャッチのURL　6,12行目）
  • og:url　（ページのURL　15行目）
  • facebookのadminID　（14行目）

もっとwpテンプレートタグとかphp関数を使おうよ、っていう声が聞こえてきそうです・・・が、「og:url」の取得がうまくいきませんでした。私の環境では、「og:url」の取得に「content=”bloginfo(‘url’)”」を使いましたが、facebookのOGPのデバッグ（https://developers.facebook.com/tools/debug/og/）を行うと、

Circular Redirect:Circular redirect path detected (see Redirect Path section for details).
Error Scraping Redirect:Bad Response Code (redirect)

と、エラーが出てしまいまして・・・下の画像です。

【デバッグするとエラーが出ました】

$_SERVER['REQUEST_URI'];

を使用して取得されている記事も発見しましたが、サーバによっては使用を制限しているところもあると。サーバの環境に頼るとサーバ移行とかでサイトを引越ししたときに、意図した動作になるとは限りませんので、今回は使わないことにしました。

PHP: $_SERVER – Manual

$_SERVER は、ヘッダ、パス、スクリプトの位置のような 情報を有する配列です。

この配列のエントリは、Web サーバにより 生成されます。

全ての Web サーバがこれら全てを提供する保障はありません。

サーバは、これらのいくつかを省略したり、この一覧にない他のものを 定義する可能性があります。

これらの変数の多くは、» CGI/1.1 specification で定義されています。

したがって、これらについては定義されていることを 期待することができます。

あと以下は、今回書いたコードで覚えておくと今後便利だと思う処理です。

【注目する処理１：単一記事ページと、それ以外のページの条件分け】

<?php if( is_single() ){ ?>
 //単一記事ページの場合
 <?php } else { ?>
 //そうでない場合
 <?php } ?>
  • 単一記事ページの場合
  • そうでない場合

それぞれの条件に合う処理を書けば、OKですね。

【注目する処理２：アイキャッチ画像の取得】

<?php
 if( has_post_thumbnail() ){
 $thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ) );
 echo $thumbnail[0];
 } else {
 echo 'https://www.imamura.biz/blog/wp-content/uploads/logo-150x150.png';
 }
 ?>

アイキャッチ画像がある場合を「has_post_thumbnail()」を使って判別して、$thumbnailに投稿IDのサムネイルを配列に格納、$thumbnail[0]で出力する

【注目する処理３：clean_urlの使用】

<meta property="og:url" content="<?php echo clean_url( get_permalink() ); ?>" />

URLを出力する場合は、「clean_url」を使って取得・出力しましょう。今回のOGPの設定では、パーマリンクのURLの取得に使用しています。

以上、気に留めておいたほうがよい処理はこんなもんですね～。

ちゃんとOGPの設定がされているのか確認しましょう

  • 単一記事ページの場合
  • それ以外のページの場合

で、確認しました。

単一記事ページの場合

https://www.imamura.biz/blog/web/2980

【facebookのウォールから投稿】

【ブログの「いいねボタン」を押してもOK】

【デバッグしても、エラーなし】

【おまけ：Google+から投稿でも大丈夫】

単一記事ページ以外の場合

https://www.imamura.biz/blog/

【Facebookのウォールから投稿】

【ブログのサイドバーの「いいねボタン」を押しても・・・】

このために設置しました。3人も押してくれてた方がいらっしゃったか！ありがとうございます！

【デバッグしても、エラーなし】

【おまけ：Google+から投稿でも大丈夫】

ちゃんとした値が設定されていますね。

まとめ

というわけで、WordPressのOGPの設定はプラグインをやめて自作しました。

  • 単一記事ページのOGP設定
  • 単一記事ページ以外のOGP設定

と、「単一記事ページ以外のOGP設定」については条件を広く設定していて、カテゴリページとかの設定はしないの？とお思いの方もいらっしゃるとは思いますが、私はそこの重要度は低いと判断しました。ホントは何でもプラグインでやってしまいたいものですが、プラグインも完璧なものばかりじゃないですからね。

私もプラグインを作っているところなんですが、それが多機能であるほど色々なところに配慮しないといけない。世間的に認められているいいWordPressプラグインってのは、利用者側をとても意識した作りになっていると言ってもいいんじゃないか、と思います。

ただ、Facebookの突然の仕様変更にはみなさん、毎度てこずっていらっしゃいますね（もしかして事前にアナウンスされているかもしれない、私が知らないだけかもしれませんが）そんな時に、すでに色々な方法で試されている記事を拝見させていただくたびに、ありがたいな～っと思います。

というわけで、今回も参考とさせていただいたサイトがあります。

プラグインを使わずにWordPressにFacebook用OGP（Open Graph Protocol）を設定する

とても詳しく書かれていまして、私が今回書いたコードもほとんど参考とさせていただいてます。また、以下の条件が前提でこの記事を書いていますが、

  • Facebook側の設定は完了している（アプリの作成など）
  • Facebookのlikeボタンがブログに設置されている
  • WordPressのFacebookのOGP設定
  • WordPressプラグインでOGP設定がうまくいかない

 

という方に少しでもご参考いただければ幸いです。

著者:bouya Imamura