ようやく痛い腰をさすって…いや重い腰を上げて、このサイトでも 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ヶ月後とかになる可能性もある。涙