以下の内容はhttps://develop.hateblo.jp/entry/webpage-twitter-cardより取得しました。


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




以上の内容はhttps://develop.hateblo.jp/entry/webpage-twitter-cardより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14