はてなダイアリーに Twitter Cards を設定する方法

最近目にすることが増えてきた Twitter Cards をはてなダイアリーに設定してみたので手順をまとめておきます。

そもそも Twitter Cards ってなに

Twitter Cards とは、ツイートにリンク先の概要を表示する仕組みのことで、Instagram が連携を停止して有名になったアレです。Amazon とか楽天とか Pixiv とか Togetter とか、ソーシャル意識の高いサイトはだいたい対応しているので見たこともあると思います。

Summary Card

おおかみこどもの雨と雪 BD(本編1枚+特典ディスク1枚) [Blu-ray] 、アマゾンで予約開始 http://t.co/z4UdCbtF
— すのほ＠C95新刊🍈委託してます (@sunoho) 2012年12月10日

pixivに投稿しました 11月のらくがきまとめ #pixiv http://t.co/OeK9dmaq
— すのほ＠C95新刊🍈委託してます (@sunoho) 2012年11月30日

これらは Summary Card というタイプの Twitter Cards で、リンク先のタイトルと記事の冒頭と画像を表示します。この他に画像を埋め込む Photo Card と、動画を埋め込む Player Card があります。

Photo Card

ねんどろレオ様キター！ http://t.co/Ne84OhkW
— すのほ＠C95新刊🍈委託してます (@sunoho) 2012年7月29日

Player Card

我が家では映らないアニメの PV みてる http://t.co/4me07FJ2
— すのほ＠C95新刊🍈委託してます (@sunoho) 2012年9月11日

はてなダイアリーに設定する

はてなダイアリーは Open Graph Protocol に対応している（一番下にちょこっと書いてある）ので、やることは少ないです。

1. Twitter アカウントを取得する

当然ですね。アカウントがなければ利用申請（後述）ができません。
注意点として、ひとつのツイッターアカウントに紐付けられる Web サイトはひとつだけです。複数のブログを運営している方は Web サイトの数だけツイッターアカウントが必要になります。このへん改善して欲しいですね。

2. タグを設定する

詳細はhttps://dev.twitter.com/docs/cardsに書かれているので一読しておくといいと思います。

はてなダイアリーは HTML がいじれないので「ページのヘッダ」編集欄にタグを書きます。valid なんかクソくらえです。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="sunoho" />
<meta name="twitter:site:id" content="7065182" />
<meta name="twitter:creator" content="sunoho" />
<meta name="twitter:creator:id" content="7065182" />

"twitter:card"には card の表示タイプを、目的に応じて「summary」「photo」「player」のいずれかから指定します。ブログの場合は summary でいいと思います。
"twitter:site"には「ブログの」Twitter アカウントを指定します。@ は不要です。
"twitter:site：id"には「ブログの」Twitter ID を指定します。覚えていない方は API や RSS フィード、便利ツールなどで確認してください。
"twitter:creator"には「書いてるひとの」Twitter アカウントを指定します。twitter:site と同じでも問題ありません。
"twitter:creator:id"には「書いてるひとの」Twitter ID を指定します。twitter:site:id と同じでも問題ありません。
"twitter:url"、"twitter:title"、"twitter:description"、"twitter:image"などを利用すれば記事ごとの詳細を設定できますが、はてなダイアリーでは設定できないので自動的に出力される内容をそのまま使います。

3. 設定できたか確認する

公式にプレビューツールが用意されているのでこれで確認します。

https://dev.twitter.com/docs/cards/previewdev.twitter.com

ちゃんと設定されていればこのように表示されます。

ダメな場合はこんな感じ。（何も設定していなくても表示されます）

4. 利用申請する

確認が済んだら Twitter Cards の利用申請をします。

https://dev.twitter.com/form/participate-twitter-cardsdev.twitter.com
記入事項はこんな感じ。

フォーム	記入するもの	例
Name	あなたの名前	すのほ
Email	あなたのメールアドレス	hoge@hoge.ne.jp
Twitter Username	あなたのツイッターアカウント	(@)sunoho
Website domain	ブログのURL	http://d.hatena.ne.jp/sunoho/
Website description	ブログの概要	Review site for Mobile Phone and Anime.
Twitter Username associated with that domain	ブログのツイッターアカウント	(@)sunoho
Example Summary Card URL	確認用の記事URL	http://d.hatena.ne.jp/sunoho/20121116/p1