Blog
【Hugo】OGP を設定する

【Hugo】OGP を設定する

Hugo 2024/10/31

結論

  • 画像生成には tcardgen を使う
  • VSCODE の 拡張機能 VSNotes で自動でOGPフロントマターを記載
  • Githook で コミット時に tcardgen を実行して自動で画像生成を行う

経緯

ブログ記事のSNS共有時に目を引く画像（OGP画像）を自動生成したい。
手動で各記事に画像を作成するのは時間がかかるため、自動化プロセスを構築することにした。
Go 製の tcardgen というツールを発見し、これを使用して OGP 画像の自動生成を実現する。

下記のように OGP 用の画像を作成する。

OGP とは

OGP（Open Graph Protocol） は、ウェブページがSNSで共有された際に、タイトル、説明文、画像などのメタデータを指定するためのプロトコル。OGP 情報は HTML のタグ内に記述され、以下のような形式で設定される。
今回は og:image の話である。

1
2
3
4
5
6

<head>
    <meta property="og:title" content="ページタイトル" />
    <meta property="og:description" content="ページの説明文" />
    <meta property="og:image" content="https://example.com/path/to/image.jpg" />
    <meta property="og:url" content="https://example.com/page-url" />
</head>

設定詳細

tcardgen の設定

インストール方法

tcargen のリポジトリやインストール方法はこちら。
使うためには事前に go のインストールなどが必要だが、 Hugo ユーザは問題ないはず。

go install github.com/Ladicle/tcardgen@latest

また、フォントファイルも必要。KintoSansフォントを使用する場合は、以下のようにフォントファイルを配置する。

assets/
└── font/
    └── KintoSans/
        ├── KintoSans-Bold.ttf       # 太字フォント
        ├── KintoSans-Medium.ttf     # 中太フォント
        └── KintoSans-Regular.ttf     # 標準フォント
filename.md
1
2
3
4
5
6

---
title: "記事タイトル"
date: 2024-11-01
images :
  - /entry/2024_10_31_235123.png
---

Hugo 側の設定

私が使っている Hugo の テーマ Hextra では、フロントマターで images に設定すればよいのでそれに従う。

背景画像の準備

canva で作成した。

tcardgen の設定

背景側で作成済みだった著者名については、座標を-400などにして表示しないようにした。 それ以外はデフォルトの設定。

tcardgen.yaml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

template: example/template.png
title:
  start:
    px: 123
    py: 165
  fgHexColor: "#000000"
  fontSize: 72
  fontStyle: Bold
  maxWidth: 946
  lineSpacing: 10
category:
  start:
    px: 126
    py: 119
  fgHexColor: "#8D8D8D"
  fontSize: 42
  fontStyle: Regular
info:
  start:
    px: -100
    py: -400
  fgHexColor: "#8D8D8D"
  fontSize: 0
  fontStyle: Regular
  separator: "・"
  timeFormat: "Jan 2"
tags:
  start:
    px: 1025
    py: 451
  fgHexColor: "#FFFFFF"
  bgHexColor: "#7F7776"
  fontSize: 22
  fontStyle: Medium
  boxAlign: Right
  boxSpacing: 6
  boxPadding:
    top: 6
    right: 10
    bottom: 6
    left: 10

VSCODE の 拡張機能 VSNotes で自動でOGPのフロントマターを記載

VSCode の拡張機能 VSNotes を使用して、新規記事作成時に自動的に OGP 用のフロントマターを挿入するように設定する。 これにより、毎回 OGP のファイル名を自動的に設定するようにした。 私は、VSNotes の設定ファイルに以下のようなテンプレートを追加した。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
  "vsnote_template_blog": {
    "prefix": "vsnote_template_blog",
    "body": [
      "---",
      "title: \"\"",
      "date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}${CURRENT_TIMEZONE_OFFSET}",
      "draft : false",
      "author: [\"yama.sh\"]",
      "categories: [\"\"]",
      "tags: [\"\"]",
      "archives: [\"$CURRENT_YEAR\", \"$CURRENT_YEAR-$CURRENT_MONTH\"]",
      "description: \"\"",
      "url : \"/entry/$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE/$CURRENT_HOUR$CURRENT_MINUTE$CURRENT_SECOND\"",
      "images :", 
      "  - \/entry/${CURRENT_YEAR}_${CURRENT_MONTH}_${CURRENT_DATE}_${CURRENT_HOUR}${CURRENT_MINUTE}${CURRENT_SECOND}.png",
      "comments: true",
      "---",
      "$2",
    ],
  }
}

Githook で コミット時に tcardgen を実行して自動で画像生成を行う

Git hookを使用して、コミット時に自動的に tcardgen を実行し、 OGP 画像を生成します。以下の手順で設定します プロジェクトのルートディレクトリに .git/hooks/pre-commit ファイルを作成し、以下の内容を記述します

.githook の場所変更と pre-commit ファイルの作成 

$ git config --local core.hooksPath .githooks
$ mkdir -p .githooks && touch .githooks/pre-commit

本来 .git/hooks にあるフォルダをプロジェクトのルートディレクトに見るようにする。 これにより、この後に作成する pre-commit のファイルを git 管理下に置く。

mkdir -p オプションは、親ディレクトリが存在しない場合に、それも一緒に作成することを指示します。 作成した pre-commit ファイルの中身は下記のようにする。

pre-commit のスクリプト

下記の内容を設定することで、コミット時に更新された記事に対してのみ画像を生成する。

.git/hooks/pre-commit
#!/bin/bash
git diff --name-only HEAD content/post |\
    xargs tcardgen -f assets/fonts/KintoSans/ \
    -o content/images/ \
    -t assets/img/ogp.png \
    -c tcardgen.yaml content/posts/20*/*.md
【Windows】限りなく実機に近いWindowsの仮想検証環境を作る【振り返り】2024年10月の振り返りと11月の目標