Twitterカードとは
Twitterを見ていると単純な画像・テキストだけではなく、画像のような整形されたツイートを見たことはないでしょうか？
これがTwitterカードと呼ばれるものの一種で、リンクとなっているページの内容をツイートで整形して表示してくれます。
このようにTwitterにURLを投稿した際に、Twitterカードで表示するためにはそのURLのWEBページのHTML(metaタグ）を設定する必要があります。
今回はTwitterカードの設定の仕方をご紹介していきます。
Twitterカードの種類とそれぞれの設定方法
Twitterカードにはいくつか種類があります。
どのタイプのTwitterカードを選ぶかは好みになりますので、好きな種類のTwitterカードを選択しましょう。 今回はそれぞれのTwitterカードの概要と、最低限の設定方法のご紹介となります。
Summary Card
Youtubeで視聴制限をする方法！子供のYoutube閲覧をフィルタリング https://t.co/wQYvY0C9hA
— Aprico(アプリコ) (@Aprico2016) August 21, 2017
WEBページの「タイトル」「説明文」「サムネイル画像」の３つが表示された形のものです。
設定方法
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="ユーザーネーム"> <meta name="twitter:title" content="タイトル"> <meta name="twitter:description" content="説明文"> <meta name="twitter:image" content="画像URL">
Summary Card with Large Image
Explore Nepal's diverse and beautiful landscape with these adventure photos https://t.co/IFsMsLenJ2
— National Geographic (@NatGeo) October 16, 2016
名前の通りSummary Cardと同じく「タイトル」「説明文」に加え「大き目の画像」で表示される形のTwitterカードです。
設定方法
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="ユーザーネーム"> <meta name="twitter:title" content="タイトル"> <meta name="twitter:description" content="説明文"> <meta name="twitter:image" content="画像URL">
App Card
アプリ用のTwitterカードです。直接ダウンロードページに飛ばすことができます。
設定方法
<meta name="twitter:card" content="app"> <meta name="twitter:site" content="ユーザーネーム"> <meta name="twitter:description" content="説明文"> <meta name="twitter:app:country" content="国コード"> <meta name="twitter:app:name:iphone" content="アプリ名"> <meta name="twitter:app:id:iphone" content="アプリID"> <meta name="twitter:app:url:iphone" content="カスタムURLスキーマ"> <meta name="twitter:app:name:ipad" content="ipadのアプリ名"> <meta name="twitter:app:id:ipad" content="ipadのアプリID"> <meta name="twitter:app:url:ipad" content="ipadのカスタムURLスキーマ"> <meta name="twitter:app:name:googleplay" content="google playでのアプリ名"> <meta name="twitter:app:id:googleplay" content="google playでのアプリのid"> <meta name="twitter:app:url:googleplay" content="google playのアプリのURL">
Player Card
動画や音声を再生できるTwitterカードです。
The dusk and dawn light in @DeathValleyNPS is amazing. I visit almost every year for #photography. https://t.co/Lcm76CSQrY
— Jonathan Cipriano (@joncipriano) February 22, 2016
Twitterカードの設定方法確認
設定が終わったら以下のTwitterが提供している「Card Validator」を使ってツイッターカードが適切に設定されているか審査してもらいましょう。エラーが発生したらその箇所発見することも出来ます。
表示で問題なければ設定はOKです！
またサムネイル画像などを更新して、キャッシュが消えないという場合も上記のリンクから該当のURLを検証して、情報を最新のものにアップデートすることが出来ます。
ぜひ最終確認にCard Validatorを使うようにしましょう。