Twitterカード 対応

Twitter

目次一覧

 状態:-  閲覧数:2,720  投稿日:2016-11-07  更新日:2020-01-28
Twitterアカウントは必要? / WebサイトをTwitterカード 対応させるためには? / Twitterカード は全部で4種類ある

実装手順 / metaタグ項目一覧表 / Sample Code

B.大きな画像付きのSummaryカード 記述例 / OpenGraphへ置き換えること出来るTwitterタグ/「Twitter独自タグ」と「Open Graphタグ」を組み合わせた Sample Code

「Twitter独自タグ」と「Open Graphタグ」を組み合わせた「B.大きな画像付きのSummaryカード 記述例」/ 適切に設定しているにも関わらず、Twitterカード が表示されない場合は? / 実際に Twitterカード を設定してみて気が付いたこと

Twitterカード 設定した後は?


Twitterアカウントは必要? / WebサイトをTwitterカード 対応させるためには? / Twitterカード は全部で4種類ある

 閲覧数:372 投稿日:2016-11-07 更新日:2020-01-28 

Twitterアカウントは必要?


Twitterカード表示するために、Twitterアカウントは必要なの?

Twitterアカウントは不要
Twitterアカウントを保持していなくても、設定済みのURLに対してTwitterカードが表示される
※但し、アナリティクスを使用して効果測定する場合は必要

WebサイトをTwitterカード 対応させるためには?


WebページにHTMLを追加
適切なメタタグをWebページへ数行追加するだけ

追加するとどうなるの?
・「そのコンテンツへのリンクが含まれるツイート」にカードが追加表示されるようになる
・ツイートにURLを貼る(含める)だけで、自動的にそのページのサマリーが表示されるようになる
→ 「そのツイートを投稿したユーザーのすべてのフォロワー」にカードが表示されるようになる

Twitterカード は全部で4種類ある


A.Summaryカード
Summary card

B.大きな画像付きのSummaryカード
Summary with large image

C.Appカード
App card

D.Playerカード
Player card

※「Photoカード」「Galleryカード」「Productカード」… 2015年7月廃止

実装手順 / metaタグ項目一覧表 / Sample Code

 閲覧数:398 投稿日:2016-11-07 更新日:2020-02-20 

実装手順


1.実装するカードタイプを上記4種類の中より選択
一般的には「Summaryカード」「大きな画像付きのSummaryカード」何れかを選択

2.適切なメタタグをWebページへ数行追加する
選択したカードタイプにより、記述内容は異なる

3.検証ツールで動作確認
URLを入力して実行してみる

4.実際にツイートして動作確認
URLを含むツイートを行い、ツイートの下にTwitterカードが表示されることを確認


metaタグ項目一覧表


項目一覧表
ユーザー名 … @hoge
項目 内容 具体例 必須任意 備考
twitter:card カード種類 ・summary
・summary_large_image
・app
・player
必須 ・ページごとにカードタイプを1つだけ設定できます
・ページに複数のtwitter:card値が存在する場合は、「最後に」来る値が優先されます
twitter:site ユーザー名 @hoge 任意 ・カードフッターで使用されるウェブサイトの@ユーザー名
・アナリティクスを使用して効果測定する場合に必要
twitter:creator コンテンツ作成者のユーザー名 ほげ 任意 コンテンツ作成者/著者の@ユーザー名
twitter:title タイトル タイトル 必須 -
twitter:description 説明 説明 任意 -
twitter:image ・ページのコンテンツを表す一意の画像URL
・Webサイトのロゴ、著者の写真など、複数ページにまたがる一般的な画像を使用しないでください
・このカードの画像は、最小寸法300x157または最大4096x4096ピクセルで2:1のアスペクト比をサポートします
・画像のサイズは5MB未満でなければなりません
・JPG、PNG、WEBP、およびGIF形式がサポートされています
・アニメーションGIFの最初のフレームのみが使用されます
・SVGはサポートされていません。
http://example.com/img.jpg 任意 -
twitter:image:alt ・画像の本質的な性質を視覚障害のあるユーザーに伝える画像のテキスト記述
・最大420文字
画像の説明 任意 -

Sample Code


ユーザー名 … @nytimes
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">


Summary with large image


B.大きな画像付きのSummaryカード 記述例 / OpenGraphへ置き換えること出来るTwitterタグ/「Twitter独自タグ」と「Open Graphタグ」を組み合わせた Sample Code

 閲覧数:340 投稿日:2020-01-28 更新日:2020-01-28 

B.大きな画像付きのSummaryカード 記述例


ユーザー名 … @hoge
<meta name="twitter:card" content="summary_large_image"> <!-- カード種類 -->
<meta name="twitter:site" content="@hoge"> <!-- ユーザー名 -->
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明">
<meta name="twitter:image" content="http://example.com/img.jpg"> <!-- 画像 -->
<meta name="twitter:image:alt" content="画像の説明"> <!-- 画像の説明 -->

OpenGraphへ置き換えること出来るTwitterタグ


比較一覧表
Twitter独自タグの場合は、n/aと表記している
Twitter Property OpenGraph 備考
twitter:card og:type マークアップにog:type、og:titleおよびog:descriptionが存在するが、twitter:cardが存在しない場合、サマリーカードがレンダリングされる場合があります
twitter:site n/a -
twitter:site:id n/a -
twitter:creator n/a -
twitter:creator:id n/a -
twitter:description og:description -
twitter:title og:title -
twitter:image og:image -
twitter:image:alt n/a -

