Blogger ブログを Twitter Cards に対応させる方法

このブログに

いつも楽しく拝読しています。
ところで、Twitter CardsのSummaryができるかBloggerへMetaタグを入れてみたのですがサムネイル画像が出なく、クリボウ様のサイトに情報ないかなぁと思い来てみた次第です。
もし、次のネタが決まっていないのなら、この辺りを記事にしていただければ嬉れしゅうございます m (_ _) m
Kats

というコメントが入っていたので、やってみたところ

Twitter Cards (Summary) を Blogger に適用する方法

できました。導入方法をこちらでまとめておきたいと思います。

Twitter Cards って何？

最初に Twitter Cards についてです。上の画像を見て分かるかと思いますが、Twitter のツイートに URL が含まれたときにそのリンク先ページのタイトルや要約、画像を自動的に挿入してくれるのが Twitter Cards の機能です。

これを表示させるためには、リンクされるブログの方で Twitter Cards に対応したメタタグをブログテンプレートに記載しておかないといけません。Facebook の OGP（Open Graph Protocol）と同じようなものと言うと理解しやすいかもしれません。

今回はシンプルな Summary Card の導入についてみていきます。参考にさせてもらったのはこちらのサイト。ありがとうございます！

ソーシャルメディアマーケティングラボ

導入方法

早速、Twitter Cards 用のメタタグを用意します。クリボウが使用したのは次のタグです。

2 行目赤字部分には、ブログに関する Twitter のアカウント名を入力します。これはオプションなので、特にアカウントがない場合には行ごと削除してかまいません。他の行は、どのブログでも通用するよう Blogger のテンプレート用データタグを使用しているので、そのまま使えるはずです。これらのメタタグを Blogger の管理画面「テンプレート＞ HTML の編集」で <head> のすぐ後に貼り付けて保存します。

その後、Twitter Developers で Twitter Cards の申請を行います。

Card Validator | Twitter Developers

「Card Catalog」のポップアップが出たら「Summary」を選択、「Validate & Apply」タブを押して、自分のブログの好きな投稿の URL を入力して「Go!」を押してください。

ここで、ブログの Twitter Cards 対応状況が確認できます。右側にはプレビューが表示されます。「Standard Tags」の項目がグリーンだったら、ブログ側の設定は問題なしです。

「Request Approval」を押して申請画面を開きます。Twitter アカウントなど、必要事項を記入して（ほとんど入力済みだと思います）「Register Domain」ボタンを押します。これで全作業が終了です。意外と簡単なんじゃないでしょうか。

これで Twitter 経由のアクセスが少しでも増えるといいですね。

技術的なことなど

ここから先は、気になる人だけ読んでください。先ほどのメタタグについての解説です。

1: <meta content='summary' name='twitter:card'/>
2: <meta content='@kuribo_blogger' name='twitter:site'/>
3: <meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/>
4: <meta expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url' name='twitter:image'/>
5: <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

Twitter Developers のドキュメントで例示されていたメタタグを Blogger ブログ用に調整してみました。タグ内の属性が読みにくいのは、Blogger の HTML エディタが属性をアルファベット順に並べ替えてしまうので、混乱を避け最初からその順にしているためです。

１．まず、どの行でも、meta タグの最後に / を入れておきます。こうしておかないと Blogger の HTML エディタが

XML の解析中にエラーが発生しました。行 ***、列 ***: The element type "meta" must be terminated by the matching end-tag "</meta>".

と、meta タグが閉じていない旨のエラーを出してしまいます。

２．3 行目のページタイトル欄は、Blogger のテンプレート用データタグを使って「（投稿タイトル） | （ブログタイトル）」という設定にしています。区切りの文字「|」は変更可能です。Blogger 標準のページタイトル「（ブログタイトル）: （投稿タイトル）」を使いたい場合は青字部分を data:blog.pageTitle に変えるといいと思います。

参考：

Blogger ブログのページタイトルを「投稿タイトル | ブログタイトル」の順にする方法 | クリボウの Blogger Tips

３．4 行目のページの画像については、BloggerSpice という Web アプリを利用しています。http://bloggerspice.appspot.com/postimage/ に投稿 URL を付加して（メタタグ内ではページの URL を示すデータタグ data:blog.url を連結）アクセスすると、投稿内の最初の画像へとリダイレクトしてくれます。これがめちゃくちゃ便利です。

参考：

BloggerをOGPに対応させるときのog:imageをなんとかする : たき備忘録

ちなみに、data:blog.postImageThumbnailUrl というデータタグを使って、投稿のサムネイルを取得するという方法もあるにはあるんですが、その場合 Blogger 以外にアップロードした画像が反映できないのと、画像サイズが 72 x 72 ピクセルで小さいのとで、今回は採用しませんでした。

４．最後の行では、そのページの説明文を指定しています。Blogger では、2012 年から投稿ごとのメタデータ（descriptions）を投稿エディタから指定できるようになりました（参考１・参考２）。そのデータを持って来られないかな？と思い data:blog.metaDescription というデータタグを入れてみたところ、上手くいきました。めでたしめでたし。

スポンサードリンク：

お願い：

「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。　