PlusOne Blog

前回はtwitterカードについて紹介しました。
今回は、そのtwitterカードを設定する方法を紹介します。
　
　
head内にmetaタグとして、下記の記述を追加する。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
　
①
表示するtwitterカードの形式を設定します。
カードの種類ごとに下記値を入れます。
Summary Card（画像が小さいカード）は「summary」を、summary_large_image（画像が大きいカード）は「summary_large_image」を設定します。
=====================
（例）
<meta name=”twitter:card” content=”summary” />
=====================
　
②
Twitterのユーザー名を指定します。
=====================
（例）
<meta name=”twitter:site” content=”@p1tweet1″>
=====================
　
③
Twitterカードに表示されるタイトルを設定します。
=====================
（例）
<meta name=”twitter:title” content=”株式会社プラスワン”>
=====================
　
④
Twitterカードに表示される説明文を設定します。
文字数制限はありませんが、実際にtwitterカードに表示される文字数までしか表示されません。
=====================
（例）
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
=====================
　
⑤
Twitterカードに表示される画像を設定します。
=====================
（例）
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
　
①~⑤をまとめると下記のようになります。
=====================
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@p1tweet1″>
<meta name=”twitter:title” content=”株式会社プラスワン”>
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
　
★→これをhead内に記述します。
　
　
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認できます。
Card validator