• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

TwitterCardが表示されるようにして記事が拡散されやすくしよう!

投稿者アイコン

2015/10/05

書いた人:
tanippa!
カテゴリ:
Web制作   ネタ
1,513 views

今回は、記事がTwitter上で拡散されやすくするための機能であるTwitterCardを表示させるための方法をご紹介したいと思います。

NOIMAGE


広報や宣伝としてのSNSの役割が大きくなっている事はもはや周知の事実だと思います。WEBサイトにおいてもFacebookのogpメタタグなんかは実装しているサイトはかなり見かけます。ただTwitterCardに関しては体感的に実装しているサイトは少ない気がします。

折角ある機能を使わないのは勿体無いので、今回はTwitterCardを表示させるための方法をご紹介したいと思います。

TwitterCardの表示方法

TwitterCardの見た目

img_tmp01

Twitterカードは実装すると、上のような見た目でTwitter上で表示されます。上の例は「Summary」タイプのTwitterCardなのですが、Summaryタイプを含め現在4タイプの表示方法が存在しています。

タイプ 概要
Summaryカード 標準的なタイプ
Summary(Large Image)カード 画像が大きいSummaryカード
Appカード アプリのダウンロードリンクを表示できるカード
Playerカード 動画等をTwitter上で再生出来るカード(このカードを使っているサイトではVineが有名)

過去にPhoto,Gallery,Productカードが存在していましたが、SummaryカードとSummary(Large Image)カードに統合され、現在では使用不可(deprecated)となっています。

今回はこの中で一番標準的なSummaryカードを例として、使い方を説明したいと思います。

ソースコード

HTMLソースのheadタグ内に、以下のmetaタグを記述する必要があります。

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="(記事のタイトル)" />
<meta name="twitter:description" content="(記事の説明)" />
<meta name="twitter:image" content="[サムネイルURL(絶対パス)]" />

例えば、この記事のmetaタグは以下のようになっているはずです。

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="TwitterCardが表示されるようにして記事が拡散されやすくしよう!  |  たねっぱ!" />
<meta name="twitter:description" content="今回は、記事がTwitter上で拡散されやすくするための機能であるTwitterCardを表示させるための方法をご紹介したいと思います。" />
<meta name="twitter:image" content="http://taneppa.net/wp-content/themes/taneppa/images/fb.jpg" />

画像を大きく表示するためにSummary(Large Image)を使用したい場合は、「twitter:card」の「content」を「summary_large_image」にすればOKです。

表示のチェック

metaタグを記述するだけではまだ不十分です。Card validatorを利用して、記述や表示に問題がないか確認しましょう。問題なくカードが表示され、Logにエラーが出ていなければOKです。

img_tmp02

確認が終われば、実際に呟いてみて表示を確認しましょう。

以上

以上がTwitter Cardの実装方法になります。TwitterCardに関してはやって悪くなることはないはずですので、積極的に導入していきましょう!

以上、たにっぱでした〜


この記事を読んだ人はこんな記事も読んでいます

<

>