目次一覧
状態:-
閲覧数:3,061
投稿日: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カード 設定した後は？
実装手順 ／ 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種類ある
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
実装手順
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">
<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
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="画像の説明"> <!-- 画像の説明 -->
<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" />
<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カード を設定してみて気が付いたこと
「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="画像の説明"> <!-- 画像の説明 -->
<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に対して紐づいている