WebページにTwitterカードを導入する方法

令和まで残り 18日です！#WEBOOL #令和 #新元号 #令和まであと何日？ #令和カウントダウンタイマー https://t.co/qQJhFs7X2o
— テクノモンキー（サブ） (@WordPress4081) 2019年4月11日

昨日、WEBOOLにTwitterカードを導入しました。

kijimapp.com

Twitterカードを導入すると、WebサイトのURLをTwitterで表示した際、いい感じに表示されるようになるので、新規ユーザーの獲得や、アクティブユーザー増加に繋がるという噂です。（はてなブログにURLを貼り付けた場合でも画像が表示されるようになるっぽい）

やってみたら簡単だったので、今回はTwitterカードを導入する方法についてまとめていきたいと思います。

WebページにTwitterカードを導入したい場合は、まず、HTMLに以下のような記述をします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<!-- TwitterCard--->
<meta name="twitter:card" content=" Twitterカードの種類「summary_large_image」or 「summary」" />
<meta name="twitter:site" content="@Twitterアカウント名" />
<meta property="og:url" content="WebページのURL" />
<meta property="og:title" content="Webページのタイトル" />
<meta property="og:description" content="Webページの説明" />
<meta property="og:image" content="Webページの紹介画像のパス" /> 
<!-- TwitterCard--->

Twitterカードの種類により見え方が変わります。「summuray」か「summary_large_image」のどちらかを選んでおけばOKです。

HTMLへの設置が終わったら、Card validatorでTwitterカードを設置したURLを入力して、正しく反映されたかチェックします。
ネットを調べると、設置してからTwitterカードが反映されるまでに少し時間がかかるっていうことが書かれてましたが、僕の場合はすぐ反映されてました。（タイミングによるのかも）

cards-dev.twitter.com

Twitterカードを設置するだけで、見え方がだいぶ変わってくる気がするので、Twitterなどで共有したいWebページがある場合はTwitterカード導入した方が良さそうです。