Twitter Cardsって効果どうなんでしょうね。って毎回思いながら、やっておくに越したことないので導入メモ。
Twitter Cardsというのは、FacebookでいうOGP的なもの。
一部OGPで網羅してくれますが、基本Twitterの独自meta情報です。
導入するにはmeta情報を書いておくだけでなく、
Twitterに申請が必要なので、結構めんどくさい。
でも、こういうものはやっておくに越したことないので
何かのサイトがロンチされる度に申請しています。
今年の初めの頃は、たしか申請の許可がおりるまで
3〜4日かかっていたんだけど
最近は数分て許可のメールがきます。
もう申請の必要あるの？ってどうしても思ってしまう...
申請する理由はおそらく、
Twitter Cards用のクローラーがサイトに訪れるタイムラグを埋めるべく
先に情報登録させた情報をTwitter上に反映させている関係っぽい。
即時反映されるのはいいんだけど、、
meta情報として必須項目ではない部分が、
Validate後のRequest Approvalボタンを押したら出てくる
フォームの入力項目では必須項目というよく分からない謎仕様で、
ここをミスって申請すると結構厄介。
なぜならこの入力フォームから登録した情報の変更は
どこからも行うところがない！！※現状
1回、やらかした時は焦ったわ...。
どうにかなったからよかったけど。
1度Approvalしたらあとはmeta情報部分を訂正して
Twitterのクローラーが来るまで、首を長くして待っているしかないって
精神衛生上すごく、すごーーーくよろしくないね。
って、前置き長くなったけど、
そんなワタシのようにドギマギしないように導入方法メモです。
Twitter Cards 導入のフロー
Get more from 140 characters | Twitter Developers
うわー。
最初から英語かよ。
それだけで萎えちゃうね。（ちゃんと英語と向き合いなさいw）
っていうような思いを押し殺しながら..
でもなんてことはないです。
- どんなタイプのカードにするかを選ぶ。
- それに合ったmetaタグを挿入
- 2で記載したmeta情報がちゃんと機能しているかValidateかけた上で申請。
以上！かんたん！
カードのタイプてどんなのがあるの？
- Summary Card
- Summary Card with Large Image
- Photo Card
- Gallery Card
- App Card
- Player Card
- Product Card
今のところこの7つ。
日々進化しているので、増えたり削られたり。
でも、だいたいの場合はSummary Cardが一般的かな。
まだ私はSummary Cardしか使ったことないですw
画像をいっぱい吐き出す系だったらLarge Imageのがいいんだろうね。
この辺は導入するサイトの毛色で判断するとして、、
今回はSummary Cardの設定方法です。
サイト内にTwitterCards用のmetaタグを挿入する
今回はOGP導入しているサイト前提で進めます。
導入してない状態でTwitterCardsに手を出すのって
何か順番間違っている気がするんで、
こんなへっぽこ記事を読む前にOGP導入してください！！
さて、本題に戻って、、
▼挿入するタグ
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@site_username(サイト用のTwitterアカウント入力)">
summaryの場合これだけ。
あとはOGPがちゃんと記載されていればOK。
Validateをかける
挿入したmetaタグがうまく機能しているかどうかをValidateします。
Card Validatorの[Validate & Apply]タブをクリックして
先ほどmetaタグを挿入したURLを入力して[Go]
ValidateするとどこがNGでOKかが見れます
【注意】basic認証がかかっているとValidateできません。
ここで赤い●が表示されていたら申請できないので、
赤くなっていた部分があったら適切なものを入力して、
[Request Approval]ボタンが表示されるように調整しましょう。
いよいよ申請する
[Request Approval]ボタンが表示されたら、いよいよ申請です。
ポチッと押すと、以下のようなフォームが表示されます。
ある程度はValidateしたときの情報が引き継がれるんだけど
descriptionとかusernameとか必須なのに引き継いでくれない項目もあったり。
Administrative Contact
Website Information
Web Domain
文字通りドメインを入力
Web Description
og:descriptionで入力したような内容なり、Twitter独自の内容なり、descriptionを入力しましょう
Website Twitter Username
twitter:siteに入力したTwitterアカウントを入力。
ここは後で変更することができないので、正式なTwitterアカウントを入力しましょう。
Card Type Requested/Example URL
ここは変更できない状態になっています。
何か間違っていたらキャンセルしてValidateして確認。
全て入力し終わったら最終確認して、[Request Approval]ボタンをポチッとすれば申請完了です。
最近だとすぐ完了メールが届くはず。
完了メールが届いたら、実際に申請したURLでTwitter Cardsが反映されているかどうか
TwitterにURLを投稿して確認してみましょう。
※すぐ確認しても反映されていない場合があるので、しばらく時間をおいてから確認をオススメします！
なんか長くなっちゃったねw
きっと時間が経つとまたやり方が変わってきてしまうかと思うけど
ひとまずこんな感じです:-)
それでは快適なソーシャルメディアライフを！（なんじゃそりゃ）
