Hugo で Twitter Cards をいい感じに適用させる

この記事は Kaigen Discord Advent Calendar 2018 の12月12日枠です。

このブログを見てできること

記事.mdに画像 URL が埋め込まれているときは summary_large_image (2:1の画像が使われた大きめのカード)を適用し、ない場合は summary (正方形の画像が使われた小さめのカード) で埋め込めるようになる機能を実装します。

標準実装されている機能だと画像が一切適用されなかったので作りました。

環境

使用テーマ: Icurus

# 記事.md
+++
banner = "https://lh5.googleusercontent.com/hogehoge"
description = 
Title = 
etc = 
+++

# config.toml
[social]
 	twitter         = "unya_2"

バージョン

$ hugo env
Hugo Static Site Generator v0.49.2 windows/amd64

実装

  1. layout/partials 下に twitter_cards.html を作ります。

    3行目 banner ではない名前の設定をしていれば置換したり、banner のところに相対パスを書いているならば “| absURL” を追加したりしてください。
    config.toml に Twitter ID を書いていないのならば 11, 12行目 @{{ . }} に直接 Twitter ID を書くなどして対応することも可能です。

  2. head.html に埋め込みます。

    {{ partial "twitter_cards" . }}
    

    を head タグ内の好きなところに追記します。
    {{ template “_internal/twitter_cards.html” . }} が記述されていたならばその行を消して上記を追加します。

  3. おわり。
    Card validator に URL を打ち込むと確認し、即時実装可能です。