umeda「TwitterCards」設定方法
head内に記述する情報を見直す機会があったので、
改めて「TwitterCards」も調べなおしてみました。
●「TwitterCards」とは？
●申請方法
●「Twitter Analytics」について
●OGPの設定について
URLを含むツイートを投稿すると、FacebookのOGP画像のようなサムネイルを表示させる機能です。
OGPを設定済みであれば、簡単な設定と申請のみで反映されます。
＜手順＞
（1）Facebook用のOGPを設定する
（2）TwitterCards用のタグをHTMLに追加
（3）Twitterに申請
（4）ツイートをして動作確認
＜設定・申請に必要な情報＞
・Twitterアカウント
・それに紐付くパスワードとメールアドレス
＜設定した例＞
— ウメダキョウコ (@umeume66) 2014, 6月 11
※設定例は、デフォルトの「summary」を使用していますが、全部で 7種類あります。
製品紹介や写真ギャラリーなどの用途に応じて、最適なものを選択されると効果的ではないかと思います。
・Summaryカード：デフォルト
・Summary with large imageカード：画像が目立つ
・Photoカード：写真のみ
・Galleryカード：4つの写真
・Appカード：モバイルアプリの詳細を含めて直接ダウンロードできる
・Playerカード：動画/オーディオ/画像を提供
・Productカード：製品情報のために最適化
＜参照＞
→Twitter カード 7タイプの使い方をカード種別ごとに解説するよ | WWW WATCH
http://hyper-text.org/archives/2013/06/twitter_cards_7_card_types.shtml
昨年に設定した際とは申請方法が大きく変わっていました。
（1）準備
HTML内に TwitterCards の設定に必要な情報を入力。
※Facebook の OGP画像を流用できますが、1MBを超える場合は TwitterCards用に表示する画像を準備する。（120×120ピクセル以上）
（2）チェック
Card Validator の「Card URL」へ、申請したいURLを入力し
「Preview card」ボタンをクリック。
→Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator
緑色の文字でコメントが表示されれば問題ありません。赤文字はエラーですので、内容に従って設定をやり直してください。
・OKの例
・NGの例：metaタグが抜けています。
・NGの例：TwitterCards の情報は robots.txt を参照しているので、
Twitterクローラーのアクセスを許可するよう設定してください。
＜参照＞
→Twitter Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール設定だった *Ateitexe
http://ateitexe.com/twitter-cards-image-not-displayed/
→トラブルシューティングガイド | Twitter Developers
https://dev.twitter.com/ja/cards/troubleshooting
（3）申請
上記の「OKの例」は申請済みなので表示されていませんが、
申請前のサイトの場合は「Request Approval」というボタンが表示され、登録画面へ進みます。
設定方法については、下記のサイトで詳しく解説されていますのでご参照ください。
（「数週間かかる場合もある」というメッセージが表示されますが、30分程度で承認されました。）
＜参照＞
→Twitter Cardsへの登録方法 | Simplicity
http://wp-simplicity.com/twitter-cards/
ツイートの反応や、コンテンツの共有状況、
フォロワーの傾向などの分析情報を閲覧することができます。
昨年8月に一般ユーザー向けにも公開されました。
アカウントをお持ちの方は、以下の URL から 2014年9月以降の結果が無料で閲覧できます。
https://analytics.twitter.com/
※広告を出稿しているユーザには、「Twitterカードアナリティクス」にて
より具体的な解析結果を見ることができるそうです。
（検証できていませんが…）
＜参照＞
→Twitterカードアナリティクス | Twitter Developers
https://dev.twitter.com/ja/cards/analytics
→Twitterヘルプセンター | Twitterカードアナリティクスダッシュボード
https://support.twitter.com/articles/20171290-twitter
→わかると楽しいTwitterアナリティクス、どのようなことがわかるのか？
http://nelog.jp/twitter-analytics
※【必須】以外のものは削除しても動作には影響ありません。
必要に応じて適宜カスタマイズしてください。
※＜body＞内の JavaScript SDK の記述に関しては、「version=v2.0」にバージョンアップしています。
※下記を設定後、以下のページで必ずチェックを行ってください。
→Debugger | Facebook Developers
https://developers.facebook.com/tools/debug/
→Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator
<!DOCTYPE HTML>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="utf-8">
<title>サイト名</title>
<meta name="description" content="概要・説明文">
<meta name="keywords" content="キーワード,キーワード,キーワード">
<!-- Facebook：この内容は他のSNSにも使用されます。 -->
<meta property="og:locale" content="ja_JP【必須】">
<meta property="og:title" content="記事のタイトル（※Twitterは70文字まで）【必須】">
<meta property="og:type" content="article（※ホームページのみ「website」）【必須】">
<meta property="og:url" content="記事のURL【必須】">
<meta property="og:image" content="指定したい画像のパス（なければ自動的に取得）【推奨】">
<meta property="og:site_name" content="記事が属するサイト名【必須】">
<meta property="og:description" content="記事の説明文（なければ自動的に取得）（※Twitterは200文字まで）【推奨】">
<meta property="fb:app_id" content="アプリID【推奨】">
<meta property="article:publisher" content="FacebookページのURL（https://www.facebook.com/～）">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary（※全7種類）【必須】">
<meta name="twitter:site" content="WebサイトオーナーのTwiterアカウント（@name）">
<meta name="twitter:creator" content="記事を書いた人のTwitterアカウント（siteと同じで可）">
<!-- Twitter Cards：※「Twitter Analytics」を使用する場合は、上記＋以下も必須。 -->
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:domain" content="サイトのドメイン">
<meta name="twitter:description" content="記事の説明">
<meta name="twitter:image:src" content="サムネイル画像のURL（画像のサイズは120×120ピクセル以上、1MB未満）">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=【アプリID】&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- /Facebook -->
</body>
</html>
