I tried to automatically generate OGP of a blog made with Hugo with tcardgen made by Go

• This is the same article posted on my blog. I tried to automatically generate OGP for a blog created with Hugo with tcardgen

Introduction

Even if you create a blog, it doesn't make much sense unless you read it, and in that sense, an eye-catching image when sharing SNS such as Twitter Card is important. So, this time I tried to create OGP using a library called tcardgen made by Go. tcardgen ↑ It's the one who makes a Twittter Card like this.

Preparation

install

Install with go get

$ go get github.com/Ladicle/tcardgen

Download because README.md tells you to use the kinto font

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

This time I hope it can be used to create this image, so save it in a directory like static/fonts/Kinto_Sans

template

Create the original background image template. There are various sample images in example of the tcardgen repository. The size is 1200 x 628 (px) Create with.

After that, I used the iPad's Affinity Designer to make the sample image transparent and create a nice design.

Preparation

markdown setting

For tcardgen, it is necessary to set some items of category and tags. Therefore, add these items to the article you want to create. Also, make sure that you can draw the path of the created images. (Details will be described later.)

#Settings for Twitter card gen
author: ["Sardines"]
categories: ["Tech"]
tags: ["tcardgen", "Hugo", "OGP"] # tag
ogimage: "images/og/tcardgen-hugo.png " #Set the image generated by tcardgen as an OGP image
url: "/blog/tcardgen-hugo/" #Set the path for the auto-generated script in tcardgen It also means fixed routing
carduse: true #Whether to use Twitter Card If false, the default image will be applied

First, when writing an article

$ hugo new ./content/blog/{Japanese}.md

However, if this is left as it is, the path will be in Japanese and the URL will be dirty, so when creating it, create .md in the alphabet appropriately and change the title to Japanese later. I decided to do it.

At this time, the path is (originally) determined based on this reset title, so if you change it to Japanese, the path will also be in Japanese, but if you specify as follows, this will be given priority. Will give you. Also, this url is automatically generated from {} .md at the time of article creation.

url: "/blog/tcardgen-hugo/"

yaml settings

The style of the image to be created can be set in tcardge.yaml. This can be used as there is a sample in tcardgen.

In my case, I decided the layout based on the sample image, so I used it as it is.

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

Create

[Hugo] Automatically generate OGP images using tcardgen --michimani.net

Use this article as a reference to create and execute a script.

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

The usage example command is

$ ./makeogp.sh ./content/blog/tcardgen-hugo.md    

Specify the article you want to create with the argument.

The created one is output to `` `--output static/images/og``` specified in the shell.

I was able to create it!

Not over yet

Register as ogp

Well, the image is done, but this is not the end. That's right. Must be specified in the head tag.

So, add the following to `layouts/partials/head.html`.

  {{"<!--Set up a Twitter Card for your blog-->" |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 }}
  {{"<!--Since it is a blog, display custom ones-->" |safeHTML}}
  <meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}"> 
  <meta name="twitter:image:src" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}">
  {{ else }}
  {{"<!--Since it is Home, the default one is displayed-->" |safeHTML}}
  {{ end }}

Here, we will use various parameters that we installed in markdown earlier.

I will explain in order.

  <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 " />

First of all, this is the default ogp image. Normally specified for sites other than blogs.

  {{ if eq true .Params.carduse }}
  {{"<!--Since it is a blog, display custom ones-->" |safeHTML}}
  <meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}"> 
  <meta name="twitter:image:src" content="{{ .Site.BaseURL }}{{ .Params.ogimage }}">
  {{ else }}
  {{"<!--Since it is Home, the default one is displayed-->" |safeHTML}}
  {{ end }}

Well, here is the if.

I specified carduse: xxx in the previous markdon. That is because there is a conditional branch here.

If carduse is true, it is judged that it is a blog, and the ogp created earlier is specified. The path at this time is also the ogimage specified earlier. Let's look at markdown again.

#Settings for Twitter card gen"]
author: ["Sardines"]
categories: ["Tech"]
tags: ["tcardgen", "Hugo", "OGP"] # tag
ogimage: "images/og/tcardgen-hugo.png " #Set the image generated by tcardgen as an OGP image
url: "/blog/tcardgen-hugo/" #Set the path for the auto-generated script in tcardgen It also means fixed routing
carduse: true #Whether to use Twitter Card If false, the default image will be applied

So, if carduse: false, do not specify it again as anything other than a blog.

Now you can set ogp for your blog and separate it from non-blogs.

At the end

I was doing this work at the same time as creating the blog, but I didn't write an article easily.

I hope you find it helpful.

reference

• kakakakakku blog -[Hugo] Automatically generate OGP image using tcardgen --michimani.net

This time too, the beginning was Sanposhi-san.

-I made a quick self-made blog on Hugo-Sanposhi's walk