FC2ブログの記事を「Twitter Cards」に対応させる

Twitter Cards

Twitterに記事のURL（リンク）が投稿されたとき、個別投稿ページの表示が拡張される「Twitter Cards」にこのブログを対応させた。Twitter利用者ならほとんどの人が見たことあると思われるが、具体的には以下のような形になる。

Twitter Cardsを設定した記事の投稿画面
Twitter Cardsに対応した記事を投稿したときのサンプル。記事のタイトルや概要に加え、画像も表示されていることがわかる。

記事タイトルの他、記事の概要や画像、さらに紐付けされたTwitterアカウントへのリンクまで作られる「かなりリッチな」表示なっている。個人的には直接的な（Twitterからの）アクセス数増加に繋がるとはあまり思っていないのだが、「一目で記事の中身がそれなりにわかる」「投稿に記事のURLしか含まれていない場合でも、タイトルや概要が勝手に補完される（のでわかりやすい）」というメリットがあるのは見逃せない。

以下にFC2ブログでの具体的な対応手順を紹介するので、興味がある方は参考にしてみて欲しい。

FC2ブログを「Twitter Cards」に対応させる方法

少々面倒くさい「Twitter Cards」への対応

先に少々ネガティブなことを書いてしまうと、以前書いたことがあるFacebookのOGP（Open Graph Protocol）の設定などと違い、Twitter Cardsへの対応はちょっと面倒だ。具体的には次のような2段階の手順が必要になり、特に後者の登録作業があるためテンプレートのカスタマイズで終わらないのがネックになる。

  1. ブログのテンプレートにTwitter Cards用のメタタグを記述する
  2. Twitterにブログの登録をおこなう

ただ、詳しくは後述するが、実際にやってみて以前（2012年の頃）に比べて登録時のタイムラグが大幅に減っていることが確認できた。かつては返信が来るまで1週間以上かかっていたらしい申請作業が、現在ではほぼ瞬時に終わるようになっている。もちろん、それでも「一手間」はかかるためそれをどう考えるかだが、個人的にはそこまで「大変」という印象はなかったと感じている。

1. FC2ブログのテンプレートにTwitter Cardsのためのメタタグを追加する

それでは具体的な手順に入ろう。とにもかくにもまず以下のタグを<head>から</head>の間のどこかに記述する必要がある。実はTwitter Cardsにもいくつかの種類があるのだが、ブログ記事なら基本的にこの「summary」設定（タグ）でかまわない。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@[Twitter ID]" />

コードの一部が間違っていたので修正。

これでページがTwitter Cardsに対応していることと、表示に使うTwitter Cardsの種類、さらにページに紐付けされるTwitterのアカウントが設定される。Twitterのアカウントは当然自分のものである必要があるが、別途ブログ用のアカウントを作ってあるならそちらを設定しておこう。後述するが、ページの管理者や執筆者用のアカウントは別にまた設定することができるからだ。

お次は実際に表示させる内容を設定する作業になるが、実はTwitter CardsはFacebookのOGPと互換性がある。簡単に言えば、すでにOGPが適切に設定されていればTwitter用の記述は基本的に必要ない。このブログでは以前FC2ブログでOGPを設定する記事を書いたことがあり、その記事で紹介したタグがそのまま流用できる。こちらを使えばFacebookへの対応も自動的に終わるため、個人的には次の記事を読んでOGPの設定を済ましてしまうことをおすすめしたい。

もちろん「Facebookなんて興味がない！Twitterにだけ対応できればいいんだ！！」という人もいると思うので、そういう方は以下のコードを（前出のコードと同じように）<head>タグの中にコピーしていただきたい。

<!--myimage--><meta name="twitter:image" content="<%image>" /><!--/myimage-->
<!--index_area-->
<meta name="twitter:title" content="<%blog_name>" />
<meta name="twitter:url" content="<%url>" />
<meta name="twitter:description" content="<%introduction>" />
<!--/index_area-->
<!--permanent_area-->
<meta name="twitter:title" content="<%sub_title>" />
<meta name="twitter:url" content="<%url>blog-entry-<%pno>.html" />
<meta name="twitter:description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->

これでほとんどの設定は終わりだが、追加で「サイトのドメイン」と「執筆者（管理者）のTwitterアカウント」を設定できる。具体的には次のコードを同じく<head>タグの中に記述する。

<meta name="twitter:domain" content="[「http://」部分を除いたブログURL]※1" />
<meta name="twitter:creator" content="@[執筆者のTwitter ID]" />

※1：例「128bit.blog41.fc2.com」など

前者の「twitter:domain」はカード上の「view on web」が「view on [設定したドメイン名]」になるだけなので、正直なところあまり意味はない。有料プランで独自ドメインを使っているなら設定しておく、ぐらいでいいだろう。

