※これは自作ブログに投稿したものと同じ記事です。
tcardgenでHugoで作ったブログのOGPを自動生成してみた

はじめに

ブログを作成しても読んでもらわないとあまり意味がないわけで、そういう意味でもTwitter CardなどのSNS共有時の目を引く画像は重要なわけです。
と、いうわけで、今回はGo製のtcardgenというライブラリを使用して、OGP作成を行ってみました。
tcardgen
↑こんな感じのTwittterCardを作ってくれるやつですね。

準備

install

go getでインストールする

$ go get github.com/Ladicle/tcardgen

README.mdがkintoとうフォントを使うように言っているのでダウンロードする

ookamiinc/kinto: 均等 — Kinto is a Japanese font family adapted to match size & balance with Latin characters in user interfaces. A project based off Google Noto fonts.

今回はこの画像作成に使用できればいいので、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を設定し、かつブログ以外と分けることができました。

終わりに

ブログ作成と同時にこの作業はしていましたが、なかなか記事を書かずにいました。

少しでも参考になれば幸いです。

参考

今回も、はじまりはさんぽしさんでした。

Hugoでさくっと自作ブログを作った – さんぽしの散歩記

Go製のtcardgenでHugoで作ったブログのOGPを自動生成してみた