いつの間にか、以前の方法が使えなくなってしまったので新たな方法を調べたところ、簡単にできるようになっていました。最近のテーマは、HTMLの編集で1行追加すれば普通に表示される仕様になっているみたいです。
しかし、このブログのように過去のテーマのままカスタマイズされていたりすると1行追加だけでは使えない場合もあります。かと言って、せっかくカスタマイズしたのに新しいテーマへ更新してしまうのも躊躇されます。
そんなわけで、Bloggerでだいたい一から簡単にTwitterカードを表示させる方法です。
以下を<head>タグ内に記述します。
<meta content="summary_large_image" name="twitter:card"></meta> <meta content="@アカウント名" name="twitter:site"></meta> <meta content="@アカウント名" name="twitter:creator"></meta> <b:if cond="data:blog.pageType == "index""> <meta expr:content="data:blog.title" name="twitter:title"></meta> <b:else> <meta expr:content="data:blog.pageName + " - " + data:blog.title" name="twitter:title"></meta> </b:else></b:if> <b:if cond="data:blog.pageType == "index""> <meta content="トップページ場合に表示するの画像のURL" name="twitter:image"></meta> <b:else> <meta expr:content="data:blog.postImageUrl" name="twitter:image"></meta> </b:else></b:if>
1行目のcontentは「summary_large_image」（大きい画像）もしくは「summary」（小さい画像）、2、3行目のアカウント名はTwitterアカウント、10行目のcontentはブログのトップページ（index）で表示する画像のURLを記述します。
URLとDescriptionについては、新しいテーマでなくともOGP設定がなされているようなので省略。
Titleも設定されていましたが、今回は好みの表示形式でなかったため改めて設定しました。
トップページの場合は「ブログ名」、各投稿ページの場合は「投稿タイトル - ブログ名」という表示形式になります。（デフォルトだと、各投稿のページが「投稿タイトル」になってました。テーマによる？）
Imageは、トップページの場合は固定の画像、各投稿ページの場合は"data:blog.postImageUrl"で投稿内の画像を表示します。
この"data:blog.postImageUrl"タグがなかったために、昔はBloggerで
のTwitterカードの設定が一苦労だったのですよね。（まぁ、知らなかっただけで、2015年頃にはすでに追加されていたみたいです。）
今回も、始めImageをOpen Graphタグ（property="og:image"）で設定したら、なぜか"data:blog.postImageUrl"が使えず、仕方がないのでGAS（Google Apps Script）で投稿ULRから画像のURLをリダイレクトするウェブアプリケーションを作って代用を試みるもこちらもだめ…四苦八苦（丸一日）していたところで、ふとTwitterのカードタグ（name="twitter:image"）で設定してみたら、すんなり"data:blog.postImageUrl"が使えました。
ふぅ…いろいろなぜなのかはよく分からないのですが（笑）。
手のかからないBloggerですが、やはりたまにはメンテナンスが必要ですね。
あと、結局、今回は使いませんでしたが、GASのウェブアプリケーションはかなり便利ですね（今更）。簡単な検索システムをPHPとMySQLで作ろうと思っていたのですが、GASでいいかもしれません。
Twitter（@nkkmd）日々更新中です。