Twitterカード導入経緯
Twitterカード、なぜ導入したの？
それは簡単、Twitterでブログのツイートを目立たせたかったからです。
Twitterで、ブログをツイートしている人を見ると大半がTwitterカードというものを使っています。
そして、このTwitterカードというのがTwitterでめちゃくちゃ目立っています。URLだけのツイートとTwitterカードのツイートでは断然Twitterカードのツイートが目立っているのです。
URLだけのツイートをしていても目立たないので、Twitterカードは導入するべきだと思います。
Twitterカードの種類
Twitterカードには全部で4種類あるのですが、実際にブログをツイートするためのTwitterカードは2種類です。
それが、サマリーカードと大きな画像が付いているサマリーカードです。
サマリーカードというのは、Twitterカードが横長で左側に正方形の画像が付きます。
大きな画像付きのサマリーカードはカードの上に大きめの画像が付いて画像の下に記事名や記事説明が付いているものです。
Twitterカード導入方法
Twitterカードの導入方法は、Blogger101＠ブロギングライフさんのBloggerにTwitter Cardsを設定する方法がわかりやすかったので参考にさせていただきました。
Twitterカードを導入するためにソースコードを追加する必要があるので、カスタマイズからHTMLの編集を選択してソースコードを表示させてください。
ソースコードの<hade>の下にTwitterカードのソースコードを書いていきます。
Blogger101＠ブロギングライフさんの記事を参考にしながら私に必要なソースコードを作りました。
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='用意した別画像のURL' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>まず、必ず必要なのがカードの種類を選ぶコードです。サマリーカード(summary)か大きな画像付きサマリーカード(summary_large_image)を選びます。
<meta content='summary_large_image' name='twitter:card'/>次に必要なのが、記事名です。これがないと、ツイートしたところで何について書いた記事なのかわかりません。
<meta expr:content='data:blog.pageName' name='twitter:title'/>そして、画像です。画像は絶対必要です。画像があるのとないのではTwitterカードの目立ち具合が全然違います。画像がない場合は、画像を用意しておきましょう。
data:blog.postImageUrlでブログ記事に使用している画像を読み取ってもらいます。
画像がないときは、用意した別画像が表示されるようにしました。
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='用意した別画像のURL' name='twitter:image'/>
</b:if>画僧がないからと、このコードを入れなかった場合でも画像の場所が消える訳ではないようです。
記事説明のコードはあってもなくても大丈夫ですが、記事にどういう内容が書かれているのか説明したいときは、必要なコードです。
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>Twitteカード完成！Card ValidatorへGO！
Twitterカードが完成したらCard Validatorで実際に表示されるか確かめてみましょう。
Card ValidatorでURLを入力後、Preview cardを押すとTwitterカードがプレビューされます。
Twitterカードが表示されればOKです。導入完了です。
Twitterカードに記事説明が表示されない場合は、「BloggerのTwitterカードにブログ説明・記事説明が表示されない理由。」をお読みください。
