前回紹介したjekyll-seo-tagプラグインはogp用のタグは出力してくれるのですが、twitterカード用のタグを出力するにはTwitterのユーザ名を設定しないといけないようです。
GitBucketは自分のTwitterアカウントで情報を流していますが、プロジェクトとしてのアカウントはまだありませんし、Twitterカード自体はtwitter:site
を出力しなくても動作する様子です。グーグル先生に聞いてみたところ以下のような記事を見つけたので、これとjekyll-seo-tagプラグインを参考にしてtwitterカード用のタグをいい感じに出力するテンプレートを作ってみました。
{% 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をツイートすると以下のような感じで表示されるようになります。
GitHub PagesのJekyllで運用しているGitBucket Newsにogpとかtwitterカード用のタグを出すようにしてみた。 https://t.co/6MFU8SAElF
— Naoki Takezoe (@takezoen) 2016年7月2日
jekyll-seo-tagプラグインのソースを見てるとtwitter:card
を出力するだけでもいいっぽい(ogp用の該当する情報を自動的に拾ってくれる?)のですが、自分で試してみたところ、TwitterのAndroidアプリでは表示されるけどWebでは表示されなかったりしたのでとりあえずogpとTwitterカード用のmetaタグを両方出力するようにしています。