Twitter Card メタデータに対応した

no extension

なんとなく思いついてこのブログをいわゆる “Twitter Cards” に対応させた。

実は Twitter Cards が登場し始めたときに Tumblr などで適用していたのだが,あまりに酷い仕様で HTML Validator にかけるとエラーの嵐になるし,そもそも Semantic Web を無視した設計に腹が立って忌避していたのだ。 しかし,まぁ,もう Semantic Web なんか誰も見向きもしなくなってるみたいだし, Web コンテンツを解析する手段は AI 技術を利用したものへシフトしてるようだし,もう(どうでも)いいかな,と。

Twitter Cards の仕様も随分シンプルになった。 まず,カード種別が以下の4種類のみになった。

Player card は動画やスライドショウのページ用, App card はアプリページ用なので,それ以外の Web ページでは Summary cardSummary card with large image を選択することになる。

Summary card with large image はアイキャッチ1 用の大きめの画像(300×157から4096×4096で5MB以下)を含むカードで,メディア・サイトなどが多用するあのウザいやつである。 とはいえ,写真やイラストなどを中心としたサイトでは Summary card with large image が向いているだろう。

Summary card with large image にしないのなら Summary card を選択する。 うちのブログはもちろんオリーブオイルおっと Summary card2

Summary card で必須のメタデータは以下の2つである。 これを指定しないと,そもそもカードが表示されない。

  • twitter:card
  • twitter:title

具体的には <meta> 要素の name-content 属性の組み合わせを使って以下のように記述する。

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Codic API を利用するパッケージを作ってみた — プログラミング言語 Go | text.Baldanders.info">

ちなみに twitter:card の値はカード種別ごとに以下の通り。

カード種別 twitter:card 値
Summary card summary
Summary card with large image summary_large_image
Player card player
App card app

ただ,このままではページの説明(description)やアイコン画像が表示されないため(何故 optional なのに無理くり表示しようとするのだろう),以下のメタデータも追加する。

  • twitter:description
  • twitter:image

アイコン画像には144×144から4096×4096までのサイズで5MB以下のデータが使える。 これらを合わせると以下の記述が最低限必要と言える。

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Codic API を利用するパッケージを作ってみた — プログラミング言語 Go | text.Baldanders.info">
<meta name="twitter:description" content="spf13/viper を使ってみたかったのだ。">
<meta name="twitter:image" content="http://text.baldanders.info/images/attention/go-code.png">

以上のメタデータを <head> 要素内に設置する。 これで以下のように表示される(筈)。

Twitter Card: Summary
Twitter Card: Summary

以前は twitter:image 等を property-content 属性の組み合わせで記述させようとしていたが(これのせいで HTML Validator がエラーを吐いていた),さすがに改心したようである(笑)

サイトのオーナーやページの作成者が Twitter ユーザの場合は以下のメタデータも使える。

  • twitter:site
  • twitter:creator

これも同じように

<meta name="twitter:site" content="@spiegel_2007">
<meta name="twitter:creator" content="@spiegel_2007">

とすればよい。 カードの見た目には全く関係ないが Twitter アナリティクスか何かで使うのだろう,多分。

メタデータの幾つかは OGP の語彙と置き換えることができる。

一応説明しておくと, OGP は Facebook が最初に考えた仕様で,元々はネット上のコンテンツと Facebook のアプリを関連付けて制御する仕組みだったのだが

Open Graph の相関図
Open Graph の相関図

RDFa の仕様の一部を借用した大変筋の悪いもので,本来の目的は明後日方向に飛んでいき,現在は <head> 要素内にメタデータを記述するための迂遠な手段に堕している3。 ただし OGP で記述したメタデータを参照するサービスは多いため,今だに SEO 対策として用いられているようだ。

Twitter Cards のメタデータと置き換え可能な OGP の述語を以下に示す。

Twitter Cards OGP
twitter:card og:type
twitter:description og:description
twitter:title og:title
twitter:image og:image

