Zoteroを調べついでにTwitterカード対応をしてみた
Twitterのタイムラインでたまたま流れてきたZoteroの記事（なぜか削除されている）を見て、いろいろと遊んでみたついでに、Twitterカード対応を今更ながらやってみましたというお話。いつかはメタデータをまじめにやらないとなーとか思いつつ、ずっと放置してたという。
Zoteroについて
手っ取り早く言うと、学術論文などでリファレンスを作るときに、引用文献を管理して指定の書式で吐き出してくれるってやつです。Zotero for FirefoxはFirefoxのアドオンとして動作しますので、導入もお手軽です。引用文献はウェブページももちろん対象なので、まかり間違って私のサイトが引用されてもいいように（？）メタデータとしてウェブページ情報をHTMLに仕込んでみようと。要は自己満足です（ぉ
Zoteroがどういうメタデータを取得するのか、まずは項目について見てみます。
とまあこんな感じです。
ここに可能な限り項目を埋めさせてみるとこうなりました。
ということで、何をどうすればいいのかというのを以下簡単に。
Zoteroが認識すると思われるメタデータ
なぜかそれとおぼしき公式ドキュメントの英語が死んでいて、フランス語でfr:compatible_standards_and_software [Zotero Documentation]というそれっぽいドキュメントはあるものの、微妙にサイトのHTMLそのものにどう埋め込むかという情報が欠落しているので、私が独自に調べてみました。
その結果、
あたりはいけそうかなーと。で、Twitterカード対応も鑑みると、次のようになりました。実際のページ例はCSS3の日本語訳集。次のコード例はローカルでテストしてたときの名残です。
<!DOCTYPE html> <html lang="ja"> <head prefix="og: http://ogp.me/ns#"><!-- おまじないとしてのprefixを念のため付与。 --> <meta charset="utf-8" /> <title>メタデータテスト - 血統の森</title><!-- 他にメタデータがなければ「題名」として取得 --> <!--meta name="dc.title" content="Zetoroとメタデータ" /--><!-- title要素に優先してZoteroに「題名」として取得される。ogに優先する --> <meta property="og:title" content="メタデータテスト" /--><!-- title要素に優先してZoteroに「題名」として取得される。 Twitterカードのためにこちらを使用。 --> <meta name="dc.creator" content="Nakamura, Momdo" /><!-- 「著者名」として収録。Nakamura Momdo とすると姓名が逆になる--> <!--meta name="DC.creator" content="なかむら もんど" /--><!-- "なかむらもんど" だとすべて名字と捉えられる。--> <meta name="description" content="Zoteroにメタデータを取得させることを考えつつ、Twitter cardも仕込んだHTMLのテストページです。" /><!--「抄録」として収録--> <meta content="Zoteroにメタデータを取得させることを考えつつ、Twitter cardも仕込んだHTMLのテストページです。" property="og:description"> <meta content="血統の森" property="og:site_name"><!--「ウェブサイト名」として取得--> <!--meta content="recipe" name="DC.Type" /--><!--「ウェブサイトの種類」として取得もイマイチ何を入れればいいのか。 --> <meta name="dc.language" content="ja" /><!--「言語」として取得--> <!-- Twitterカード対応 --> <meta content="@momdo_" name="twitter:creator"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:description" content="Zoteroにメタデータを取得させることを考えつつ、Twitter cardも仕込んだHTMLのテストページです。" /><!-- meta name="description"と重複 --> </head> <body> <p>test
参考リソース
- HTMLの名前空間(namespace)について掘り下げてみる | girigiribauer.com
- http://girigiribauer.com/archives/860
- Dublin Core（ダブリン・コア）
- ウェブ資源メタデータの共通語彙:http://www.kanzaki.com/docs/sw/dublin-core.html
- Hail2u.net
- http://hail2u.net/
- RDFa Lite 1.1
- http://www.asahi-net.or.jp/~ax2s-kmtn/internet/rdf/REC-rdfa-lite-20120607.html
- The Open Graph protocol
- http://ogp.me/
- Summary Card with Large Image | Twitter Developers
- https://dev.twitter.com/node/295
- Cards Markup Tag Reference | Twitter Developers
- https://dev.twitter.com/node/285
