お久しぶりです。
とんとブログ更新をさぼってました。
たまりにたまった記事をそのうち少しずつ書こうと思っております。
さて、今回はOGP（The Open Graph protocol）について。
実は、このブログのOGP、適当な状態でずっと放置してました。
今回、これを一念発起して完璧な状態にまで持って行きました。
が、その過程で色々わかったことがあるので、覚書も兼ねてまとめます。
さて、細かい説明は省きます。
検索すれば、分かりやすく説明してくれているサイトやブログが山ほど出てくるので。
[WordPress]OGPはプラグインを使わずに自力でコードを追加したらスッキリ設定できた！ | Mori2nd Lab
ブログの設定まわりをいろいろといじってみている@Mori2ndです。
OGPの設定にはプラグインを利用していましたが、最近確認してみたら、警告メッセージがでたりしてなんだか不安定な状態になっていました。
いくつかプラグインを試してみましたが、うまくいかないので、これは自分でコードを追加してみるしかない！と思い挑戦してみることにしました。
－from Mori2nd Lab－
貼るだけ簡単！アクセスが倍増するWordPress用OGPコード | Oxy notes
プラグインに頼らず、思い通りに動作するOGP用のコードを書きました
2012年3月現在、日本のFacebook利用者数が768万人。Google+は200万人。Twitterは3000万人。mixiのユーザー数は2,623万人。（セレージャテクノロジー＆Semiotics調べ）
全てのトラフィックを有効に活用すれば、サイトへのアクセスは何倍にも増えます。
－from Oxy notes－
この2つのサイトを参考にさせて頂きました。
ほぼコピペで行けたので、心より感謝。
元のソースから変更したのは、以下の点。
１．「fb:admins」は出したくなかったので「fb:app_id」に
２．デフォルト画像のパスを変更
３．＜html＞タグのxmlns属性をカット ※後述します
というわけで、設定してみてFacebookのデバッガーで確認してみたところ、エラーになりました。
ちなみにFacebookのデバッガー、いまいち不安定です。
これにかけるとキャッシュがクリアされる、と言うのが定説ですが、サイトを更新してもデバッガーでは古い状態のデータが残ってたりするので、デバッガーにもキャッシュがある気がします。
で、私の場合、出たエラーというか、ソースをみるとOGPのFacebook独自タグ部分が以下のような感じになってました。
<meta property="http://www.facebook.com/2008/fbml:app_id" content="***************" />
明らかにOGPの「fb」がURLに置き換わっちゃってます。何でこんなことになってるんだろう、ということで、まあ怪しいのは内に追記している記述ですよね。
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">
というやつ。
どこのサイト見ても、この記述が必要、とあります。
でも、これが悪さしてるのは明確。
が、以下のようなサイトを見つけました。
HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要 : jdash2000 site
HTML5でウェブサイトを作成していて、気になったことがありました。
気になった瞬間はFacebookやGoogle+で使用されるOGP（Open Graph protocol）のためのメタタグを設定していた時のことです。
ネットで検索すると必ずと言っていいほど「xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml” をのタグに追加しましょう」みたいなことが書いてあります。
－from jdash2000 site－
ΩΩΩ＜な、なんだってー!?
この記述、いらないのかよ・・・。
ということで、↑のサイトで説明されているように＜head＞タグ内に別の記述する形にしたところ、うまくいきました。
ご参考までー。
■追記
という記事を書いているときに改めてソースを見ていて気付いたのですが、そもそも私が＜html＞タグ内に記述する際に、以下のようにタグをしっかり閉じていなかった（「/>」としてなかった）からおかしくなったんじゃないかという疑惑が。
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" />
ためしに、それでデバッガーでチェックしてみたんですが・・・。
なんと、今デバッガーでチェックすると、そもそも昨日の記述（＜html＞タグへの記述）でもエラーが出ません・・・。
よくわからんー。
ま、もし同じようなとこでつまずいてる方がいれば、試しに＜html＞タグにxmlns属性を書くのはやめて、＜head＞タグ内にprefix属性で別の記述をしてみてはいかが？
■追記２
ということでいざこの記事をフィードしてみたら、見事に文字化けしました・・・。
色々調べると、TOPページは文字化けしない、単一記事ページもページによって文字化けするページとしないページがあるようで・・・。
調べまくった結果、このブログで使ってるテーマのfunction.phpのなかに、description関連の変数を指定している箇所がありました。
$desc = substr($content,0,155);
これだぁぁぁ！
substrをmb_substrに変更し、文字コードをUTF-8指定。
$desc = mb_substr($content,0,155, 'utf-8');
これで文字化けしなくなりましたとさ。
WordPressのプラグインのマルチバイトパッチって、こういうのを自動的に修正してくれるものだと思ってました・・・。
教訓：海外産のテーマ使うときは、最初にsubstrをmb_substrに変える作業をしといた方が良い。
