前回紹介したjekyll-seo-tagプラグインはogp用のタグは出力してくれるのですが、twitterカード用のタグを出力するにはTwitterのユーザ名を設定しないといけないようです。
GitBucketは自分のTwitterアカウントで情報を流していますが、プロジェクトとしてのアカウントはまだありませんし、Twitterカード自体はtwitter:siteを出力しなくても動作する様子です。グーグル先生に聞いてみたところ以下のような記事を見つけたので、これとjekyll-seo-tagプラグインを参考にしてtwitterカード用のタグをいい感じに出力するテンプレートを作ってみました。
davidensinger.com
{% assign twitter_description = page.description | default: page.excerpt | default: site.description %}
{% if twitter_description %}
{% assign twitter_description = twitter_description | markdownify | strip_html | strip_newlines | escape_once %}
{% endif %}
{% if page.title %}
{% assign twitter_title = page.title | append: " - " | append: site.title %}
{% else %}
{% assign twitter_title = site.title %}
{% endif %}
{% if page.image %}
{% assign twitter_image = site.baseurl | append: page.image %}
{% assign twitter_card = "summary_large_image" %}
{% else %}
{% assign twitter_image = site.baseurl | append: "/favicon.png" %}
{% assign twitter_card = "summary" %}
{% endif %}
<meta name="twitter:card" content="{{ twitter_card }}">
<meta name="twitter:title" content="{{ twitter_title }}">
<meta name="twitter:url" content="{{ site.baseurl }}{{ page.url }}">
<meta name="twitter:description" content="{{ twitter_description }}">
<meta name="twitter:image:src" content="{{ twitter_image }}">
これを_includes/head.htmlなどに入れておけばOKです。画像ファイルはjekyll-seo-tagプラグインと同じく記事ごとにヘッダのYAML部分のimage属性に指定する必要があります。
これで記事のURLをツイートすると以下のような感じで表示されるようになります。
jekyll-seo-tagプラグインのソースを見てるとtwitter:cardを出力するだけでもいいっぽい（ogp用の該当する情報を自動的に拾ってくれる？）のですが、自分で試してみたところ、TwitterのAndroidアプリでは表示されるけどWebでは表示されなかったりしたのでとりあえずogpとTwitterカード用のmetaタグを両方出力するようにしています。
