Twitter の公式サイトでリンク先を「概要を表示」できる場合がありますが、何か設定があるのでしょうか?
「Twitter Cards」という仕組みで、ブログやサイトにタグを埋め込めば表示できるようになります。
Twitter の公式サイトで、ツイート内にリンクがあるとき「概要を表示」できるときがあります。
「概要を表示」をクリックすると、リンク先の「タイトル」「概要」「画像」「ユーザ-名」などが表示されます。
ぜひ、やってみたいと調べたら、以下のページで紹介されていました。
【ツイートした時にブログの概要などを表示させよう】自分のサイトをTwitterCards(ツイッターカード)に対応する方法
早速、「なにしろパソコン・ドットコム」の主要ページにも「概要(Summary)」を導入してみました。
Twitter Cards | Twitter Developers
英文ですが、それほど難しくありません。
まずは「3」の「validator tool」をクリックします。
3. Run your URLs agains the validator tool to be approved.
※ Twitter アカウントでのログインが必要です。
ポップアップ画面から「Summary」を選択します。
写真や動画に力を入れて公開している人は「Photo」とか「Player」もいいかもしれません。
「Card Validator(検証ツール)」という画面が表示されるので、「Standard Tags」の項目を入力して検証します。
オプションなので「Mobile App Integration」は使わなくてもいいでしょう。
「Update Preview」ボタンをクリックするとプレビュー表示されます。
これでできたコードをページに埋め込めばいいわけです。
埋め込んだ後で、ちゃんと設定できているかを「Validate & Apply」で確認できます。
必要項目が「緑」になったら、「Request Approval」ボタンを押すことで「承認」をリクエストできます。
しばらくして再度、検証すれば承認されたか分かります。
単純なページは、これで設定完了ですが、私のブログは「Movable Type」で作成しており、ブログ内の画像の指定を自動にするため、以下のページを参考にしました。
Open Graph Protocolのog:imageを設定する - 継続は力なり!なのか?
ポイントは「MTGetsrcURL」というプラグインを使うことです。
blog -under construction-: 9月号
これらを参考に、ブログエントリーの「ヘッダー」に埋め込んだタグは、こんな感じです。クリックしたら原寸大になります。
これで「概要の表示」ができるようになりました。
埋め込むこともできます。これは効果ありそうです。
「フリック指マウス」でパソコンを指さし遠隔操作ができる http://t.co/qHmJ9fZpHA
— なにしろパソコン編集長 (@724685) June 15, 2013
うまく「概要の表示」とならなかったり、画像がうまく表示されなかったり、もう少し試行錯誤が必要な感じです。
それでも、自分のブログなどを運営しているなら導入を検討する価値はありそうです。
記事の情報は公開時あるいは更新時のもので、最新情報はリンク先など情報元の公式ページでご確認ください。