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への申請がされます。
（７）Twitterからの登録メール
申請後すぐに、Twitterからのメールが届いて、Twitter Cardsがアクティベートされたことが通知されました。
３．Twitter Cardsの表示
ちゃんとTwitter Cardsが設定できたかどうか、確認しました。PC版の公式サイトで以下のように正常に表示できました。
※画像が無いですが、最初は個別記事には画像を設定しないでTwitter Cardsの画面を撮ったためです。その後テストしたところ、プロフィール画像が表示されました。
やっぱり、記事のサムネイル画像表示させたいですよね。FC2さんお願いします。