Twitterカード 対応

social networking serviceTwitter

目次一覧

 状態:-  閲覧数:575  投稿日: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種類ある

 閲覧数:115 投稿日: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

 閲覧数:126 投稿日: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

 閲覧数:59 投稿日: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カード を設定してみて気が付いたこと

 閲覧数:58 投稿日: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カード 設定した後は?

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

Twitterカード 設定した後は?


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

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


Twitter検索結果。「Twitterカード 対応」に関する最新ツイート




週間人気ページランキング / 2-23 → 3-1
順位 ページタイトル抜粋 アクセス数
1 ビックカメラへの苦情連絡先 | ビックカメラ(EC) 48
2 Yahoo!メールで[SendMessageFailed]が表示される場合は、しばらく待ってから再度試す | Yahoo!メール(メール) 45
3 Twitterモーメント作成しようと思い、自分の過去のツイートを遡る。途中までしか遡れない。面倒くさくなって止める | Twitter(social networking service) 32
4 Twitter全ツイート履歴は、2019年7月以降、ツールを使用しなければ取得不可能(index.htmlはダウンロードファイルに含まれないよう仕様変更されている) | Twitter(social networking service) 23
5 お使いのアカウントに不自然なアクティビティを検出しました。安全のため、パスワードが変更されるまでアカウントはロックしました。 | Twitter(social networking service) 11
6 このたび、ご利用のアカウントが凍結されましたのでお知らせしております | Twitter(social networking service) 5
6 Vivaldi でメールアドレス取得するため「Create a Vivaldi account」しようとするも、「504 Gateway Time-out nginx/1.10.3 (Ubuntu)」 | メール 5
6 Amazonの「カスタマー Q&A」より製品に関する質問を行っても、回答がつくまで、投稿者自身も確認することは出来ない | Amazon(EC) 5
6 TwitterでDM送信しようとするも、このアカウントにメッセージを送ることはできません。 | Twitter(social networking service) 5
7 Gmailで「迷惑メールフィルタの設定カスタマイズ」を行うことは出来ない。カスタマイズを行うためには「G Suite Basic(有償版)」へアップグレードする必要がある | Gmail(メール) 4
7 2019/11/28より「AGPtEK M20」を再度使用することにしたため、基本的な操作方法を再確認 | AGPtEK M20(MP3プレーヤー) 4
7 AGPTEK A01TM / 気になる点。まだ良く分かっていない点 | AGPTEK A01TM(MP3プレーヤー) 4
7 YouTube 動画仕様 | YouTube(動画) 4
7 オンラインサービス 0 4
7 Twitterユーザー仕様 / 投稿仕様 | Twitter(social networking service) 4
7 かなり、危険な行為かも? 4
7 Twitter 画像サイズの問題 | Twitter(social networking service) 4
8 AGPTEK A01TM / 商品到着当日の感想 | AGPTEK A01TM(MP3プレーヤー) 3
8 メール カテゴリー 3
8 ラジオ(radikoのタイムフリー)を「Windows10」で録音するために、「らじれこ」を使用した | ラジオ 3
2021/3/2 1:02 更新