TOP > Webサービス > title - Twitterカードって何?誰でもできる設定の仕方

ITやモバイル機器、iPhone、手帳や本など。
MENU

Twitterカードって何?誰でもできる設定の仕方

2016011300.png


情報管理LOGの@yoshinonです。
今回は、サイト運営者やブログをやっている人向けの記事です。

Twitterカード使っていますか?
何となく存在は知っていても、よく分からないという人も多いのではないでしょうか?実はこれ、設定すると、Twitterでクリックされる可能性が、かなり高まります。
ぜひとも、設定してみてください!


  
【 Twitterカードって何?誰でもできる設定の仕方 】  

 1.Twitterカードとは?

 2.Twitterカードの種類

 3.Twitterカードの設定の仕方







checkmark.png 1.Twitterカードとは?

皆さんは、Twitterのタイムラインで、このようなものを見たことはないでしょうか?

2016011301.png


「概要を表示」をクリックすると…

2016011302.png



このように、サイトのサムネイルやアイキャッチと共に表示されるのです。

これが、Twitterカードというものです。
ブログやサイトを運営している人は、ぜひ設定しておきたいですよね?

まず、基本の「キ」ですが、Twitterカードというのは、Twitter自体の設定を変更することを意味するのではなく、むしろサイトやブログの設定を見直すことで実現できます。正確には、metaタグを追加することで実現できます





checkmark.png 2.Twitterカードの種類

Twitterカードには、全部で7種類あります。
とはいえ、実際はSummaryカードか、大きな画像付きのSummaryカードが主流ですね。


1.Summaryカード
デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。先ほど紹介したのが、それです。

2016011303.png


2.大きな画像付きのSummaryカード

Summaryカードに似ていますが、画像が目立つように使用されています。

2016011304.png


3.Photoカード
写真のみを含めたカードです。

2016011305.png


4.Galleryカード
4つの写真を集めて強調したカードです。

2016011306.png


5.Appカード
モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカードです。
こちらは、PCで見た状態。

2016011307.png


そして、こちらがモバイルで見た状態。APPのダウンロードリンクが、表示されるのが特徴です。

2016011308.png


6.Playerカード
動画やオーディオ、スライドショーを視聴できるカードです。

2016011309.png


7.Productカード
製品情報のために最適化したカードです。あんまり使わないかな。

2016011310.png



Summaryカードは、上でも触れましたが、こんな感じで表示されます。
これは、実際にTwitterカードのツィートを埋め込んだ例です。








checkmark.png 3.Twitterカードの設定の仕方

では、Twitterカードを設定していきましょう。

Twitterカードは、公式サイトでタグなども載せられています。

Summaryカード | Twitter Developers
Summaryカード | Twitter Developers





一番多く使われているSummaryカードのタグは、このようになっています。

<meta name=\"twitter:card\" content=\"summary\" />
<meta name=\"twitter:site\" content=\"@自分のTwitteID\" />
<meta name=\"twitter:title\" content=\"ブログやサイトのタイトル\" />
<meta name=\"twitter:description\" content=\"サイトの説明.\" />
<meta name=\"twitter:image\" content=\"表示させたいアイキャッチ画像のURL\" />
<meta name=\"twitter:url\" content=\"ブログやサイトのURL\" />



これを、自分のブログやサイトのHTMLのmetaタグとして、埋め込めばOK!なのです(の下あたりかな?)。
上のタグをコピペして、赤文字の部分だけ変えると良いです。

ここまでできたら、あとはTwitterカードのサイトできちんと反映されているか確認しましょう。
確認は、ここでできます↓

Card Validator | Twitter Developers
Card Validator | Twitter Developers





自分のTwitterIDでログインしておきます。
そして、自分のブログやサイトのURLを入力します。

2016011311.png


「Preview card」をクリックすると…、このように現れれば成功です!

2016011312.png





 eyeglass2.png 情報管理LOGの眼
 ブロガーの皆さんは、ぜひ設定してみてください

ブログを運営しているからには、少しでも多くの人にきてもらいたいものです。そのために各種SNSを使われている人も多いと思います。今回、紹介したTwitterカードは、インパクトがあるので、クリック数がかなり変わってくると思いますよ。
全く難しくないので、ぜひともチャレンジしてみてください。




関連記事

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://hokoxjouhou.blog105.fc2.com/tb.php/477-a3600e5e
該当の記事は見つかりませんでした。
SEO
loading
情報管理LOG