Twitterカードの設定

ブログの更新をTwitterと連動させている皆さん。
Twitterカードはきちんと設定していますか？
今回はTwitterカードの正しい設定方法を紹介していきます。

Twitterカードとは

ブログの更新など、リンク付きツイートが投稿された時に、そのリンク先ページの概要、アイキャッチ画像などをツイート上に表示させてくれる機能です。

「概要を表示」をクリックすると

記事のタイトル、概要、アイキャッチ画像が表示されます。

ユーザーにとっても、記事にどんな内容が表示されるか、概要を見ることができる嬉しい機能ですね。

Twitterカードの設定方法

設定方法は以下のソースを</head>の直前にコピペし、「@アカウント名、記事のタイトル、記事の概要、記事のアイキャッチ画像URL」部分を編集するだけ。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@アカウント名">
<meta name="twitter:creator" content="@アカウント名">
<meta name="twitter:title" content="記事のタイトル">
<meta name="twitter:description" content="記事の概要">
<meta name="twitter:image" content="記事のアイキャッチ画像URL">

私の場合、MovableTypeで記事を出力させているので、テンプレートはこのようなソースになりました。

<MTSetVarBlock name="og_image"><mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></MTSetVarBlock>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@アカウント名">
<meta name="twitter:creator" content="@アカウント名">
<meta name="twitter:title" content="<$MTEntryTitle$>">
<meta name="twitter:description" content="<$MTEntryBody remove_html='1' trim_to='200'$>">
<meta name="twitter:image" content="<$MTGetVar name='og_image'$>">

はじめに記事の中から一番最初に登場する画像URLを取得し、後の「twitter:image」に取得したURLをセットさせています。
MovableTypeを使っている人は、上記のソースをそのまま使えますのでぜひお試しあれ。