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

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

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

TwitterCardの表示方法

TwitterCardの見た目

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

過去に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="https://taneppa.net/wp-content/themes/taneppa/images/fb.jpg" />

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

表示のチェック

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

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

以上

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

以上、たにっぱでした〜