印刷用表示へ切り替え 通常表示へ切り替え 更新履歴を表示 更新履歴を隠す
Wed March 06, 2013
MovableType OGP 対応と XHTML+RDFa 1.1 への移行

Open Graph Protocol に対応するメタタグをブログ記事に埋め込むことにした。すると XHTML が Valid でなくなってしまったので Movable Type のテンプレートを書き換えて XHTML+RDFa 1.1 に移行することにした。

■ ■ ■

Open Graph Protocol とは

Facebook, mixi, GREE などなど，いつの間にか時代はソーシャルなのだそうだが (笑)，このブログには「いいね!」ボタンをつけていないこともあって，ソーシャルにはまったく縁がない。完全に取り残されたな…。

ソーシャルネットワークでは，Open Graph Protocol (OGP) を使って 「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する ことを行なっているのだそうだ (フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記)。このブログはソーシャルネットワークとは関係が薄いが，メタ情報を埋め込むことには大いに賛同するので，Open Graph Protocol 付きで「いいね！」ボタンを設置する - Open MagicVox.net を参考にして追加することにした。「いいね!」ボタンは後回しでもよい。OGP の詳細は公式サイトで (The Open Graph protocol)。

動作環境は Movable Type 2.661，文字コードは EUC-JP。ドキュメントの形式は，これまで XHTML 1.0 Strict でやってきたが (nlog(n): XHTML 1.0 Transitional から Strict へ 偶然にも8年前の今日)，OGP のメタタグを追加すると Valid でなくなってしまうので XHTML+RDFa 1.1 へ移行することにした。ここでの目標は The W3C Markup Validation Service で Valid 判定をもらうことである。

Movable Type Template の変更

テンプレート共通

XHTML 1.0 Strict から XHTML+RDFa 1.1 に変更するには，DOCTYPE と html タグの宣言の部分を変更すればよい。書式については XHTML+RDFa 1.1 を参照。XHTML では，名前空間の宣言を html タグの中の xmlns 属性で行うが，最近出てきた HTML5 では head タグ内の prefix 属性で行うようになっている。どちらで宣言しても，今のところ等価になっているようだ (facebook - Open Graph namespace declaration: HTML with XMLNS or head prefix? - Stack Overflow)。

XHTML 1.0 Strict (書き換え前):

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML+RDFa 1.1 (書き換え後):

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.1" xmlns:og="http://ogp.me/ns#" xml:lang="ja">

このサイトでは，<?xml?> で文字コードの指定も行なっている。このブログは EUC-JP を使っているので，レンダリングされると encoding="EUC-JP" となる。しかし，いまどきは UTF-8 が標準だそうで，EUC-JP はいくら宣言したとしても廃れていく方向のようだ (泣)。

XHTML+RDFa 1.1 に変更すると，XHTML 1.0 Strict では有効だった lang 設定が問題で，lang="ja" を削除する必要があった。

XHTML+RDFa 1.1 では，メディアタイプを「application/xhtml+xml」にすべきだとしている (XHTML+RDFa 1.1)。しかし，このメディアタイプに対応していないブラウザもあり，また対応していても Google Maps API が正しく動作しないブラウザもあるとのことなので (Movable Type(MT)で生成しているXHTML文書にOGPを導入｜Blog｜Skyward Design)，.htaccess や http.conf でメディアタイプを指定して送出することについては見送ることにした。

個別アーカイブテンプレート

個別アーカイブテンプレートでは，上述の共通の変更の他に，次のタグを head タグ内に記述する。個別記事は，ビルトインオブジェクトのタイプとしては Article を選択する。書式は How-To: Use Built-In Objects - Facebook Developers 参照。

<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<meta property="og:site_name" content="<$MTBlogName encode_html="1"$>" />
<meta property="og:title" content="<$MTEntryTitle encode_html="1"$>" />
<meta property="og:description" content="<$MTEntryExcerpt encode_html="1"$>" />

og:description には，概要 MTEntryExcerpt を <$MTEntryExcerpt encode_html="1"$> として指定している。

メインインデックステンプレート

ブログのトップページには，オブジェクトタイプとして Blog を指定した。Article とは指定できるプロパティが少し違っている (How-To: Use Built-In Objects - Facebook Developers)。

<meta property="og:type" content="blog" />
<meta property="og:url" content="<$MTBlogURL$>" />
<meta property="og:title" content="<$MTBlogName encode_html="1"$>" />
<meta property="og:description" content="<$MTBlogDescription encode_html="1"$>" />

サイトの説明になるので，og:description としてはブログの説明を表す MTBlogDescription を <$MTBlogDescription encode_html="1"$> として指定している。

チェック

OGP のメタタグの動作については，Debugger - Facebook Developers でチェックができる。

XHTML+RDFa 1.1 のチェックには The W3C Markup Validation Service を使う。Valid となる。w3c が提供する，別のチェッカ Unicorn を使うと CSS も同時にチェックしてくれる。これを使ってみたところ，W3C CSS Validator (Level 2.1) で不合格となってしまった。なんかボロボロ…。これは CSS の記述がいけないということなので，XHTML とはまた別の問題である。

2013年10月10日追記:
Like ボタンを設置しました (nlog(n): XHTML にソーシャルボタンを Valid に設置する)。

Posted by n at 2013-03-06 23:21 | Edit | Comments (0) | Trackback(0)
Trackbacks

  • 「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
  • タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細は トラックバック送信時のエラー をご覧ください)
  • トラックバックする記事には，この記事へのリンクを含めてください(詳細は 迷惑トラックバック対策 をご覧ください)
Comments
Post a comment
  • 電子メールアドレスは必須ですが，表示されません (気になる場合は「メールアドレスのような」文字列でもOKです)
  • URL を入力した場合はリンクが張られます
  • コメント欄内ではタグは使えません
  • コメント欄内に URL を記入した場合は自動的にリンクに変換されます
  • コメント欄内の改行はそのまま改行となります
  • 「Confirmation Code」に表示されている数字を入力してください (迷惑コメント対策です)


(必須, 表示されます)


(必須, 表示されません)


(任意, リンクされます)


Confirmation Code (必須)


Remember info (R)?

‌