Open Graph Protocol とか色々 / JeffreyFrancesco.org

ようやく痛い腰をさすって…いや重い腰を上げて、このサイトでも Open Graph Protocol（以下 OGP）のメタデータを（全ページに）出力するようにしてみた。

今までやらなかったのは、単に W3C Validator がエラーを報告するからという、ある意味非常に後ろ向きな理由がまず一つ。それと HTML5 文書に RDFa を埋め込む方法（OGP って RDFa ですよね？）が分からなかった…というか埋め込む方法がちゃんと仕様で確立されてる（or されつつある）のかすら分かってなかったので、そこをちょっと時間かけて調べてたってのがもう一つ。

あとは、埋め込む方法が分かったところで、要はほぼ Facebook に対応するだけの用途のために、わざわざ文書を RDFa に対応させる意義が果たしてあるのか？ってのも一つ。つーか HTML5 のことを考えればむしろ OGP が microdata 方式でも記述できるような拡張をすればいいよ！とか思ってるし。別に HTML5 だったら

<head itemscope itemtype="http://ogp.me/ns/website#">
  <title itemprop="title">Sample Document</title>
  <meta itemprop="site_name" content="John Doe's Website" />
  <meta itemprop="description" content="My Wonderful Website. Enjoy!" />
  <link itemprop="url" href="http://example.com/" />
</head>

みたいにも書けるようにすりゃいいんだよ、っていう。まあここでうだうだ書いててもしょうがないけど。

閑話休題、んで最初の理由については 3月13日付リリースの v1.3 で解消されたし、次の理由についてはどうやら HTML+RDFa 1.1 というのが策定されつつあるというのが分かったので、これに準じればいいのかなあと。最後の理由は、他の Web サービスでも OGP のメタデータを利用するのが増えてるらしいってのを知ったのと、まあ自分が思ってるだけじゃどうしようもないから、とりあえずは現状の仕様の中で試してみるしかないか、と思ったので。と言うしかない。涙

それから OGP 導入ついでに Like Button も iframe 使うやつから HTML5 版のものに変更した。他にも各ページの下にトップページに対する Like Button を付けてみたり、タグアーカイブを index.html?tag=foo じゃなくて /archives/tag/foo/ とかいう形式で閲覧出来るようにしたり、その他色々微妙に弄ってる。

デザインは別に変わってない。最近どういう訳だかスマートフォンからのアクセスも増えてきたんで、本当はその辺もなんとかしたいところなのだけど、まあ後日の課題って事で。

以上で報告終わり。以下は技術情報（を追記した）。

OGP 対応

OGP メタデータの出力は以前作った facebook プラグインを拡張する形でやった。だいたいこんな感じのコードになっている。デフォルトのメタデータを設定しておいて、permalink 閲覧の時のみ story サブルーチンで og:type, og:title, og:url, og:description の4つを記事に対応したものに差し替え、最後に last サブルーチンで head.flavour に出力されている placeholder を置き換えるという流れ。この辺の処理は「効率の良いBlosxomプラグイン - Weblog - hail2u.net」を参考にした。

万が一ダウンロードして使う人がいた時のことも考えて（考え過ぎ）ドキュメントは改めて日本語で書き直してある。コメントとかを頼りに設定して flavour に前述の変数を入れればだいたい動くと思う。ただし description を生成するために Encode モジュールを使っているので、perl 5.8.x 以前というか Encode モジュールの入ってない環境で使うには use Encode; をコメントアウトか削除して sub story の114〜120行目の処理を書き換えないとダメだけど。

flavour 変数は $facebook::ogp, $facebook::like, $facebook::ns, $facebook::jssdk の4つ。それぞれが OGP メタデータ・エントリごとの like Button・HTML+RDFa 1.1 の prefix 属性・JavaScript SDK 読み込みコード…を出力する。prefix とか SDK みたいな flavour に直で書けば済むようなのをわざわざ変数にしたのは、単に自分が内容をすぐ忘れるからという理由だけなので、涙使わなくても全然構わない。

あとは flavour 内（の適切な場所）に変数を埋め込むだけ。実際にこのサイトで使っているやつはもう少し弄ってて、カテゴリ別ページやアーカイブページでもそれぞれ（デフォルトとは違う）メタデータを出力するようにしてるのだけど、正直そこまでする必要性あるんだろうか…とも思ったので、涙アップしたやつではその辺の処理を削った。

タグ閲覧の URL

タグアーカイブの URL 変更は mod_rewrite でやった。あと paginage_simple プラグインの一部手直し。

# Redirect Old tag links to New
RewriteCond %{QUERY_STRING} tag=([^;]+)
RewriteRule ^index\.html$ archives/tag/%1/? [R=301,L]

# Tag Archives
RewriteRule ^archives/tag/$ - [F]
RewriteRule ^archives/tag/(.*)/$ cgi-bin/blosxom/?tag=$1 [L,QSA]

前のルールは古い形式から新しい形式へのリダイレクトで、後のルールが実際に blosxom に渡す処理。複数のタグの組み合わせで閲覧する場合は /archives/tag/foo/bar/baz/ ではなく /archives/tag/foo+bar+baz/ としないといけないけど、多分やる人いないだろうからその辺あんまり考えずに書いた。

で、このままだと新しい形式でアクセスした際に2ページ目以降があった場合、前後リンクに ?tag=foo という不要なパラメータも付いてしまうので、paginate_simple プラグインの head サブルーチンで

Delete('tag') if url(-absolute => 1) =~ m!/tag/!;

とやってクエリパラメータから ?tag=foo を削除する処理をしている。別にあっても動作はするのだけど、やっぱり不格好だし。

ちなみに /tag/foo/ で済むものをわざわざ /archives/tag/foo/ にしたのは、いずれは日付アーカイブも /archives/2012/05/ のような形式でアクセスできるようにしようと思っているから。最終的には例えば /archives/weblog/ にアクセスすると Weblog の全タイトル一覧が並ぶようにしようかと。基本的にはいわゆるページングを（検索結果以外では）排除する方向でいこうと思ってるので、その準備。

これ以外だと、タグアーカイブと検索の時にはすべて同じページタイトルが出力されていたのを、それぞれユニークなページタイトルが出力されるように（ようやく）対処したとか、同様に description もページごとにユニークなものを出力するように（ようやく）したとかそんなの。あと、find プラグインを日本語で使った場合に and 検索（キーワードの前に+記号を付ける）を行なうと Internal Server Error が出るという有名なアレがあるのだけど、これも（ようやく）対処した。これはまた日を改めて別のエントリにしようと思う。また2ヶ月後とかになる可能性もある。涙