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

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

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


目次

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

Twitterカードとは

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

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

このようにTwitterカードで表示するためには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">p <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カードの設定方法確認

設定が終わったら以下のURLから適切に設定されているか審査してもらいましょう。エラーが発生したらその箇所を直すようにしましょう。

Card Validator

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


関連記事