Embed Size (px)
DESCRIPTION
Citation preview
Yusuke Yamamoto
Twitter Cards #twtr_hack
2013/2/1
Yusuke Yamamoto
Twitter Cards
https://dev.twitter.com/docs/cards
Yusuke Yamamoto
Twitter Cardsとは• ツイートにメタ情報を埋め込むための仕様
Yusuke Yamamoto
サイトでTwitter Cardsを利用する• http://twitter4j.org/ の例
<html> <head> <title>Twitter4J - A Java library for the Twitter API</title> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@t4j_news"> <meta name="twitter:creator" content="@yusuke"> <meta name="twitter:url" content="http://twitter4j.org/ja/"> <meta name="twitter:title" content="Twitter4J"> <meta name="twitter:description" content="Twitter4J は Twitter API の Java ラッパです。">
<meta name="twitter:image" content="http://twitter4j.org/images/twitter4j.png"> </head> <body>...</body></html>
Yusuke Yamamoto
Twitter Cardsの仕様• カードの種類指定
• summary: デフォルト。ページの要約
• photo: 写真
• player: ビデオ、オーディオ、メディアプレーヤ
<meta name="twitter:card" content="summary">
Yusuke Yamamoto
• その他の要素Twitter Cardsの仕様
twitter:url 正規化されたURLtwitter:title タイトル
twitter:description 説明twitter:image イメージ
twitter:image
twitter:description
twitter:urltwitter:title
Yusuke Yamamoto
その他のタグtwitter:site サイトの公式アカウント@スクリーン名
twitter:site:id サイトの公式アカウントユーザIDtwitter:creator コンテントの作成者@スクリーン名
twitter:creator:id コンテントの作成者ユーザID
Yusuke Yamamoto
Twitter CardsとOpen Graph• Twitter CardsはOpen Graphベース
http://ogp.me より
Yusuke Yamamoto
Twitter CardsとOpen Graph要素の対応
Twitter Cards要素 Open Graph要素twitter:url og:url
twitter:title og:title
twitter:description og:description
twitter:image og:image
https://dev.twitter.com/docs/cards → Overview of all Twitter Card Tags
Yusuke Yamamoto
Open Graph対応でFacebookフレンドリーに
Yusuke Yamamoto
Twitter Cardsまとめ• とりあえず指定しておくべき要素
• 早めの申請を！
twitter:card summary
og:url ページURL
og:title ページタイトルog:description ページ説明
og:image ページイメージ
Yusuke Yamamoto
Twitter Cardsのテスト• https://dev.twitter.com/docs/cards/previewでテスト
Yusuke Yamamoto
Twitter Cardsの申請• https://dev.twitter.com/form/participate-twitter-cards より申し込み
Yusuke Yamamoto
Twitter Cardsの申請• 申請完了画面
• レビューは通常5～10営業日
