TwitterでURLを入力した際に、サイトの概要や画像を表示できるTwitter Cardという機能を試してみました。
■ 設定
TwitterCardの設定はHTMLファイル側のMetaタグで行います。
オリジナルのタグが指定されているので、以下のように入力します。
とりあえず例として、今回うちで入力したそのままを掲載します。
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@okayamania1″>
<meta name=”twitter:creator” content=”@okayamania1″>
<meta name=”twitter:title” content=”岡山の街角から/岡山の情報サイト、観光から歴史までご紹介！”>
<meta name=”twitter:description” content=”岡山県の歴史、県内各地の地名の由来、観光スポットなどをご紹介するサイトです。パワースポットや子供の遊び場、コラムなどもご用意しています。”>
<meta name=”twitter:image”
content=”http://www.okayamania.com/images/○○.png”>
それぞれのタグの意味は以下の通りです。
・card
TwitterCardには一般的な概要、写真を強調する、アプリを紹介する、商品を紹介する…といった、目的別に種類が用意されています。
今回指定したsummaryは、標準のカードという位置づけで、普通のHPを紹介するのに適した形だといえるでしょう。
・site
リンク先のHPのツイッターアカウントです。
ここでは僕自身なので@okayamania1です。
・creator
HPを作っている人のツイッターアカウント。これは無くても大丈夫。
一応入れてみましたが、結局、僕自身のことなので@okayamania1です。
・title
概要で表示するHPのタイトルです。
今回はトップページなので、HP名をそのまま入れましたが、個々のページで用いる場合にはそのページを判り易く表示するのが吉。70文字以内です。
・description
リンク先の記事の内容に説明文です。
記事の説明を簡潔に書き込みましょう。200文字以内です。
・image
概要に貼り付ける写真のURLです。
表示が重たくなるので、なるべく軽めで。リンク先で使っている画像をそのままアップしてもいいのですが、サイズによっては予想外の一部分のみの表示になることもあるので、サムネイルのフォルダでも作って対応した方が綺麗に上がるかも。
summaryの画像サイズは120px×120pxです。縮小でこの範囲に入らない場合は、はみ出る部分が表示されません。
■ 申請
ここまで準備できたら、アップロードします。
そしてhttps://cards-dev.twitter.com/validatorへ移動。
入力したMetaタグが正しいかどうかをヴァリデーション（確認作業みたいなの）します。
これで問題が無ければ、申請するためのボタンが画面に出てくるので、申請ボタンで内容を送信して結果を待ちます。
カードの種類によっては時間が掛かるようですが、今回申請したsummaryでは3分程度でreadyとメールが送られてきましたので、Twitterで呟いてみたところ、出来ていました。
後はCARD用のタグを概要を表示したいページごとに打ち込んでいくだけでOKです。
今から全てのページで作業をするのは大事なので…、indexページなどを中心に、ちょっと進めていければいいかな、と思っています。