カテゴリー:
Twitter
閲覧数:414 配信日:2020-01-28 14:08
「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に対して紐づいている