Twitterカードとは?設定の仕方について解説します

Twitterカードとは?設定の仕方について解説します

Twitterカードについてご紹介します。Twitterカードを使うことでリンク先のWEBページやアプリを整形してツイートの中に表示することができます。今回はTwitterカードの簡単な概要と設定方法についてまとめました。


目次[非表示]

  1. Twitterカードとは
  2. Twitterカードの種類とそれぞれの設定方法
  3. Twitterカードの設定方法確認

Twitterカードとは

Twitterを見ていると単純な画像・テキストだけではなく、画像のような整形されたツイートを見たことはないでしょうか?

これがTwitterカードと呼ばれるものの一種で、リンクとなっているページの内容をツイートで整形して表示してくれます。

このようにTwitterにURLを投稿した際に、Twitterカードで表示するためにはそのURLのWEBページのHTML(metaタグ)を設定する必要があります。

今回はTwitterカードの設定の仕方をご紹介していきます。

Twitterカードの種類とそれぞれの設定方法

Twitterカードにはいくつか種類があります。

どのタイプのTwitterカードを選ぶかは好みになりますので、好きな種類のTwitterカードを選択しましょう。 今回はそれぞれのTwitterカードの概要と、最低限の設定方法のご紹介となります。

Summary Card

WEBページの「タイトル」「説明文」「サムネイル画像」の3つが表示された形のものです。

設定方法

<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

名前の通り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カードです。

Twitterカードの設定方法確認

設定が終わったら以下のTwitterが提供している「Card Validator」を使ってツイッターカードが適切に設定されているか審査してもらいましょう。エラーが発生したらその箇所発見することも出来ます。

Card Validator
ツイッターカードの設定を確認したいURLを入力し、「Preview card」をクリック
上記のサイトにアクセスし、ツイッターカードの設定を確認したいURLを入力し、「Preview card」をクリックします。
ツイッターカードのプレビュー
するとツイッターカードのプレビューを見ることが出来ます。

表示で問題なければ設定はOKです!

またサムネイル画像などを更新して、キャッシュが消えないという場合も上記のリンクから該当のURLを検証して、情報を最新のものにアップデートすることが出来ます。

ぜひ最終確認にCard Validatorを使うようにしましょう。


関連記事