Twitter Cards
公式ページ
Twitter Cards（以後Cards）は、Twitterに写真を添付することで、その対象のウェブサイトへの流入を加速させるための機能です。
最近のウェブサイトの特徴として、あらゆるページに画像が多いです。字を並べるよりも、画像の方が印象に残りやすく、感覚的に理解しやすい利点があります。
TwitterなどのSNSでも画像を使用することで、目に付きやすく、印象に残るようにしてウェブサイトに訪れてもらおうということです。
SEO対策
最も代表的なSEO対策として、「タイトル」、「ページの説明」、「キーワード」があります。
<title>タイトル</title>
<meta name="description" content="ページの説明" />
<meta name="keywords" content="キーワード" />
日本語の部分を編集して使ってください。
これからは、ここにSNS対応としてこれらも入れましょう。
<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="ページ名" />
<meta property="og:description" content="ページの説明" />
<meta property="og:type" content="website" />
<meta property="og:url" content="サイトのトップURL" />
<meta property="og:image" content="Cardsで使用する画像のURL" />
これらは、contentの中身を編集して使ってください。
Cards用の設定
Twitterには、Cardsの表示方法に4つあります。
要約
タイトル、説明、サブネイルのみを表示する。
<meta name="twitter:card" content="summary" />
要約と大きな画像
要約のときに比べて表示するサブネイルが大きい。
<meta name="twitter:card" content="summary_large_image" />
さらに、この設定の場合、複数（最大4枚）の画像を表示することができる。
<meta name="twitter:image0" content="Cardsで使用する1枚目の画像のURL" />
<meta name="twitter:image1" content="Cardsで使用する2枚目の画像のURL" />
<meta name="twitter:image2" content="Cardsで使用する3枚目の画像のURL" />
<meta name="twitter:image3" content="Cardsで使用する4枚目の画像のURL" />
アプリ
App StoreやGoogle Playのアプリページに直通できるよう表示する。
<meta name="twitter:card" content="app" />
<meta name="twitter:app:id:iphone" content="App Storeでの表示するアプリのapp ID" />
<meta name="twitter:app:id:ipad" content="App Storeでの表示するアプリのapp ID" />
<meta name="twitter:app:id:googleplay" content="Google Playでの表示するアプリのapp ID" />
プレイヤー
ビデオや音楽などを表示できる。
<meta name="twitter:card" content="player" />
<meta name="twitter:player" content="表示するHTTPS URL" />
<meta name="twitter:player:width" content="表示する横幅(pixels)" />
<meta name="twitter:player:height" content="表示する高さ(pixels)" />
<meta name="twitter:player:stream:content_type" content="MIMEタイプ" />
Twitterの公式には、twitter:siteなどを設定するように書かれてますが、
<meta property="og:site_name" />などがしっかりと定義されていれば、問題なく表示されます。
参考
- About Twitter Cards — Twitter Developers
developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards - もうmeta要素を迷わない！最低限入れるべきmeta要素のまとめ
qiita.com/pompom0c0/items/5c00a188aab744cfc918