HUGOのOGP画像を自動生成する方法を解説
今回はHUGOのOGP画像を自動生成する方法をまとめたので紹介します。
3パターンの自動生成方法の比較と一番カンタンなCloudlinaryでの、自動生成方法を紹介します。
前提:OGP画像の基本とHUGOでOGP画像を自動生成する方法
OGP画像を作る前にカンタンにOGP画像の仕様や、HUGOでOGP画像を自動生成する方法一覧を紹介します。
- OGP画像のサイズ
- HUGOのOGP画像生成する方法一覧
サクッと説明します。
OGP画像のサイズ
そもそものOGP画像のサイズですが、1200×630pxで作れば間違いありません。
OGP画像はメディアごとにサイズが異なりますが、横長のTwitterと正方形の表示にさえ対応すれば実質OKです。
なので、1200×630pxで画像をつくって、できるだけ中央部分にテキストなどを寄せるのがセオリーです。
HUGOのOGP画像生成する方法
メディアごとにOGP画像を自動生成する方法はいくつかありますが、HUGOでは3つあります。
- Cloudlinaryでの生成
- HUGOの標準機能での生成
- tcardgenでの生成
この3つがHUGOでOGP画像を生成する主要な方法です。
それぞれ特徴やクセがあるので、次のセクションで違いなどを説明します。
OGP画像の自動生成アプローチによる差や特徴
HUGOでOGP画像の自動生成する3つのアプローチの差や特徴について説明します。
- Cloudlinaryでの生成
- HUGOの標準機能での生成
- tcardgenでの生成
この順番で説明します。
Cloudlinaryでの生成
画像CDNサービスのCloudlinaryを使ってOGP画像を生成する方法です。
この方法が一番ハードルが低いやり方です。
あとで使い方も紹介します。
Cloudlinaryでの自動画像生成は、アップロードしたOGP画像用のURLを変更するだけです。
画像のアップロードもドラック&ドロップでOKで、URLをコピーして調整するだけなので簡単に使えます。
テキストの挿入でそこまで複雑なことはできませんが、画像自体への調整が色々できるのが特徴です。
無料枠と有料枠がありますが、通常の個人ブログの範囲であれば無料プランで収まります。
TwitterやFacebookでシェアすると無料枠が広がるので、相当アクセスが多かったりメディアのアップ数と変換数が多く無い限り無料だと思って差し支えないです。
OGP画像の生成だけじゃなくて、画像CDNとしても優秀なのでファイルを外部に置きたい人場合でもオススメです。
HUGOの標準機能での生成
じつはHUGOの標準機能でもOGP画像を自動生成することができます。
v0.90.0から追加された、image.Text関数を使うことでOGP画像を自動生成できます。
image.Text関数の使いかた と画像の呼び出しかた でページが別れています。
公式のドキュメントを見る限り3パターンの画像呼び出し方法があるのですが、assetsフォルダ下の画像だと上手く機能しないことがあります。※v0.98.0で確認
stack overflow
でも同じ事象が確認されてるので、assetsフォルダでなくセクションフォルダに置いて使う場合なら使えます。
自分も使えました。
ファイルがローカル内に生成されるので表示速度は早いです。
グチャグチャなファイル名のOGP画像が、resourseフォルダに無作為に入っていくのが難点ですが、単独運用できるので便利です。
Cloudlinaryに比べると画像加工のパターンは少ないけど、image変数で画像加工と文字入れをまとめてできる点でも便利です。
tcardgenでの生成
tcardgenはLadicleさんという方が作った、GO言語製のOGP画像ジェネレーターです。
Github からインストールして使えます。
OGP画像生成に特化したツールなので、タグや公開日なども入れれる高機能なOGP画像生成ツールです。
「これはいい！」と思って導入しようと思ったのですが、自分のmac環境がグチャグチャでインストールできず断念しました。
この2つの記事を読めば使い方がわかるでしょう。
Hugo × Vercel × tcardgen で動的な OGP 画像を設定
Hugo の OGP 画像を自動生成できる「tcardgen」を試した
CloudlinaryでOGP画像を自動生成する
一番カンタンなCloudlinaryでのOGP画像を自動生成する方法を紹介します。
下に書いてある通りで、画像をアップロードしてURLを編集するだけで使えます。
- Cloudlinaryに画像をアップする
- 投稿用にURLを編集する
では、順番に説明します。
Cloudlinaryに画像をアップする
Cloudlinary に画像をアップしましょう。
メールアドレスがあれば無料で登録できます。
クレジットカードの登録などもなくスグに使えます。
上部メニューバーの写真マークをクリックして、メディアライブラリを開いたらあとは使いたい画像をドラッグ&ドロップすればアップロード完了です。
Cloudlinaryで画像サイズやファイル形式の変更もできるので、特に前処理せずにアップして大丈夫です。
スゴショウあまりにも大きいファイルだと使用量がムダに増えてしまうので、
その場合はファイルを小さくしておくのがオススメです。
投稿用にURLを編集する
Cloudlinaryで画像をアップロードしたら、あとは画像のURLを編集するだけです。
画像URLの ~~image/upload/ 直後にテキスト情報をいれれば文字がはいります。
画像が2枚ありますが、Cloudlinaryでの加工前後のものです。
このテキストをURLに挿入しただけです。
l_text:Sawarabi%20Gothic_80:Cloudinaryで%0A文字入れてみた今回のケースでのURLの変更は以下のとおりです。
~upload/OGP.webpが
~upload/l_text:Sawarabi%20Gothic_80:Cloudinaryで%0A文字入れてみた/OGP.webpに変化してます。
%0Aでテキストの改行もできます。
標準で使える日本語フォントは少ないので、実質さわらびフォント一択です。
フォント追加も可能なので、必要あればアップロードしましょう。
あとはこれをベースに必要なテキストが挿入されるようにHUGO側で設定したら完了です。