後者は前述の「ブログ用のアカウントではない、執筆者（管理者）自体のTwitterアカウント」などを設定しておく項目になる。カード上では以下の画像のように「By [アカウントの名前] @[アカウントのID]」という形で表示される。「ブログ用のアカウント」と「普段使いのアカウント」をきっちり分けている場合は、追加しておいて損はない項目だろう。

「twitter:creator」を設定した場合の表示サンプル
「twitter:creator」を設定した場合のサンプル画面。紐付けしたアカウントとは別に、もうひとつクリエイター（執筆者や管理者）のアカウントがTwitter Cardsに表示されている。（赤枠の部分。）

以上でブログ側の作業は終了。次はTwitter Cardsが適切に設定されているかどうかのチェックと、Twitterへの登録作業になる。

2. Twitter Cards用メタタグのチェックとTwitterへの登録

最初に書いたとおりにTwitter CardsはFacebook OGPと違い勝手に認識はしてくれないので、Twitterへのブログの登録作業が必要になる。ライブドアブログのようにブログサービス側で対応してくれるところもあるのだが、FC2ブログではそんな親切なことはしてくれないので、すべて自分で手続きをしなければならない。

まず、以下のTwitter Cardsのバリデーション（チェック）ツールと申請フォームを兼ねたページがあるのでアクセスする。まずログインを求められるはずなので、取得済みのTwitterアカウントでログインする。タグで設定した（「twitter:site」に書き込んだ）アカウントは必ず持っているはずなので、それを使えば間違いはないはず。

無事にログインできれば、「Card Validator」というツールにアクセスできる。まず初っぱなにカードの種類を選ぶポップアップが表示されるので、「summary」を選ぶ。すると実際のCard Validatorのページに移動するので、「Validate & Apply」を選択。あとは画面に表示されるURLの入力欄に適当な記事のURLを入力し、「Go!」を選べば瞬時にチェックが終了する。

Card Validatorの画面
「Card Validator」の画面。赤枠の部分に記事のURLを入れると、青枠の部分に各種項目のチェック結果が表示される。さらにカードのプレビューもおこなえるため、事前によく確認しておきたい。

左側には項目が適切に設定されているか表示され、右側にはプレビューが表示される。貼り付け時にミスなど起こってなければ特に問題はないと思われるが、もしエラーが出ていたら値などに間違いがないか再確認してもらいたい。

特にエラーがなければそのまま登録作業に入れる。上の画像ではすでに登録済みのため、緑色で「[url] approved」と表示されているが、サイトが未登録の場合は下の画像のように黄色で「[url] not approved」と表示されている。Twitter Cardsのタグ自体にエラーがなければ「Request Approval」というボタンが表示されているはずなので、そこから申請をおこなう。

未承認時には黄色で警告されるCard Validatorの画面
ブログ自体がまだ承認されていない状態での表示。黄色で表示され申請作業が必要であることがわかる。

「Request Approval」をクリックすると即座に入力フォームが表示される。項目自体はそこそこあるが、「Administrative Contact」などほとんどがすでに入力済みのはずなので、以下の画像の3項目だけ入力すればいい。

Twitter Cards申請時の情報入力欄
Twitter Cardsの利用を申請するための入力フォーム。上からブログのURL（ドメイン）、概要、Twitterアカウントを入力するだけ。他の部分はすでに入力済みのはずだ。

「Mark my cards as containing sensitive content」はブログが暴力表現などデリケートな内容を含む場合にのみチェックすればいいので、普通はそのままで問題なし。「Website Twitter Username」はログインした（「Administrative Contact」で表示されている）アカウントをそのまま入れればいいが、個人用アカウントでログインしていて、ブログ用アカウントが別にあるならそのIDを入力しておこう。

あとは「Request Approval」をクリックすれば作業は完了する。前述のように以前は認証を手動でおこなっていたらしく、結果がわかるまでかなり時間が必要だったらしいのだが、現在は全自動のようで一瞬でメールが送られてくる。無事に認証されれば「Your Twitter card is ready!」というタイトルのメールが届いているはずなので、早速Twitterでチェックしてみよう。結果は即座に反映され、記事の新旧も関係ないので、簡単にTwitter Cardsを確認できるはずだ。

申請完了後に送られてくる「Your Twitter card is ready!」のメール
申請作業が完了すると届くメール。申請するカードによって文言が多少異なると思われる。

FC2ブログの場合は（ライブドアブログなどと違い）、やはり申請の手間が障害になりそうだ。ただ、申請自体は問題がなければ一回で終わるし、結果も瞬時に返ってくるので、Twitterを使っているなら試してみる価値は十分にあるのではないかと思う。