Go製のtcardgenというツールを使って、Hugoの各記事にOGP画像を設定する方法を紹介する。
今回実際に生成した画像は以下の通り。
tcardgenをインストールする
tcardgenの公式ドキュメントを参考にインストールする。
今回はHomebrewを使ってインストールした。
brew install Ladicle/tap/tcardgen
tcardgen用のディレクトリを作成する
tcardgen用のフォントやテンプレートや設定ファイルはHugoのビルド時には不要なのでなるべくHugoからは切り離したい。
そこで今回はトップレベルに/tcardgenというディレクトリを作成してそこにtcardgenに関連するファイルをまとめた。
トップレベルのディレクトリ構成は以下の通り。
.
├── README.md
├── archetypes
├── assets
├── content
├── hugo.yaml
├── layouts
├── public
├── static
├── tcardgen
└── themes
フォントをダウンロードする
tcardgenの公式ドキュメントを参考にして、均等フォントをダウンロードした。
今回はKintoSans-Bold.ttf、KintoSans-Medium.ttf、KintoSans-Regular.ttfだけを/tcardgen/fontsに放り込んだ。
後述する設定ファイルで他の種類のフォントを指定したい場合はそれらのフォントも同様に/tcardgen/fontsに放り込む。
テンプレートを作成する
OGPのテンプレートを作成して、/tcardgen/template.pngとして保存した。
Canvaを使うと簡単にできた。
今回は以下のようなテンプレートを作成した。
tcardgenの設定ファイルを作成する
フォントの色や場所などを変更するための設定ファイルを作成した。
今回は公式ドキュメントのtemplate3.config.yamlを参考にして以下のような設定ファイルを作成した。
template: config.yaml
title:
start:
px: 125
py: 185
fgHexColor: "#000000"
fontSize: 72
fontStyle: Bold
maxWidth: 970
lineSpacing: 10
category:
enabled: true
start:
px: 120
py: 110
fgHexColor: "#555555"
fontSize: 42
fontStyle: Regular
info:
enabled: true
start:
px: 220
py: 480
fgHexColor: "#555555"
fontSize: 38
fontStyle: Regular
separator: " | "
timeFormat: "2006-01-02"
tags:
enabled: true
limit: 0
start:
px: 1080
py: 110
fgHexColor: "#FFFFFF"
bgHexColor: "#545454"
fontSize: 32
fontStyle: Medium
boxAlign: Right
boxSpacing: 6
boxPadding:
top: 6
right: 10
bottom: 6
left: 10
OGP生成用のシェルスクリプトを作成する
毎回tcardgenのコマンドを打つのは面倒なので、シェルスクリプトを作成して一発でOGP画像を生成できるようにする。
/tcardgen/generate.shとして以下のスクリプトを作成した。
#!/bin/bash
git -c core.quotepath=false diff --name-only HEAD content/posts/*.md |
xargs tcardgen \
--fontDir tcardgen/fonts \
--output static/opengraphs \
--template tcardgen/template.png \
--config tcardgen/config.yaml
git diffで前回のコミットから変更されたcontent/posts配下のマークダウンファイルを取得し、それをxargsでtcardgenに渡している。
gitはデフォルトだとファイル名の日本語がエスケープされて表示されるので、core.quotepath=falseを指定してエスケープをおこなわないようにし、tcardgenが該当のファイルを探索できるようにしている。
もしファイル名に日本語を使っていなければこのオプションは不要。
このシェルスクリプトは
sh tcardgen/generate.sh
で実行できる。
もしタイトルが「hello」という記事があれば、このコマンドを実行することでstatic/opengraphs/hello.pngが生成される。
フロントマターのデフォルト値を設定する
tcardgenコマンドはtitleやdateやcategoriesやtagsやauthorの指定が必須となっている。
もともとtitle、date、tagsは利用していたが、categoriesとauthorは使っていなかったので、archetypes/default.mdにデフォルト値を設定した。
categoriesは本来の目的とはズレているがブログのタイトルを表示するためのものとして使っている。
また、Hugoはcover.imageに画像のパスを指定することで自動でOGPの設定をしてくれるので、cover.imageにもデフォルト値を設定した。
tcardgenはstatic/opengrapghs/{title}.pngにOGP画像を出力するので、cover.imageにも/opengraphs/{title}.pngを指定した。
+++
date = '{{ .Date }}'
draft = false
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
tags = ['']
categories = ['もくもくブログ']
author = 'zurukumo'
cover.image = '/opengraphs/{{ .File.ContentBaseName }}.png'
+++
hugo.yamlを編集する
なぜかはよく分かっていないが、以下のようなcoverのrelativeをtrueにしないとOGP画像が設定されなかったのでhugo.yamlに追記した。
params:
(...省略...)
cover:
relative: true
チェックツールで確認
デプロイ後にラッコツールズのOGP確認などを使ってOGP画像が正しく設定されているか確認した。