SlideShare a Scribd company logo
Twitter Cards
Twitter Cards とは
タイムライン上で貼られたリンクの内容を表示する事ができ、
リンク先に飛ばず設定された簡易的な情報をユーザーが知ることが出来る
Twitter公式のサービスです。
Twitter Cards 利用に必要な物
• Twitterアカウント
•ページでのメタタグ対応
1. ページに必要なメタタグを埋め込む
2. サーバーにページをアップロードする
3. Twitter Cards Validatorにアクセス
4. Card Catalogで 「Summary」 を選択
5. 「Validate & Apply」で該当ページを入力し「Go!」ボタンをおす
6. validateでエラーがあれば、修正し再アップして再読み込み
7. エラーがなくなれば、「Request Approval」する
8. 各項目を埋めて「Request Approval」
9. Twitterからメールが届く
● 導入までの流れ
【1】ページに必要なメタタグを埋め込む
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content=“{URL}">
<meta name="twitter:site" content=“{SITE}">
<meta name="twitter:title" content=“{TITLE}">
<meta name="twitter:creator" content=“{CREATOR}">
<meta name="twitter:description" content=“{DESCRIPTION}">
<meta name="twitter:domain" content=“{DOMAIN}">
<meta name="twitter:image" content=“{IMAGE}">
(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8)
参考: https://dev.twitter.com/docs/cards/markup-reference
① Cardsのタイプ
② 該当ページリンク
③ サイトのTwitterアカウント
④ ページのタイトル(70文字まで)
⑤ サイト制作者のTwitterアカウント
⑥ページのディスクリプション(200文字まで)
⑦ サイトの名前( 「○○のサイト」等)
⑧ サムネイルのURI (絶対パス)
① summary
② ページリンク
⑦
④
⑤
⑥
③
⑧
● <meta name="twitter:url" content=“{URL}">
※該当ページのURLが補完される
● <meta name="twitter:site" content=“{SITE}">
※省略した場合は登録アカウントが表示される
● <meta name="twitter:creator" content=“{CREATOR}">
● <meta name="twitter:domain" content=“{DOMAIN}">
● <meta name="twitter:image" content=“{IMAGE}">
※ <meta property=”og:image” content=“”>があれば補完
● <meta name="twitter:card" content="summary">
● <meta name="twitter:title" content=“{TITLE}">
※<meta property=”og:title” content=“”>があれば 【省略可】
● <meta name="twitter:description" content=“{DESCRIPTION}">
※<meta property=”og:description” content=“”>があれば 【省略可】
【必須】
【省略可】
【1】ページに必要なメタタグを埋め込む
【2】サーバーにページをアップロードする
【3】 Twitter Cards Validatorにアクセス
※ テストサーバーではなく本サーバー
https://dev.twitter.com/docs/cards/validation/validator
ログインを求められるので該当Twitterアカウントでログインする
※ ブラウザはChrome推奨です(FireFoxでも利用可能ですがプレビューが見れない)
【4】Card Catalogで 「Summary」 を選択
一般的なサイトは全て Summary
他カテゴリー用途の説明は省きます
説明ページ: https://dev.twitter.com/docs/cards
【5】 「Validate & Apply」で該当ページを
入力し「Go!」ボタンをおす
※Webkit-based browser(Chromeやsafari)じゃないと
上記の文言が表示されます
【6】 validateでエラーがあれば、
修正し再アップして再読み込み
・ twitter:card の記載がない
・ twitter:title がない
・ twitter: description がない
・ title と description とが同じ
【エラー要因】
【7】「Request Approval」する
Standard Tag が緑色であれば
エラーがない状態です。
【8】各項目を埋めて「Request Approval」
ログインしているアカウント情報が
自動的に入力された状態でモーダルが開く
簡単なサイトの説明を入力し
サイトのTwitterアカウントを入力
ここにはvalidateしたページのURLがサンプルとして
自動的に入力されている
サイトのドメインを入力 *.example.com とアスタリスクも可
【9】 Twitterからメールが届く
入力されてるメルアドにTwitterから
「Your Twitter card is ready!」というメールが来れば承認終了です。
ググった内容で承認まで1ヶ月・数週間かかると書いてある記事がありましたが、
僕が申請した時は、即時Twitterからメールが来てました。
ドメイン単位での承認なので
あとはその他のページにも 【1】の要領で metaタグ を記入していけば、
各ページ毎の設定となります。
アップロード後には各ページを validator で確認することをオススメします。
参考サイト
公式
https://dev.twitter.com/cards
【エンゲージメント率150%UPも!?】
注目機能Twitter Cards!内容詳細と導入方法まとめ
http://smmlab.aainc.co.jp/?p=18753
Twitter cardがようやく利用可能になりました
http://love-guava.com/use-of-twitter-card-was-attained-at-last/

