3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-11

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

はじめに

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

準備

install

go getでインストールする

$ go get github.com/Ladicle/tcardgen

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

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は、その使用上categorytagsの項目をなにかしら設定する必要があります。
よって、作成したい記事にはこれらの項目を追加します。
また、作成した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です。

先ほどのmarkdoncarduse: xxxというのを指定しました。あれはここで条件分岐するためです。

cardusetrueの場合はブログだと判断して、先ほど作成した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を設定し、かつブログ以外と分けることができました。

終わりに

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

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

参考

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?