わわわIT用語辞典に対して、Twitterカードの設定をしてみました。
備忘録を兼ねて、やり方をメモっておきます。

ちなみに、TwitterカードはTwitterに張ったリンクを目立つようにするやつね。
URLだけでなく画像とか説明なんかも表示されるようになります。
設定すると、こんな感じの見た目になりますよφ（－－）




それでは設定方法ですが……の前に概要を説明しておくと、
基本的な作業はページにmetaタグを埋め込むだけです。
metaタグを埋め込んだページのURLをツイートすると
Twitter側が自動で見た目を調整してくれます。

逆に言うと、metaタグを設定していないページのURLをツイートした場合は
つぶやく人がいくら頑張っても、画像や概要は表示されません。
Twitterカードは、つぶやく人ではなく、ページを管理している人が設定するものです。

それでは、具体的な設定方法を書いていきます……の前に、
本ページで説明するのは

OGPのタグにTwitterカード特有のタグを追加

なやり方です。
全部Twitterカード特有のタグにすることも可能ですが、
Facebookとかに流用できるのでOGPのタグも設定しておいた方が便利だと思います。

それでは、今度こそ設定方法を書いていきます。

まず、HTML5でページを作っている人は


を


に書き換えます。

XHTMLとかで作っている人は


を


に書き換えてください。

これはOGPを記述する際のお約束事です。
意味を気にする必要はありません。
ぶっちゃけ、書いてなくても動いたりしますが、一応書いておいてください。

次に以下のメタタグを設定します。


仮に全部、Twitterカード特有のタグで書くと


になります。
要は「twitter:」の一部のタグを「og:」で置き換えられるわけです。
「og:」で始まっているのが、OGPのタグです。
「twitter:」で始まっているのが、Twitterカード特有のタグになります。

設定する内容は何となく分かると思いますが【カードの種類】を補足しておきます。
【カードの種類】は、Twitter上に表示される際の見た目です。
基本は「summary」ですが、他に「photo」や「gallery」などがあります。
詳細は以下のURLからリンクを辿って確認してください。

■カードタイプ
https://dev.twitter.com/ja/cards/types

また、ページタイトルやURL以外にも設定できるタグがあります。
詳細は以下のURLからご確認ください。

■カードのマークアップタグリファレンス
https://dev.twitter.com/ja/cards/markup

ふぃ～、これでページの編集作業は終了です。
参考までに、私は以下の内容を設定しました。

■トップページ

■用語詳細ページ（例）

さて、次に行きましょう。
ページの編集が終わったらTwitterに申請します。

「申請」といっても難しいことはありません。

https://cards-dev.twitter.com/validator

にアクセスして「Card URL」にmetaタグを設定したページを指定して「Preview card」を押すだけです。
私がやったときは、成功したら


と表示されて、Twitterカードのプレビューが表示されました。


※クリックで拡大します


実は「全ページ、試さないとダメなのかな？」とビビっていたのですが
申請はトップページのみで大丈夫でした。

ドメインを認識させればOK……なのかもしれませんし、
下手すれば申請しなくても大丈夫かもしれません。
申請前につぶやいてみるの、やってみようと思いつつ忘れちゃったのですよね（＾＾ゞ

申請しないでつぶやいてみて、ダメだったら申請する、でもいけそうな気はします。
とはいえ、そこまで手間でもないので、普通に申請してあげてください。

作業はこれで完了です。
お疲れ様でした。
URL付きでつぶやくと、こんな感じで画像とかが表示されるはずですφ（－－）




最後にまとめておきますね。
Twitterカードの設定は

１．ページにmetaタグを追加する
　追加するmetaタグは


　もしくは


　が最低限の内容です。

２．申請する（本当に必要かは検証し忘れました）
　https://cards-dev.twitter.com/validator
　にアクセスしてURLを入力してボタンを押す

で、できます。

そんな感じ＼（－－）／