WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

TwitterCard

TwitterCardとは

Twitterにリンクを貼ると通常そのままURLが表示してしまうが、
Twitter Cardを設定しておくと
設定したmetaに応じてタイトルや画像、デスクリプションが表示され、
クリックすると飛ぶようにできる。

OGPタグとの併用ができるので
OGPタグにない項目を記入する。

<meta name="twitter:card" content="summary_large_image">

このような形で独自のプロパティを記入する。

プロパティ

カードの種類によって記入できるプロパティが変わる。

プロパティ名 内容
twitter:card カードの種類を指定。(必須)省略した場合はsummaryとして扱われる
twitter:site WebサイトのオーナーのTwitterIDを指定。Webサイトの公式ツイッターアカウントなど
twitter:title サイトのタイトルを70文字以内で記入。(og:titleで代用可)
twitter:description サイトの説明文。(og:descriptionで代用可)
twitter:image ウェブページの内容を示す画像のURLを指定
twitter:image:width PhotoCard用。写真の横幅を指定できる。Twitterがサイズ変更する時に正確に画像の縦横比を維持する
twitter:image:height PhotoCard用。写真の縦幅を指定できる。Twitterがサイズ変更する時に正確に画像の縦横比を維持する
twitter:image0 galleryCard用。1枚目の画像(必須)
twitter:image1 galleryCard用。2枚目の画像(必須)
twitter:image2 galleryCard用。3枚目の画像(必須)
twitter:image3 galleryCard用。4枚目の画像(必須)

etc...

カードの種類

summary デフォルトのカード。タイトル(必須)、概要(必須)、サムネイル、Twitterアカウント情報が入る
summary_large_image 内容はsummaryと同じでイメージを大きく目立たせたい時など
photo 写真向けカード
gallery 4枚の画像をギャラリーのように表示
app アプリケーションの情報を表示。Twitterのモバイルアプリケーションのみ。
player ビデオ、オーディオなどのプレイヤーを表示
product 製品情報を表示したい場合い最適

詳しくはこちら
dev.twitter.com

利用申請

metaの記入が終わったら利用申請をする。

初回のみTwitterCardが利用できるかバリデータを通した後申請できる。

cards-dev.twitter.com