「Twitter独自タグ」と「Open Graphタグ」を組み合わせた Sample Code


ユーザー名 … @nytimesbits
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

Twitter metaタグの閉じタグについて。何か特別な意味はありますか?

「Twitter独自タグ」と「Open Graphタグ」を組み合わせた「B.大きな画像付きのSummaryカード 記述例」/ 適切に設定しているにも関わらず、Twitterカード が表示されない場合は? / 実際に Twitterカード を設定してみて気が付いたこと

 閲覧数:343 投稿日:2020-01-28 更新日:2020-01-28 

「Twitter独自タグ」と「Open Graphタグ」を組み合わせた「B.大きな画像付きのSummaryカード 記述例」


ユーザー名 … @hoge
<meta name="twitter:card" content="summary_large_image"> <!-- カード種類 -->
<meta name="twitter:site" content="@hoge"> <!-- ユーザー名 -->
<meta name="twitter:creator" content="ほげ">
<meta property="og:url" content="http://example.com/"> <!-- URL -->
<meta property="og:title" content="="タイトル">
<meta property="og:description" content="説明">
<meta property="og:image" content="http://example.com/img.jpg"> <!-- 画像 -->
<meta name="twitter:image:alt" content="画像の説明"> <!-- 画像の説明 -->

カードの利用開始

適切に設定しているにも関わらず、Twitterカード が表示されない場合は?


反映手順
・1.Card Validatorへアクセスする
・2.URL入力する
・3.「Preview Card」ボタンをクリックする

実際に Twitterカード を設定してみて気が付いたこと


Webページに適切なmetaタグを設定したらどうなるの?
該当URLが含まれる全ての既存ツイートに対して、Twitterカード が表示されるようになる

Webページのmetaタグを変更したらどうなるの?
該当URLが含まれる全ての既存ツイートに対して、Twitterカード 内容変更が反映される
※改めてツイートし直す必要はない

分かりやすく言うと?
Twitterカードは、ツイートそのものではなく、URLに対して紐づいている


Twitterカード 設定した後は?

 閲覧数:349 投稿日:2020-01-28 更新日:2020-01-28 

Twitterカード 設定した後は?


実装後は、アナリティクスを使用して効果測定する
アナリティクスURL
https://analytics.twitter.com/user/ユーザー名/home

ユーザー名が@hogeの場合のアナリティクスURLは?
https://analytics.twitter.com/user/hoge/home



携帯電話(920SH)で、Twitter電話番号認証

お使いのアカウントに不自然なアクティビティを検出しました。安全のため、パスワードが変更されるまでアカウントはロックしました。



週間人気ページランキング / 11-28 → 12-4
順位 ページタイトル抜粋 アクセス数
1 ビックカメラへの苦情連絡先 | ビックカメラ(EC) 31
2 3 種類ある「楽天カード」利用明細確認方法の内、「楽天e-NAVI」の「Web明細サービス」だけは、過去 15 カ月以前の情報が表示されないため注意が必要です。 | カード 25
3 ソフトバンクの携帯電話番号は「My SoftBank」から無料で変更できます。※My SoftBankから電話番号の変更手続きをする場合には、料金(事務手数料)の発生はありません | ソフトバンク(通信) 23
4 ブックオフの本人確認書類には、住民票が含まれない | ブックオフオンライン(EC) 16
4 「Twitterデータ」をダウンロード出来ない。途中で失敗する。ネットワークエラーが発生する | Twitter 16
5 Twitter動画を無料でダウンロードする方法 | Twitter 14
5 Pawoo | social networking service 14
6 Amazonの「カスタマー Q&A」より製品に関する質問を行っても、回答がつくまで、投稿者自身も確認することは出来ない | Amazon 11
7 インターネットへ突然接続できなくなった理由は、NTTぷららのマイページのパスワードを変更したから | NTTぷらら(インターネットサービスプロバイダ) 9
8 「NTT東日本機器(レンタル)」返却先は「東日本電信電話株式会社」です。「機器が未返却」である旨の連絡は「東日本電信電話株式会社」から来ますが、この件に対してuserが問い合わせることができる相手は契約先により異なります。 | インターネットサービスプロバイダ 7
9 YouTube 動画仕様 | YouTube(動画) 6
9 Windows10で、Twitterタイムラインを一番下(最後)まで自動でスクロールする無料ソフトウェア「Twitterオートスクローラー」 | Twitter 6
9 ログイン 6
10 故障した小型冷蔵庫(46L)をどうするの? | 冷蔵庫(購入履歴) 5
10 30days Album | 写真共有サービス 5
11 「東京23区毎の境界」や「渋谷区内の町毎の境界」は、「Google マップ」で確認できる | 地図 4
11 気になっているラジオCM | ラジオ 4
11 私のYahoo!メールアドレスが流出していました。 | スパムメール(メール) 4
11 2018/2/1 価格調査 / 「ブックオフオンライン楽天市場店」で購入 4
11 通信 カテゴリー 4
2023/12/5 1:01 更新