More Related Content

Viewers also liked

Tuto jtatoo
Tuto jtatooTuto jtatoo
Apple Inc.
Apple Inc.Apple Inc.
Apple Inc.Zalur
 
2016 04-24-28ste parelvangrootjabbeke
2016 04-24-28ste parelvangrootjabbeke2016 04-24-28ste parelvangrootjabbeke
2016 04-24-28ste parelvangrootjabbeke
Rbs Jabbeke
 
Hand-out event Ondernemen in de cloud door Omar Benameur - KPN
Hand-out event Ondernemen in de cloud door Omar Benameur - KPNHand-out event Ondernemen in de cloud door Omar Benameur - KPN
Hand-out event Ondernemen in de cloud door Omar Benameur - KPN
Rich Tiggeler
 
1klass instruction
1klass instruction1klass instruction
1klass instructionoznob
 
Chelsea roadpp
Chelsea roadppChelsea roadpp
Chelsea roadpp
sebhawker
 
Chicago Service Tracker at OpenGov Hack Night
Chicago Service Tracker at OpenGov Hack NightChicago Service Tracker at OpenGov Hack Night
Chicago Service Tracker at OpenGov Hack Night
Mr0grog
 
Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...
Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...
Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...
William Buddy Gillespie ITIL Certified
 
Гончаров Кирилл Мирбис 23.11.12
Гончаров Кирилл Мирбис 23.11.12Гончаров Кирилл Мирбис 23.11.12
Гончаров Кирилл Мирбис 23.11.12
Kirill Goncharov
 
Rbs maa-apr-2016
Rbs maa-apr-2016Rbs maa-apr-2016
Rbs maa-apr-2016
Rbs Jabbeke
 
Home exercise regimen
Home exercise regimenHome exercise regimen
Home exercise regimen
trickstips
 
2014 04-27-26ste parelvangrootjabbeke
2014 04-27-26ste parelvangrootjabbeke2014 04-27-26ste parelvangrootjabbeke
2014 04-27-26ste parelvangrootjabbekeRbs Jabbeke
 
Csütörtöki lányok
Csütörtöki lányokCsütörtöki lányok
Csütörtöki lányokaromoj
 
Anchor design
Anchor designAnchor design
Anchor design
pradeepdeepi
 

Viewers also liked (16)

Tuto jtatoo
Tuto jtatooTuto jtatoo
Tuto jtatoo
 
Apple Inc.
Apple Inc.Apple Inc.
Apple Inc.
 
A3 paronimy
A3 paronimyA3 paronimy
A3 paronimy
 
2016 04-24-28ste parelvangrootjabbeke
2016 04-24-28ste parelvangrootjabbeke2016 04-24-28ste parelvangrootjabbeke
2016 04-24-28ste parelvangrootjabbeke
 
Hand-out event Ondernemen in de cloud door Omar Benameur - KPN
Hand-out event Ondernemen in de cloud door Omar Benameur - KPNHand-out event Ondernemen in de cloud door Omar Benameur - KPN
Hand-out event Ondernemen in de cloud door Omar Benameur - KPN
 
1klass instruction
1klass instruction1klass instruction
1klass instruction
 
Chelsea roadpp
Chelsea roadppChelsea roadpp
Chelsea roadpp
 
Moments 1
Moments 1Moments 1
Moments 1
 
Chicago Service Tracker at OpenGov Hack Night
Chicago Service Tracker at OpenGov Hack NightChicago Service Tracker at OpenGov Hack Night
Chicago Service Tracker at OpenGov Hack Night
 
Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...
Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...
Can HIEs Really Achieve Financial Sustainability: A Case Study and Discussion...
 
Гончаров Кирилл Мирбис 23.11.12
Гончаров Кирилл Мирбис 23.11.12Гончаров Кирилл Мирбис 23.11.12
Гончаров Кирилл Мирбис 23.11.12
 
Rbs maa-apr-2016
Rbs maa-apr-2016Rbs maa-apr-2016
Rbs maa-apr-2016
 
Home exercise regimen
Home exercise regimenHome exercise regimen
Home exercise regimen
 
2014 04-27-26ste parelvangrootjabbeke
2014 04-27-26ste parelvangrootjabbeke2014 04-27-26ste parelvangrootjabbeke
2014 04-27-26ste parelvangrootjabbeke
 
Csütörtöki lányok
Csütörtöki lányokCsütörtöki lányok
Csütörtöki lányok
 
Anchor design
Anchor designAnchor design
Anchor design
 

Twitter cards