※これは自作ブログに投稿したものと同じ記事です。
tcardgenでHugoで作ったブログのOGPを自動生成してみた
はじめに
ブログを作成しても読んでもらわないとあまり意味がないわけで、そういう意味でもTwitter CardなどのSNS共有時の目を引く画像は重要なわけです。
と、いうわけで、今回はGo製のtcardgenというライブラリを使用して、OGP作成を行ってみました。
tcardgen
↑こんな感じのTwittterCardを作ってくれるやつですね。
準備
install
go getでインストールする
$ go get github.com/Ladicle/tcardgen
README.mdがkintoとうフォントを使うように言っているのでダウンロードする
今回はこの画像作成に使用できればいいので、static/fonts/Kinto_Sansといった感じのディレクトリに保存しておく
テンプレート
元となる背景画像的なテンプレートを作成します。
tcardgenリポジトリのexampleにいろいろサンプル画像が入ってます。
サイズは
1200 x 628 (px)
で作成します。
その後、自分はiPadのAffinity Designerで、サンプル画像を透過させながら、いい感じのデザインを作成しました。
下準備
markdown設定
tcardgenは、その使用上categoryとtagsの項目をなにかしら設定する必要があります。
よって、作成したい記事にはこれらの項目を追加します。
また、作成したimagesのパスを描けるようにしておきます。（詳細は後述します。）
# Twitter card gen用設定
author: ["いわし"]
categories: ["Tech"]
tags: ["tcardgen", "Hugo", "OGP"] # tag
ogimage: "images/og/tcardgen-hugo.png" # tcardgenで生成した画像をOGP画像に設定する
url: "/blog/tcardgen-hugo/" # tcardgenでの自動生成スクリプト用のパスを設定 ルーティング固定の意味もある
carduse: true # TwitterCardを使用するかどうか falseの場合はデフォルトの画像が適用される
最初、記事作成時に
$ hugo new ./content/blog/{日本語}.md
にしていたのですが、このままだとパスが日本語になってしまい、URLが汚くなるので、作成時は適当にアルファベットで.mdを作成し、後からタイトルをに日本語に変える作業をすることにしました。
この際、パスは（本来）この設定し直したタイトルを元に決定されるので、日本語に変えるとパスも日本語になってしまうのですが、以下のように指定するとこちらを優先してくれます。
また、このurlは記事作成時の{}.mdから自動生成しています。
url: "/blog/tcardgen-hugo/"
yaml設定
作成する画像のスタイルは、tcardge.yamlで設定できます。これはtcardgenにサンプルがあるので使用できます。
僕の場合は、サンプル画像を元に配置を決めたのでそのまま使用しました。
template: static/ogp/template.png
title:
start:
px: 113
pY: 252
fgHexColor: "#FFFFFF"
fontSize: 68
fontStyle: Bold
maxWidth: 1000
lineSpacing: 10
category:
start:
px: 113
py: 211
fgHexColor: "#E5B52A"
fontSize: 42
fontStyle: Regular
info:
start:
px: 223
py: 120
fgHexColor: "#A0A0A0"
fontSize: 38
fontStyle: Regular
tags:
start:
px: 120
py: 500
fgHexColor: "#FFFFFF"
bgHexColor: "#7F7776"
fontSize: 22
fontStyle: Medium
boxAlign: Left
boxSpacing: 6
boxPadding:
top: 6
right: 10
bottom: 6
left: 8
作成
[Hugo] tcardgen を使って OGP 画像を自動生成する - michimani.net
この記事をを参考にスクリプトを作成して実行します。
if [ $# != 1 ] || [ $1 = "" ]; then
echo "One parameters are required"
echo ""
echo "string: path to markdown file of target post"
echo ""
echo "example command"
echo "\t$ sh ./makeogp.sh ./content/post/test/test.md"
exit
fi
TARGET_POST_PATH=$1
tcardgen \
--fontDir ./static/fonts/Kinto_Sans \
--output static/images/og \
--template static/ogp/template.png \
--config tcardgen.yaml \
$TARGET_POST_PATH
使用例コマンドは、
$ ./makeogp.sh ./content/blog/tcardgen-hugo.md
引数で作成したい記事を指定します。
作成されたものは、shellで指定されている--output static/images/ogに出力されます。
作成できました！
まだ終わりではない
ogpとして登録する
さて、画像はできましたがこれだけで終わりではありません。そうです。headタグで指定しなければなりません。
というわけで、layouts/partials/head.htmlに次の記述を加えます。
{{"<!-- blog用にTwitterCardを設定 -->" |safeHTML}}
<meta name="twitter:image:src" content="https://biwashi.github.io/blog/images/iwashilong_w.jpg">
<meta property="og:image" content="https://biwashi.github.io/blog/images/iwashilong_w.jpg" />
{{ if eq true .Params.carduse }}
{{"<!-- Blogなのでカスタムされたものを表示 -->" |safeHTML}}
<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}">
<meta name="twitter:image:src" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}">
{{ else }}
{{"<!-- Homeなのでデフォのやつを表示 -->" |safeHTML}}
{{ end }}
ここで、さっきmarkdownに設置したいろいろなパラメータを使用します。
順に説明します。
<meta name="twitter:image:src" content="https://biwashi.github.io/blog/images/iwashilong_w.jpg">
<meta property="og:image" content="https://biwashi.github.io/blog/images/iwashilong_w.jpg" />
まずこれはデフォルトのogp画像です。ブログ以外のサイト用を普通に指定します。
{{ if eq true .Params.carduse }}
{{"<!-- Blogなのでカスタムされたものを表示 -->" |safeHTML}}
<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}">
<meta name="twitter:image:src" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}">
{{ else }}
{{"<!-- Homeなのでデフォのやつを表示 -->" |safeHTML}}
{{ end }}
さて、ここでifです。
先ほどのmarkdonでcarduse: xxxというのを指定しました。あれはここで条件分岐するためです。
carduseがtrueの場合はブログだと判断して、先ほど作成したogpを指定してます。この際のパスも、先ほど指定したogimageです。再度先ほどmarkdownを見ておきます。
# Twitter card gen用設定"]
author: ["いわし"]
categories: ["Tech"]
tags: ["tcardgen", "Hugo", "OGP"] # tag
ogimage: "images/og/tcardgen-hugo.png" # tcardgenで生成した画像をOGP画像に設定する
url: "/blog/tcardgen-hugo/" # tcardgenでの自動生成スクリプト用のパスを設定 ルーティング固定の意味もある
carduse: true # TwitterCardを使用するかどうか falseの場合はデフォルトの画像が適用される
というわけで、carduse: falseの場合は、ブログ以外として再度指定しません。
これで、ブログにogpを設定し、かつブログ以外と分けることができました。
終わりに
ブログ作成と同時にこの作業はしていましたが、なかなか記事を書かずにいました。
少しでも参考になれば幸いです。
参考
今回も、はじまりはさんぽしさんでした。