これらの述語を既に使っている場合は Twitter Cards のメタデータで記述する必要はない。 なお og:type は本来はメディア・タイプ(MIME タイプや RDF/RDFa の語彙で定義されるタイプ)を指定するものなので Twitter Cards 用に使うべきではない。

OGP は(一応) RDFa の仕様に従っているのでメタデータ指定には name-content 属性の組み合わせではなく property-content 属性の組み合わせで記述する。 例えば以下の通り4

<head  prefix="og: http://ogp.me/ns#">
  ...
  <meta property="og:title" content="Codic API を利用するパッケージを作ってみた — プログラミング言語 Go | text.Baldanders.info">
  <meta property="og:description" content="spf13/viper を使ってみたかったのだ。">
  <meta property="og:image" content="http://text.baldanders.info/images/attention/go-code.png">
  ...
</head>

<head> 要素に prefix 属性を付けるのを忘れずに(HTML5 の場合)。 なぜ <html> 要素ではなく <head> 要素に付けるかというと, OGP<head> 要素外での使用を考慮していないからである。 まぁ Twitter 側はそんなこと微塵も気にしてないだろうけど。 おそらく接頭辞を og 以外にしたら Twitter 側は認識できなくなるんじゃないのかな(馬鹿らしいので試さない)5

ちなみに <head> 要素内の <title> 要素や description メタデータはまるっと無視するようである。 本当に何でこんな頭の悪い仕様になってるのか知らないが6,最初に書いたように,いまさら Semantic Web なんか気にする人はいないだろうし,どうでもいいか。

ブックマーク

参考図書

photo
セマンティック HTML/XHTML
神崎 正英
毎日コミュニケーションズ 2009-05-28
評価

セマンティック・ウェブのためのRDF/OWL入門 セマンティックWeb プログラミング Linked Data: Webをグローバルなデータ空間にする仕組み オントロジー構築入門 トピックマップ入門 (セマンティック技術シリーズ)

残念ながら紙の本は実質的に絶版なんですよねぇ。是非デジタル化を希望します。

reviewed by Spiegel on 2014/08/17 (powered by G-Tools)


  1. この記事を書くにあたってちょっと調べたのだが「アイキャッチ」というのは和製英語なんだそうだ。ただし,コメントで頂いた情報では “eye-catcher” という言葉はあるらしい(thx!)。なお “eye” は “attention” に置き換えることができるそうで,その場合は “catch the reader’s attention” みたいな言い回しになるとか。ふぅ。英語は難しいぜ。 [return]
  2. 実は一度 Summary card with large image を試したのだが,自分で眺めてやっぱりウザかったので Summary card にした。 [return]
  3. RDF/RDFa は Web 上の(URI で記述可能な)あらゆるリソース同士の関係を「主語・述語・目的語」の3つ組(triple)で表すことで machine-understandable な「意味」を与える Semantic Web の実装のひとつである。もちろん Facebook はそんな思想背景など微塵も考慮していなかったと思うが。 [return]
  4. og:image の目的語は URL なので, RDFa 仕様としては property-content 属性ではなく(<link> 要素を使って) rel-href 属性の組み合わせとするのが正しい。のだが, OGP は馬鹿なので property-content 属性とする(つまりリテラル・データとして扱う)よう求めている。私が間違ってるわけではない,決して。ホントなんだよこのクソ仕様は。ブツブツブツ… [return]
  5. ちなみに prefix 属性ではなく vocab 属性を使えば接頭辞が不要になる。どうなるかなんて試さないよ(笑) [return]
  6. ちなみに Facebook は <title> 要素を認識して使っている。はっきり言って <title> 要素と twitter:title メタデータが独立して存在してるってのは詐欺の匂いがするんだが,誰も気にしないのかね。アイキャッチ画像につられて詐欺みたいなサイトに誘導されるってのは Facebook でも見られるが(笑) [return]