このブログはjekyllを使って構築していますが、TwitterCardやOGPのメタ情報を指定していないため、仮にTwitterやFacebookにURLが投稿された場合に、URLだけの味気ないリンクが表示されていました。
そこで、まずはTwitterCardに対応したので、その記録を残しておきます。
TwitterCardのメタ情報として埋めるのは次の通り。
TwitterCardにはいくつか種類があるので、今回はSummary Cardとすべく、summaryを指定した。twitter:imageには、自作したログ画像のURLを指定した。
次の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 %}上記を本番環境に反映させたあと、Card Validatorでメタ情報が正しく埋まっているか確認。
これで、このブログのページがTwitterに流れてもカードが表示されるようになりました。
次は、OGPに対応したいと思います。