FC2ブログにTwitter Cardsを設定。画像や記事概要などをツイートに表示

公開日： 2014.04.08
最終更新日： 2016.03.04
カテゴリ： FC2ブログカスタマイズ
※本ブログには広告が含まれます

Twitterを公式で見ていると、ツイートの下に「概要を表示」というのがあって、それをクリックすると、ブログなどの概要と画像が表示されることがありますよね。Twitter Cardsというそうです。

Twitterからブログへのアクセスアップに少しでも役立てばよいなあと思い、今回、自分のFC2ブログでもTwitter Cardsを設定してみました。

そのTwitter Cardsの設定方法をブログの記事にメモしておきたいと思います。

Twitter Cardsの説明については英語ですが、下記ページに書いてあります。
https://dev.twitter.com/docs/cards

普通のサイトでしたら、Summary Cardを使うそうです。

以下に、FC2ブログへの設定方法とTwitterへの登録方法を書いていきます。

１．ブログのテンプレートにTwitter Cards用の設定を行う

ブログのテンプレートを編集し、<head>～</head>の間に、以下の記述を追加します。1行目と2行目のTwitterアカウント名は各自のものに置き換えてください。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="Twitterアカウント名(@hogehoge)">
<meta name="twitter:creator" content="Twitterアカウント名(@hogehoge)">
<meta name="twitter:image" content="<%image>">
<!--permanent_area-->
<meta name="twitter:title" content="<%sub_title>">
<meta name="twitter:description" content="<!--topentry--><%topentry_discription><!--/topentry-->">
<!--/permanent_area-->
<!--not_permanent_area-->
<meta name="twitter:title" content="<%blog_name>">
<meta name="twitter:description" content="<%introduction>">
<!--/not_permanent_area-->

トップページでは、タイトルはブログ名、概要はブログの紹介文。記事エントリーページでは、タイトルは記事タイトル(%sub_title)、概要は記事の概要(%topentry_discription)にしています。

画像については、FC2ブログでは記事画像（サムネイル）のURLのみを取得する変数がないため、仕方なくですが、トップページと記事エントリーページ共に、ブログのプロフィール画像(%image)にしています。

２．Twitterサイトでのテストと申請

（１）下記ページにアクセスします

https://dev.twitter.com/docs/cards/validation/validator

（２）Twitterアカウントでログインします

（３）Summaryカードを選択します

（４）Twitter Cardsのテスト

Card Validator画面において、「Validate & Apply」タブを選択し、自分のサイトのURLを入力して、Go!ボタンをクリックします。Twitter Cardsのテストが行われます。

（５）Twitter Cardsのテスト結果

このような画面が現れます。テスト結果がOK（緑色のランプ）になると、Request Approvalボタンをクリックして、Twitter Cardsの申請へと進みます。

（６）Twitterに申請を行う

私の場合、Website DescriptionとWebsite Twitter Usernameが空欄でしたので、そこにブログの概要とTwitterアカウント名を入力しました。他の必須項目は自動的に埋まってました。
入力後、Request Approvalボタンをクリックすると、Twitterへの申請がされます。