HugoでのTwitterカード設定サンプル

自分用の備忘録。アイキャッチ画像を自前で用意して、Twitter投稿時にTwitterカードを表示させるための設定サンプル。

front-matter(toml形式)

+++
date = "2016-11-13T00:01:08+09:00"
draft = false
slug = ""
tags = ["tips", "shape"]
title = "005-Shapeを透明化する"
eyecatch = "/images/phina-invisible-shape.png"
+++

header.htmlのmeta属性部分

<!-- Twitter Card Metas -->
  <meta name="twitter:card" content="summary" />
  <meta name="og:title" content="{{ .Title }}" />
  <meta name="og:description" content="{{ if .IsPage }}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}" />
  <meta name="og:image" content="{{ .Site.BaseURL }}{{ .Params.eyecatch }}" />
  <meta name="twitter:url" content="{{ .Permalink }}" />
  <meta name="twitter:site" content="@alkn203" />
  <meta name="twitter:creator" content="@alkn203" />