Movatterモバイル変換


[0]ホーム

URL:


kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Hugo の OGP 画像を自動生成できる「tcardgen」を試した

Twitter などソーシャル上でブログ記事に興味を持ってもらうために「OGP 画像」を設定することは重要で,必ず何かしらを設定するようにしている.代表的なブログプラットフォームだと,デフォルト画像だけじゃなく,記事からリッチな OGP 画像を自動生成できたりもする.

Hugo だと

「ブログメンタリング」をしているとHugo を使っている人も多く「OGP 画像を必ず付けましょう!」とアドバイスをすることがある.Hugo だとテンプレートにog:image が含まれていることはあるけど,デフォルト画像になってしまうため,記事から OGP 画像を自動生成したい Hugo ユーザーもいると思う.

Twitter Card Image Generator (tcardgen)

今回は「Twitter Card Image Generator (tcardgen)」を紹介する.tcardgen コマンドを使うと,Hugo の「Front Matter(記事と一緒に記述するパラメータ情報)」から OGP 画像を自動生成できる.まだリリースされたばかりということもあり,Go の実装を読みながら試した部分もあったけど,とても便利だと思う.Hugo ユーザーに喜ばれそう!

github.com

1. 準備する

tcardgen コマンドはgo get でインストールできる.現状はtcardgen --version のようなオプションは実装されていなかった.

$ go get github.com/Ladicle/tcardgen

README.md を参考にKinto フォントもダウンロードしておく.今回は検証用の Hugo 環境を使って(実は持っている!)フォントをstatic/fonts/kinto/ に保存しておく.Hugo ディレクトリ配下に保存しなくても良さそう.

github.com

2. テンプレート画像を作る

次に「テンプレート画像」を作る.今回はKeynote で雑に作った.驚くほどデザインセンスがなく,ヒドイ仕上がりになってしまった(笑)サイズは examples を参考に横 1200 px / 縦 628 px にした.作ったらstatic/ogp/template.png として保存しておく.

f:id:kakku22:20200702142114p:plain

3. OGP 画像を自動生成する

サンプル記事としてcontent/tcardgen.md を作って,以下のようにFront Matter を書いた.

---title: "Hugo の OGP 画像を自動生成できる「tcardgen」を試した"date: 2020-07-02T00:00:00+09:00author: ["kakakakakku"]categories: ["Hugo"]tags: ["Hugo", "Tools"]draft: true---

さっそくtcardgen コマンドを実行する.実行時にはオプションとして--fontDir(フォントディレクトリ)」--outDir(アウトプットディレクトリ)」--template(テンプレート画像)」を指定する.

$ tcardgen\--fontDir static/fonts/kinto\--outDir static/ogp\--template static/ogp/template.png\    content/tcardgen.mdLoad fonts from"static/fonts/kinto"Load template from"static/ogp/template.png" directorySuccess to generate twitter card into static/ogp/tcardgen.png

自動生成したstatic/ogp/tcardgen.png を確認すると,ちゃんと OGP 画像ができている.おおおおお!

f:id:kakku22:20200702142142p:plain

4. カスタマイズする

tcardgen コマンドはデザインをカスタマイズできる.具体的には「色」「位置」「サイズ」などを自由に決められる.今回はstatic/ogp/tcardgen.yaml を以下のようにした.「タイトル」「アカウント名」「タグ」のデザインをカスタマイズしている.

title:start:px:126pY:180fgHexColor:"#333333"fontSize:65fontStyle: Regularinfo:fgHexColor:"#FF6600"tags:fgHexColor:"#000000"bgHexColor:"#FFFF33"fontSize:50boxSpacing:10

tcardgen コマンドにオプションとして--config(設定ファイル)」も追加で指定する.

$ tcardgen\--fontDir static/fonts/kinto\--outDir static/ogp\--template static/ogp/template.png\--config static/ogp/tcardgen.yaml\    content/tcardgen.mdLoad fonts from"static/fonts/kinto"Load template from"static/ogp/template.png" directorySuccess to generate twitter card into static/ogp/tcardgen.png

デザインセンスがなく,よりヒドイ仕上がりになってしまったけど,ちゃんと OGP 画像のデザインをカスタマイズできた.おおおおお!

f:id:kakku22:20200702142200p:plain

まとめ

今回紹介した「Twitter Card Image Generator (tcardgen)」を使えばHugo「Front Matter」から OGP 画像を自動生成できる.Hugo ユーザーに喜ばれそう!git diffxargs を組み合わせたり,詳しくはtcardgen の作者 @Ladicle さんのブログに書いてあるぞー!

ladicle.com

プロフィール
id:kakku22id:kakku22はてなブログPro

カックです \( 'ω')/ 毎週テックブログを更新しています❗️読者登録・X フォロー・記事のシェアをしてもらえると嬉しいです〜✌

検索
お仕事の相談 💬

ソフトウェア開発全般をご支援できます😀 お仕事ウェブサイトkakakakakku.github.io からお気軽にご相談ください💪

kakakakakku | Yoshiaki Yoshida | Kakku Engineering

ブロガー応援 👏
よろしければ応援お願いします❗️コーヒー代や AWS の検証費用などに使わせていただきます☕

書籍
「AWS で実現するモダンアプリケーション入門」を出版しました❗️AWSで実現するモダンアプリケーション入門 〜サーバーレス、コンテナ、マイクロサービスで何ができるのか
Zenn Book

「LocalStack 実践入門」を執筆しました❗️

LocalStack 実践入門

LocalStack 実践入門

LocalStack 実践入門

YouTube 👾

YouTube「カックマイクラ実況」を運営してます❗️チャンネル登録してもらえると嬉しいです〜カックマイクラ実況

Calendly 1on1 📅
テックブログに関する壁打ちや雑談など気軽に 1on1 をしましょう❗️

\ Calendly - カック /
カテゴリー

引用をストックしました

引用するにはまずログインしてください

引用をストックできませんでした。再度お試しください

限定公開記事のため引用できません。

読者です読者をやめる読者になる読者になる

[8]ページ先頭

©2009-2025 Movatter.jp