概要

  • Jekyll で生成しているサイトを Twitter Card で表示できるようにする
  • Card Type は Summary にする
  • ページ毎に description やサムネイルを付けることもできるようにする

環境

  • 特記事項なし

手順

Twitter Card について

Summary Card | Twitter Developers を読んで、必要な meta タグを把握する。

Twitter Card 用のテンプレートを作成

_includes/twitter-card.html を作成する。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@{{ site.twitter_username }}" />

{% if page.title %}
  <meta name="twitter:title" content="{{ page.title }}" />
{% else %}
  <meta name="twitter:title" content="{{ site.title }}" />
{% endif %}

{% if page.description %}
  <meta name="twitter:description" content="{{ page.description }}" />
{% else %}
  <meta name="twitter:description" content="{{ site.description }}" />
{% endif %}

{% if page.image %}
  <meta name="twitter:image" content="{{ site.url }}/images/{{ page.image }}" />
{% else %}
  <meta name="twitter:image" content="{{ site.url }}/images/logo.png" />
{% endif %}

ページ単位で description や image を定義されていればそちらを使い、なければサイト単位のものを使う。
やり方は https://gist.github.com/davidensinger/5415639 を参考にした。

Twitter Card 用のテンプレートを読み込む

_layouts/default.html で twitter-card.html を読み込む。

<!DOCTYPE html>
<html>

  {% include head.html %}
  {% include twitter-card.html %}

  <body>
    <!-- 略 -->
  </body>

</html>

サイトを Twitter に登録する

Card Validator | Twitter Developers に URL を入れてみて、*.xxxxxxxx.com is whitelisted for summary card と表示されれば OK。カードのプレビューも表示されるので、どんな感じになるか分かる。

まとめ・感想

Jekyll で生成しているサイトを Summary タイプの Twitter Card で表示できるようにした。
ページ毎に description や image が定義されていれば使う、みたいなことも条件分岐でさくっと書けた。

Twitter Card に対応したので、積極的につぶやいていきたい。