Twitter などソーシャル上でブログ記事に興味を持ってもらうために「OGP 画像」を設定することは重要で，必ず何かしらを設定するようにしている．代表的なブログプラットフォームだと，デフォルト画像だけじゃなく，記事からリッチな OGP 画像を自動生成できたりもする．

• アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ
• Qiita記事のOGPイメージが新しくなりました - Qiita Blog

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 ユーザーに喜ばれそう！

github.com

1. 準備する

tcardgen コマンドはgo get でインストールできる．現状はtcardgen --version のようなオプションは実装されていなかった．

$ go get github.com/Ladicle/tcardgen

README.md を参考にKinto フォントもダウンロードしておく．今回は検証用の Hugo 環境を使って（実は持っている！）フォントをstatic/fonts/kinto/ に保存しておく．Hugo ディレクトリ配下に保存しなくても良さそう．

github.com

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:00author: ["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.mdLoad fonts from"static/fonts/kinto"Load template from"static/ogp/template.png" directorySuccess to generate twitter card into static/ogp/tcardgen.png

自動生成したstatic/ogp/tcardgen.png を確認すると，ちゃんと OGP 画像ができている．おおおおお！

4. カスタマイズする

tcardgen コマンドはデザインをカスタマイズできる．具体的には「色」や「位置」や「サイズ」などを自由に決められる．今回はstatic/ogp/tcardgen.yaml を以下のようにした．「タイトル」と「アカウント名」と「タグ」のデザインをカスタマイズしている．

title:start:px:126pY:180fgHexColor:"#333333"fontSize:65fontStyle: Regularinfo:fgHexColor:"#FF6600"tags:fgHexColor:"#000000"bgHexColor:"#FFFF33"fontSize:50boxSpacing:10

tcardgen コマンドにオプションとして「--config（設定ファイル）」も追加で指定する．

$ tcardgen\--fontDir static/fonts/kinto\--outDir static/ogp\--template static/ogp/template.png\--config static/ogp/tcardgen.yaml\    content/tcardgen.mdLoad fonts from"static/fonts/kinto"Load template from"static/ogp/template.png" directorySuccess 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 さんのブログに書いてあるぞー！

ladicle.com