テクノモンキーのアプリ開発日記

テクノモンキーの開発ブログです。iOS、Android、Unity、Cocos2d-xなどアプリ開発関連のTipsやアプリ開発に役立つ情報を発信します。

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


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

kijimapp.com


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

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


 Webページに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カード導入した方が良さそうです。