ツイート内リンクの「概要を表示」する「Twitter Cards」設定

Twitter の公式サイトでリンク先を「概要を表示」できる場合がありますが、何か設定があるのでしょうか？

「Twitter Cards」という仕組みで、ブログやサイトにタグを埋め込めば表示できるようになります。

Twitter の公式サイトで、ツイート内にリンクがあるとき「概要を表示」できるときがあります。

「概要を表示」をクリックすると、リンク先の「タイトル」「概要」「画像」「ユーザ－名」などが表示されます。

ぜひ、やってみたいと調べたら、以下のページで紹介されていました。

早速、「なにしろパソコン・ドットコム」の主要ページにも「概要（Summary）」を導入してみました。

英文ですが、それほど難しくありません。

まずは「３」の「validator tool」をクリックします。

　3. Run your URLs agains the validator tool to be approved.

　※ Twitter アカウントでのログインが必要です。

ポップアップ画面から「Summary」を選択します。

写真や動画に力を入れて公開している人は「Photo」とか「Player」もいいかもしれません。

「Card Validator（検証ツール）」という画面が表示されるので、「Standard Tags」の項目を入力して検証します。

オプションなので「Mobile App Ｉｎｔｅｇｒａｔｉｏｎ」は使わなくてもいいでしょう。

「Update Preview」ボタンをクリックするとプレビュー表示されます。

これでできたコードをページに埋め込めばいいわけです。

埋め込んだ後で、ちゃんと設定できているかを「Validate & Apply」で確認できます。

必要項目が「緑」になったら、「Request Approval」ボタンを押すことで「承認」をリクエストできます。

しばらくして再度、検証すれば承認されたか分かります。

単純なページは、これで設定完了ですが、私のブログは「Movable Type」で作成しており、ブログ内の画像の指定を自動にするため、以下のページを参考にしました。

ポイントは「MTGetsrcURL」というプラグインを使うことです。

これらを参考に、ブログエントリーの「ヘッダー」に埋め込んだタグは、こんな感じです。クリックしたら原寸大になります。

これで「概要の表示」ができるようになりました。

埋め込むこともできます。これは効果ありそうです。

「フリック指マウス」でパソコンを指さし遠隔操作ができる http://t.co/qHmJ9fZpHA
— なにしろパソコン編集長 (@724685) June 15, 2013

うまく「概要の表示」とならなかったり、画像がうまく表示されなかったり、もう少し試行錯誤が必要な感じです。

それでも、自分のブログなどを運営しているなら導入を検討する価値はありそうです。

記事の情報は公開時あるいは更新時のもので、最新情報はリンク先など情報元の公式ページでご確認ください。