Twitter などソーシャル上でブログ記事に興味を持ってもらうために「OGP 画像」を設定することは重要で，必ず何かしらを設定するようにしている．代表的なブログプラットフォームだと，デフォルト画像だけじゃなく，記事からリッチな OGP 画像を自動生成できたりもする．
Hugo だと
「ブログメンタリング」をしていると Hugo を使っている人も多く「OGP 画像を必ず付けましょう！」とアドバイスをすることがある．Hugo だとテンプレートに og:image が含まれていることはあるけど，デフォルト画像になってしまうため，記事から OGP 画像を自動生成したい Hugo ユーザーもいると思う．
Twitter Card Image Generator (tcardgen)
今回は「Twitter Card Image Generator (tcardgen)」を紹介する．tcardgen コマンドを使うと，Hugo の「Front Matter（記事と一緒に記述するパラメータ情報）」から OGP 画像を自動生成できる．まだリリースされたばかりということもあり，Go の実装を読みながら試した部分もあったけど，とても便利だと思う．Hugo ユーザーに喜ばれそう！
1. 準備する
tcardgen コマンドは go get でインストールできる．現状は tcardgen --version のようなオプションは実装されていなかった．
$ go get github.com/Ladicle/tcardgen
README.md を参考に Kinto フォントもダウンロードしておく．今回は検証用の Hugo 環境を使って（実は持っている！）フォントを static/fonts/kinto/ に保存しておく．Hugo ディレクトリ配下に保存しなくても良さそう．
2. テンプレート画像を作る
次に「テンプレート画像」を作る．今回は Keynote で雑に作った．驚くほどデザインセンスがなく，ヒドイ仕上がりになってしまった（笑）サイズは examples を参考に 横 1200 px / 縦 628 px にした．作ったら static/ogp/template.png として保存しておく．
3. OGP 画像を自動生成する
サンプル記事として content/tcardgen.md を作って，以下のように Front Matter を書いた．
--- title: "Hugo の OGP 画像を自動生成できる「tcardgen」を試した" date: 2020-07-02T00:00:00+09:00 author: ["kakakakakku"] categories: ["Hugo"] tags: ["Hugo", "Tools"] draft: true ---
さっそく tcardgen コマンドを実行する．実行時にはオプションとして「--fontDir（フォントディレクトリ）」と「--outDir（アウトプットディレクトリ）」と「--template（テンプレート画像）」を指定する．
$ tcardgen \ --fontDir static/fonts/kinto \ --outDir static/ogp \ --template static/ogp/template.png \ content/tcardgen.md Load fonts from "static/fonts/kinto" Load template from "static/ogp/template.png" directory Success to generate twitter card into static/ogp/tcardgen.png
自動生成した static/ogp/tcardgen.png を確認すると，ちゃんと OGP 画像ができている．おおおおお！
4. カスタマイズする
tcardgen コマンドはデザインをカスタマイズできる．具体的には「色」や「位置」や「サイズ」などを自由に決められる．今回は static/ogp/tcardgen.yaml を以下のようにした．「タイトル」と「アカウント名」と「タグ」のデザインをカスタマイズしている．
title: start: px: 126 pY: 180 fgHexColor: "#333333" fontSize: 65 fontStyle: Regular info: fgHexColor: "#FF6600" tags: fgHexColor: "#000000" bgHexColor: "#FFFF33" fontSize: 50 boxSpacing: 10
tcardgen コマンドにオプションとして「--config（設定ファイル）」も追加で指定する．
$ tcardgen \ --fontDir static/fonts/kinto \ --outDir static/ogp \ --template static/ogp/template.png \ --config static/ogp/tcardgen.yaml \ content/tcardgen.md Load fonts from "static/fonts/kinto" Load template from "static/ogp/template.png" directory Success to generate twitter card into static/ogp/tcardgen.png
デザインセンスがなく，よりヒドイ仕上がりになってしまったけど，ちゃんと OGP 画像のデザインをカスタマイズできた．おおおおお！
まとめ
今回紹介した「Twitter Card Image Generator (tcardgen)」を使えば Hugo の「Front Matter」から OGP 画像を自動生成できる．Hugo ユーザーに喜ばれそう！git diff と xargs を組み合わせたり，詳しくは tcardgen の作者 @Ladicle さんのブログに書いてあるぞー！
