
ツイッターの集客力を最大限引き出す裏機能 ツイッターカード
ここでは、ツイッターの集客力を最大限に引き出す活用法について書いていきたいと思います。
SNSを利用した集客方法については別の記事にまとめさせていただきましたのでそちらをご覧になってみてください。
目次
ツイッターとは?
ツイッターは、140文字以内に自分の思っていることを「ツイート」という形で表現することのできるSNSで、世界で2番目に利用されているSNSです。
様々な人の目に自分の思っていることを広めることができるので、集客することにおいてよく使われるサービスになります。
ツイッターは、ツイートだけでなくタグをつけれる機能や、自分のほしい情報を検索することができる検索機能など、様々な機能がついているのですが、ツイッターには隠された機能がついており、その機能を利用することで集客力を倍増させることができます。
ツイッターカード
ツイッターを利用している方ならわかると思いますが、ツイッターを普通に利用してツイートをしようとすると、ツイート文と写真しかツイートをすることができませんが会社のツイートなどを見たときに、通常ツイート文の下に写真が来るようになっているのですが写真を左に小さく表示させて、右に文章を載せているものであったり、写真が上に大きく表示されて下に文章が来ているような形であり、なおかつ写真をクリックするとリンクに飛ぶことができる機能をつけることができたりと、普通に利用しているだけでは使えない機能がツイッターには存在しています。
それがツイッターカードというものです。
ツイッターカードは、ツイッターが提供しているサービスなのですが、ツイッターは世界で出来たサービスのためにツイッターカードについての説明が英語であるため、個人で利用している人は少なく、企業などが利用することが多いです。
このツイッターカードをうまく活用することができれば、今までツイッターで集客を行っていた方は,更に集客力を上げることができますし、見栄えが良くなるためよく見られるようになります。
ツイッターカードの設定方法
ツイッターカードを利用するには、ツイッター側に自分のサイトや記事などを申請して申請を通れば利用することができるようになります。
1.ツイッターカード側が提供しているコードの中から好みのものを選択してそのコードを自身が提供しているサイトに貼り付けます。
2.コードの入ったサイトをツイッターカードを申請するサイトから申請を行います。
3.申請を通れば利用可能となります。
一通りの流れはこのような感じで、審査もすぐに結果が出るのですぐに利用可能になります。
コードの種類
Summary Card
デフォルトのカード。タイトル、概要、サムネイル、Twitter アカウント情報が入ります。
引用元 https://dev.twitter.com/cards/types/summary
サンプルコード
<!– Twitter Cards のプロパティのみを使用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Summary Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta name=”twitter:title” content=”ページのタイトル” /> 6.<meta name=”twitter:description” content=”ページの説明文” /> 7.<meta name=”twitter:url” content=”サイトのURL” /> 8.<meta name=”twitter:image” content=”表示させたい写真のURL” /> |
<!– OGP と併用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Summary Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta property=”og:title” content=”ページのタイトル” /> 6.<meta property=”og:description” content=”ページの説明文” /> 7.<meta property=”og:url” content=”サイトのURL” /> 8.<meta property=”og:image” content=”表示させたい写真のURL” /> |
Summary Card with Large Image
Summary Card と同じだけど、イメージ画像を目立たせたい場合に適しています。
引用元 https://dev.twitter.com/cards/types/summary-large-image
サンプルコード
<!– Twitter Cards のプロパティのみを使用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Summary Card with Large Image” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta name=”twitter:title” content=”ページのタイトル” /> 6.<meta name=”twitter:description” content=”ページの説明文” /> 7.<meta name=”twitter:url” content=”サイトのURL” /> 8.<meta name=”twitter:image” content=”表示させたい写真のURL” /> |
<!– OGP と併用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Summary Card with Large Image” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta property=”og:title” content=”ページのタイトル” /> 6.<meta property=”og:description” content=”ページの説明文” /> 7.<meta property=”og:url” content=”サイトのURL” /> 8.<meta property=”og:image” content=”表示させたい写真のURL” /> |
Photo Card
写真向けカード。Twitter で写真を投稿した時のように、画像が大きく表示されます。
引用元 https://dev.twitter.com/cards/types/photo
サンプルコード
<!– Twitter Cards のプロパティのみを使用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Photo Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta name=”twitter:title” content=”ページのタイトル” /> 6.<meta name=”twitter:description” content=”ページの説明文” /> 7.<meta name=”twitter:url” content=”サイトのURL” /> 8.<meta name=”twitter:image” content=”表示させたい写真のURL” /> |
<!– OGP と併用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Photo Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta property=”og:title” content=”ページのタイトル” /> 6.<meta property=”og:description” content=”ページの説明文” /> 7.<meta property=”og:url” content=”サイトのURL” /> 8.<meta property=”og:image” content=”表示させたい写真のURL” /> |
Gallery Card
複数の写真をギャラリーのように表示したい場合のカード。
引用元 https://dev.twitter.com/cards/types/gallery
サンプルコード
<!– Twitter Cards のプロパティのみを使用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Gallery Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta name=”twitter:title” content=”ページのタイトル” /> 6.<meta name=”twitter:description” content=”ページの説明文” /> 7.<meta name=”twitter:url” content=”サイトのURL” /> 8.<meta name=”twitter:image” content=”表示させたい写真のURL” /> |
<!– OGP と併用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Gallery Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta property=”og:title” content=”ページのタイトル” /> 6.<meta property=”og:description” content=”ページの説明文” /> 7.<meta property=”og:url” content=”サイトのURL” /> 8.<meta property=”og:image” content=”表示させたい写真のURL” /> |
App Card
アプリケーションの情報を表示したい場合のカード。Twitter のモバイルアプリでのみ表示されます。
引用元 https://dev.twitter.com/cards/types/app
サンプルコード
<!– Twitter Cards のプロパティのみを使用した場合のサンプル –> 2.<meta name=”twitter:card” content=”App Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta name=”twitter:title” content=”ページのタイトル” /> 6.<meta name=”twitter:description” content=”ページの説明文” /> 7.<meta name=”twitter:url” content=”サイトのURL” /> 8.<meta name=”twitter:image” content=”表示させたい写真のURL” /> |
<!– OGP と併用した場合のサンプル –> 2.<meta name=”twitter:card” content=”App Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta property=”og:title” content=”ページのタイトル” /> 6.<meta property=”og:description” content=”ページの説明文” /> 7.<meta property=”og:url” content=”サイトのURL” /> 8.<meta property=”og:image” content=”表示させたい写真のURL” /> |
Player Card
ビデオ、オーディオなどのメディアプレーヤーを表示するカード。
引用元 https://dev.twitter.com/cards/types/player
サンプルコード
<!– Twitter Cards のプロパティのみを使用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Player Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta name=”twitter:title” content=”ページのタイトル” /> 6.<meta name=”twitter:description” content=”ページの説明文” /> 7.<meta name=”twitter:url” content=”サイトのURL” /> 8.<meta name=”twitter:image” content=”表示させたい写真のURL” /> |
<!– OGP と併用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Player Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta property=”og:title” content=”ページのタイトル” /> 6.<meta property=”og:description” content=”ページの説明文” /> 7.<meta property=”og:url” content=”サイトのURL” /> 8.<meta property=”og:image” content=”表示させたい写真のURL” /> |
Product Card
製品情報を表示したい場合に最適なカード。ショッピングサイトとかなら、製品ページで使えばいい感じ。
引用元 https://dev.twitter.com/cards/types/product
サンプルコード
<!– Twitter Cards のプロパティのみを使用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Product Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta name=”twitter:title” content=”ページのタイトル” /> 6.<meta name=”twitter:description” content=”ページの説明文” /> 7.<meta name=”twitter:url” content=”サイトのURL” /> 8.<meta name=”twitter:image” content=”表示させたい写真のURL” /> |
<!– OGP と併用した場合のサンプル –> 2.<meta name=”twitter:card” content=”Product Card” /> 3.<meta name=”twitter:site” content=”@サイト名” /> 4.<meta name=”twitter:creator” content=”@ユーザー名” /> 5.<meta property=”og:title” content=”ページのタイトル” /> 6.<meta property=”og:description” content=”ページの説明文” /> 7.<meta property=”og:url” content=”サイトのURL” /> 8.<meta property=”og:image” content=”表示させたい写真のURL” /> |
サンプルコードを自分のサイトのHTMLに埋め込むことで利用できるようになります。
このコードをそのままコピペして貼り付けても利用することはできません。
日本語で表記している部分を自分ページに合わせたものに変更して利用してください。
サイト主から
ツイッターカードはツイッターを利用しているだけでは見つけることのできない機能です。
少し調べればわかりますが、ほとんどの人がその少しの作業をしません。
なので、普通にツイッターで集客している人よりも有利に立って集客を行うようにしましょう。