Twitter などソーシャル上でブログ記事に興味を持ってもらうために「OGP 画像」を設定することは重要で,必ず何かしらを設定するようにしている.代表的なブログプラットフォームだと,デフォルト画像だけじゃなく,記事からリッチな OGP 画像を自動生成できたりもする.
「ブログメンタリング」をしているとHugo を使っている人も多く「OGP 画像を必ず付けましょう!」とアドバイスをすることがある.Hugo だとテンプレートにog:image
が含まれていることはあるけど,デフォルト画像になってしまうため,記事から OGP 画像を自動生成したい Hugo ユーザーもいると思う.
今回は「Twitter Card Image Generator (tcardgen)」を紹介する.tcardgen
コマンドを使うと,Hugo の「Front Matter(記事と一緒に記述するパラメータ情報)」から OGP 画像を自動生成できる.まだリリースされたばかりということもあり,Go の実装を読みながら試した部分もあったけど,とても便利だと思う.Hugo ユーザーに喜ばれそう!
tcardgen
コマンドはgo get
でインストールできる.現状はtcardgen --version
のようなオプションは実装されていなかった.
$ go get github.com/Ladicle/tcardgen
README.md
を参考にKinto フォントもダウンロードしておく.今回は検証用の Hugo 環境を使って(実は持っている!)フォントをstatic/fonts/kinto/
に保存しておく.Hugo ディレクトリ配下に保存しなくても良さそう.
次に「テンプレート画像」を作る.今回はKeynote で雑に作った.驚くほどデザインセンスがなく,ヒドイ仕上がりになってしまった(笑)サイズは examples を参考に横 1200 px / 縦 628 px
にした.作ったらstatic/ogp/template.png
として保存しておく.
サンプル記事として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 画像ができている.おおおおお!
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 画像のデザインをカスタマイズできた.おおおおお!
今回紹介した「Twitter Card Image Generator (tcardgen)」を使えばHugo の「Front Matter」から OGP 画像を自動生成できる.Hugo ユーザーに喜ばれそう!git diff
とxargs
を組み合わせたり,詳しくはtcardgen
の作者 @Ladicle さんのブログに書いてあるぞー!
ソフトウェア開発全般をご支援できます😀 お仕事ウェブサイトkakakakakku.github.io からお気軽にご相談ください💪
引用をストックしました
引用するにはまずログインしてください
引用をストックできませんでした。再度お試しください
限定公開記事のため引用できません。