jekyllなブログをTwitterCardに対応した

このブログはjekyllを使って構築していますが、TwitterCardやOGPのメタ情報を指定していないため、仮にTwitterやFacebookにURLが投稿された場合に、URLだけの味気ないリンクが表示されていました。

そこで、まずはTwitterCardに対応したので、その記録を残しておきます。


やりたかったこと

  • ブログ内の全てのページにTwitterCardのメタ情報を埋め込む。
  • 各記事のページでは、各記事のタイトルと説明をメタ情報として埋め込む。
  • 今のところ記事内に画像は埋めていないので、画像は全て同一の画像を指す。

TwitterCardのメタ情報

TwitterCardのメタ情報として埋めるのは次の通り。

  • twitter:card
  • twitter:site
  • twitter:title
  • twitter:description
  • twitter:image
  • twitter:url

TwitterCardにはいくつか種類があるので、今回はSummary Cardとすべく、summaryを指定した。twitter:imageには、自作したログ画像のURLを指定した。

Liquidテンプレート

次のLiquidテンプレートをtwitter-card.htmlとして作成し、レイアウトテンプレートのheadタグ内に引き込む。

{% raw %}
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@{{ site.twitter_username }}">
{% if page.title %}
  <meta name="twitter:title" content="{{ page.title site.title }} | {{ site.title }}">
{% else %}
  <meta name="twitter:title" content="{{ site.title }}">
{% endif %}

{% if page.excerpt %}
  <meta name="twitter:description" content="{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}">
{% else %}
  <meta name="twitter:description" content="{{ site.description }}">
{% endif %}

<meta name="twitter:image" content="{{ "/images/logo.png" | prepend: site.baseurl | prepend: site.url }}">
<meta name="twitter:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
{% endraw %}

TwitterCard Validatorで確認

上記を本番環境に反映させたあと、Card Validatorでメタ情報が正しく埋まっているか確認。


これで、このブログのページがTwitterに流れてもカードが表示されるようになりました。

次は、OGPに対応したいと思います。