0
 Twitter Cards   #twtr_hack     2013/2/1                  Yusuke Yamamoto
Twitter Cardshttps://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</...
Twitter Cardsの仕様• カードの種類指定•   summary: デフォルト。ページの要約•   photo: 写真•   player: ビデオ、オーディオ、メディアプレーヤ       <meta name="twitter:c...
Twitter Cardsの仕様• その他の要素                   twitter:url    正規化されたURL                          twitter:title     タイトル       ...
その他のタグ   twitter:site    サイトの公式アカウント@スクリーン名  twitter:site:id    サイトの公式アカウントユーザID twitter:creator    コンテントの作成者@スクリーン名twitte...
Twitter CardsとOpen Graph• Twitter CardsはOpen Graphベース             http://ogp.me より                                Yusuke Y...
Twitter CardsとOpen Graph要素の対応           Twitter Cards要素             Open Graph要素               twitter:url                ...
Open Graph対応でFacebookフレンドリーに                        Yusuke Yamamoto
Twitter Cardsまとめ• とりあえず指定しておくべき要素     twitter:card     summary        og:url        ページURL       og:title      ページタイトル    ...
Twitter Cardsのテスト• https://dev.twitter.com/docs/cards/previewでテスト                                          Yusuke Yamamoto
Twitter Cardsの申請•   https://dev.twitter.com/form/participate-twitter-cards より申し込み                                         ...
Twitter Cardsの申請• 申請完了画面•   レビューは通常5∼10営業日                        Yusuke Yamamoto
Twitter Cardsの申請•   承認通知メール    twitter-card-support@twitter.com より通知                                       Yusuke Yamamoto
Upcoming SlideShare
Loading in...5
×

Twitter Cards #twtr_hack

5,342

Published on

Published in: Technology

Transcript of "Twitter Cards #twtr_hack"

  1. 1.  Twitter Cards  #twtr_hack 2013/2/1 Yusuke Yamamoto
  2. 2. Twitter Cardshttps://dev.twitter.com/docs/cards Yusuke Yamamoto
  3. 3. Twitter Cardsとは• ツイートにメタ情報を埋め込むための仕様 Yusuke Yamamoto
  4. 4. サイトで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 は TwitterAPI の Java ラッパです。"> <meta name="twitter:image" content="http://twitter4j.org/images/twitter4j.png"> </head> <body>...</body></html> Yusuke Yamamoto
  5. 5. Twitter Cardsの仕様• カードの種類指定• summary: デフォルト。ページの要約• photo: 写真• player: ビデオ、オーディオ、メディアプレーヤ <meta name="twitter:card" content="summary"> Yusuke Yamamoto
  6. 6. Twitter Cardsの仕様• その他の要素 twitter:url 正規化されたURL twitter:title タイトル twitter:description 説明 twitter:image イメージ twitter:url twitter:image twitter:titletwitter:description Yusuke Yamamoto
  7. 7. その他のタグ twitter:site サイトの公式アカウント@スクリーン名 twitter:site:id サイトの公式アカウントユーザID twitter:creator コンテントの作成者@スクリーン名twitter:creator:id コンテントの作成者ユーザID Yusuke Yamamoto
  8. 8. Twitter CardsとOpen Graph• Twitter CardsはOpen Graphベース http://ogp.me より Yusuke Yamamoto
  9. 9. Twitter CardsとOpen Graph要素の対応 Twitter Cards要素 Open Graph要素 twitter:url og:url twitter:title og:title twitter:description og:description twitter:image og:imagehttps://dev.twitter.com/docs/cards → Overview of all Twitter Card Tags Yusuke Yamamoto
  10. 10. Open Graph対応でFacebookフレンドリーに Yusuke Yamamoto
  11. 11. Twitter Cardsまとめ• とりあえず指定しておくべき要素 twitter:card summary og:url ページURL og:title ページタイトル og:description ページ説明 og:image ページイメージ• 早めの申請を! Yusuke Yamamoto
  12. 12. Twitter Cardsのテスト• https://dev.twitter.com/docs/cards/previewでテスト Yusuke Yamamoto
  13. 13. Twitter Cardsの申請• https://dev.twitter.com/form/participate-twitter-cards より申し込み Yusuke Yamamoto
  14. 14. Twitter Cardsの申請• 申請完了画面• レビューは通常5∼10営業日 Yusuke Yamamoto
  15. 15. Twitter Cardsの申請• 承認通知メール twitter-card-support@twitter.com より通知 Yusuke Yamamoto
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×