こんにちは、uru（@uru_）です。この記事ではBloggerで発信するブログ記事のURLを「Twitter Cards（ツイッターカード）」に対応させる方法について紹介します。
この記事にたどり着いた方は既にご存知かもしれませんが、Twitter CardsとはTwitterにのタイムラインに流れてくる大きく画像の表示されたURLのリンクのことです。視覚イメージでTwitterユーザーの注意を引くことができるため、ユーザーをTwitterからブログへの誘導するのに一定の効果があります。
ブログサービスの中には、はてなブログのように既にこのTwitterカードに対応しているものもあれば、Bloggerのように初期状態では対応していないものもあります
今回はBloggerをTwitterカードに対応させる方法を紹介します。
BloggerのURLをTwitterカードに対応させる方法
まず、Twitterのデベロッパーサイトを開きます。英語で表示されて驚く人もいるかもしれませんが、画面上で日本語に切り替えることができるので安心してください。
Twitterカードの説明が詳しく表示されています。全部で7種類のカードデザインの概要と設定方法が表示されているので、おすすめは「カードタイプ」です。
カードのデザインはWEBサイトの用途にもよりますが、「大きな画像付きのSummaryカード」を選択すると良いでしょう。
上記の画面の後方にHTMLに挿入するサンプルコードがあるので、これをHTMl のheadタグの直後に挿入し、サイトを更新しましょう。
最後にサイトから任意のページを選美、URLを検証ツール（Card validator）に貼り付けてプレビューを表示させてみましょう。
成功すれば完了です！
BloggerにTwitterカードを設定するときの注意点
基本的な操作はこれだけなので、WEBサイトによっては非常に簡単に設定することができます。ただし、Bloggerの場合Googleの特殊なHTMLを使用しているため、設定には一部注意が必要な点があります。
ここからはBloggerに限定して述べていきます。
下記はこのブログのテンプレートから「HTMLの編集」に実際に挿入してみたmetaタグです。Twitter公式のmetaタグをBloggerに合わせて少し改変しています。参照したWEBサイトはこの記事の最後にまとめて記しますので、参考にしてください。
<meta content=’summary’ name=’twitter:card’/>
<meta content=’@Twitterアカウント‘ name=’twitter:site’/>
<meta content=’@Twitterアカウント‘ name=’twitter:creator’/>
<meta expr:content=’data:blog.pageName + " | " + data:blog.title’ name=’twitter:title’/>
<meta expr:content=’data:blog.metaDescription’ name=’twitter:description’/><br />
<meta expr:content=’"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url’ name=’twitter:image’/>
<meta expr:content=’"http://blogger-entry-image.appspot.com/?s=s900&u=" + data:blog.url’ property=’og:image’/>
上記ののmetaタグのうち、titleとdescriptionについてはBloggerの個別記事のタイトルと「検索向け説明」が反映されるようになっています。検索向け説明を記入しないとTwitterカードがエラーになるため注意が必要です。
また，特に大きく直しているのはimageのタグです。個別記事の画像に対応できるようになっています。
これはたき備忘録さんの内容が非常に参考になったので，是非一度見てもらいたい。
おわりに：ブログのmetaタグ修正は忘れずに！
Bloggerに関する参照WEBサイトは残しておきます。Googleで「Twitter Cards」やブログの名前を入力すれば何かしら情報が得られると思うので，複数を参照した上で自己責任で自分のWEBサイトの魅力を発信してみてください。
