[Blogger] Twitter Cards の設定方法

このブログでもTwitter Cardsを導入して数回Twitterに投稿し、そろそろ表示も安定しました。
Bloggerは記事に画像なしだと画像部分はBloggerロゴ画像になるので微妙だけど、画像あると見栄えがいいのでぜひ設定してみてください。


最初に「Twitter Cards」とは何か。
画像は投稿した記事をツイートしたものです。



ツイートの内容はともかく、ツイートの下にくっ付いてる部分が「Twitter Cards」です。
記事タイトル、ブログタイトル、内容、画像が表示されています。
これを表示するには表示するためのタグをHTMLに追加して申請しなければいけません。

表示カードは数種類ありますが、今回は基本的な「Summaryカード」で。
「Summaryカード」はタイトル、説明、サムネイル、Twitterアカウントを表示できます。
まずは表示するためのタグをテンプレートの<head>直後に追加します。
<!-- 画像はPicasaウェブアルバム使用 -->
<meta content='summary' name='twitter:card'/>
<meta content='@Twitterアカウント' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

タグを追加したら正常に読み込めるかを確認するために検証ツールを使います。

※画像は申請済みのものです。

適当に公開済みの個別記事URLを入れて表示を確かめます。
下の「Log」に赤字があればエラーということでタグが間違っているということです。
全て緑文字であれば、左の緑枠の辺りに「Request Approval」ボタンが出てきます。
そのボタンから必要事項を記入して申請します。

申請したらTwitterのメールアドレスに承認メールが届きます。
私はそんなに時間かかりませんでしたが、検証ツールにアクセスし直してURL入れても確認できます。

ツイートする前に、個別記事編集横メニューの「検索向け説明」を記入します。
これは上記の例で言えば「『+αの立ち位置』 / 脇役という立ち位置の主人公の話」の部分。
概要を書いておくと、どんな記事内容なのか分かりやすいと思います。

ツイートしたら右下に「概要を表示」と出ますので、これで完了です。
この設定が終わったら今後はタグを消したりドメインを変えなければ何もしなくてOK。
もし「概要を表示」が出なければ一旦更新したり新しいタブでTwitterを開き直すといいです。


この記事をシェアする

0 件のコメント :

コメントを投稿