How to use Twitter Card
1. 表示するコンテンツの設定
Twitter Cardを利用するにはhtmlのheadに記載するmetaタグを使います. 表示するコンテンツを設定するにはtwitter:cardを設定します.
<meta name="twitter:card" content="summary_large_image" />contentには以下の4つの値を設定することができます. それぞれ, summaryが1:1の大きさのカード, summary_large_imageが2:1の大きさのカード, appがアプリケーションのインストール画面, playerが音楽の再生プレビューです
カードタイプは、“summary”、“summary_large_image”、“app”、“player”のいずれかになります。
2. ソースと著作者の設定
ソースと著作者(=帰属)を設定するにはtwitter:siteとtwitter:creatorを編集します. この設定は必須ではありません
<meta name="twitter:site" content="@ShunDeveloper" />
<meta name="twitter:creator" content="@ShunDeveloper" />siteとcreatorの違いはsiteがWebサイトの制作者であることに対して, creatorはリンク先のコンテンツ(内容)の制作者であることです.
twitter:site @username of website. twitter:creator @username of content creator.
3. 画像の設定の設定
コンテンツの内容を設定するにはtwitter:imageとtwitter:altを編集します. どちらの項目も任意です.
imageはそのページを表現するような画像のURLを設定します. 複数のページに渡るような一般的な画像, すなわちサイトのロゴや著者の写真等の使用は非推奨です. アスペクト比は2:1で, サイズは300*157ピクセルから4096*4096ピクセルまで対応しています. ファイルのサイズは5MB以下でフォーマットはJPG, PNG, WEBP, GIFが対応しています. 解像度の高い画像ですと5MBを超える可能性があるので事前に確認しておくと良いと思われます.
A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
今回は, 自分のブログに載せる予定の画像を用意しました.
image:altは画像を視覚に障がいを持つユーザーに伝える為の説明です. 最大で420文字まで記述することができます.
A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.
このサイトではコードはそれぞれ以下の様になりました. (画像は絶対パスで記載することにお気を付けください)
<meta name="twitter:image" content="link_to_image" />
<meta name="twitter:image:alt" content="私のブログで使う予定のTwitterカード" />4. 紹介文の設定
コンテンツの内容を設定するにはtwitter:titleとtwitter:descriptionを編集します. 尚, titleは必須項目です.
このサイトでは以下の様に設定をしています.
<meta name="twitter:title" content="Twitter Cardの使い方" />
<meta name="twitter:description"content="Twitter Cardを自分のブログに導入してみたいと思い練習で作成しました. 下記に導入のやり方を書いたので良ければご参照下さい"/>titleの文字数の制限ですが, Twitter側で切り捨てが行われます. AndroidとiOSでは2行までで, Webでは1行です.
A concise title for the related content.Platform specific behaviors: iOS, Android: Truncated to two lines in timeline and expanded Tweet Web: Truncated to one line in timeline and expanded Tweet
descriptionの文字数の制限ですが, スマートフォンとWebで挙動が大きく異なります. AndroidとiOSでは表示されず, Webでは1行です.
5. 最後に
本ページはTwitter Cardの日本語版サイトの説明が英語版に比べ不足していたため作成しました. 誤字脱字, 間違い等ありましたら@ShunDeveloper (Twitter or Github)までご連絡下さい.