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/