JeffreyFrancesco.org 公開日 タグ Tag Permalink 現在地 Facebook page Twitter RSS feed

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