カテゴリー:
Twitter
閲覧数:577 配信日:2020-01-28 12:16
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タグの閉じタグについて。何か特別な意味はありますか？