カテゴリー:
Twitter
閲覧数:638 配信日:2016-11-07 22:13
実装手順
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