読者です 読者をやめる 読者になる 読者になる

JekyllでTwitterカード用のタグを出力する

前回紹介した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用の該当する情報を自動的に拾ってくれる?)のですが、自分で試してみたところ、TwitterAndroidアプリでは表示されるけどWebでは表示されなかったりしたのでとりあえずogpとTwitterカード用のmetaタグを両方出力するようにしています。