TwitterにBloggerの記事をカード形式で表示するためのカスタマイズ例
本ページはプロモーションが含まれています
ブログをやっている方で、Twitterも併せてやっているという方が多いと思います。ブログ記事を投稿した際に、Twitterで通知したり、あるいは読者の方からTwitterで記事を紹介してもらう際に、目に留まりやすくするようにカスタマイズをしておくと利用してもらいやすくなるかなと思います。今回は、私のブログ（blogger）で実装しているカスタマイズ方法を紹介します。
実装するタグ
私は以下のようにカスタマイズしました。
See the Pen Untitled by もなか (@monaka496) on CodePen.
簡単な解説
私は記事が目に留まりやすくなってほしいと考えたので
<meta content='summary_large_image' name='twitter:card'/>
というように記述しました
他にもいくつか見せ方があるようでして、詳しくは公式のドキュメントを参照してみてください。
またBloggerの条件分岐を使って以下のようにしています。
パターン１：投稿記事の場合
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName + " | " + data:blog.title' property='og:title'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='thumbnail'/>
Twitterで記事を表示する場合、ざっくり以下のように定義しています。
・このページは記事ページです
・Twitterで表示するURLは「data:blog.canonicalUrl」です
・カードのタイトルは「投稿記事 | ブログタイトル」です
・カードに表示するサムネイルは「data:blog.postImageUrl」です
パターン２：TOPや個別記事の場合
<meta content='画像URL' property='og:image'/>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
ちょっと違うのがサムネイル部分に固定の画像を設定しています。
あとカードに表示するタイトルもそのページのタイトルにしました。
ご自身のページで設定する場合は、画像部分を適宜変更してください
こんな感じで設定するとTwitterカードがいい感じになるので、ぜひ試してみてくださいね。
