NebelにOGP画像自動生成機能を追加した

2026-01-27 19:08:09 +0900

tokuhiromさんの ogp を設定したという記事を読んで、そういえば自分もOGP対応しなきゃな、と思い出した。以前から対応しようと思いつつ、画像生成とか面倒だな、と後回しにしていた。でも今なら生成AIでシュッと対応できるな、と思ってやってみた。

ちなみにこのブログ記事もClaude Codeが書いたものをそのまま出している。

このブログの静的サイトジェネレータである Nebel に、OGP画像を自動生成する機能を追加した。

OGP画像とは

OGP（Open Graph Protocol）画像は、SNSでURLをシェアしたときに表示されるサムネイル画像のこと。TwitterやFacebookなどでリンクを共有すると、タイトルや説明文と一緒に画像が表示される。

これまでこのブログにはOGP画像を設定していなかったので、SNSでシェアしてもデフォルトの味気ない表示になっていた。

実装内容

nebel generate を実行すると、各記事のタイトルからOGP画像（1200x630px）を自動生成するようにした。

サイズ : 1200x630px（OGP推奨サイズ）
背景 : ダークグレー（#333）
テキスト : 記事タイトル（白色、中央配置）
フォント : Noto Sans CJK JP Bold（日本語対応）

生成される画像はこんな感じ。

OGP画像のサンプル

使用ライブラリ

Goで画像を生成するために fogleman/gg というライブラリを使った。シンプルなAPIで2D描画ができるので、こういった用途にはちょうど良い。

日本語フォントには Noto Sans CJK JP を使用。CJK（中国語・日本語・韓国語）に対応しているので、日本語タイトルも問題なく描画できる。

テンプレートの変更

HTMLテンプレートには、OGPとTwitter Cardのメタタグを追加した。

<!-- OGP -->
<meta property="og:title" content="{{ .Title }}"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://mizzy.org{{ .Path }}/"/>
<meta property="og:image" content="https://mizzy.org{{ .OGImagePath }}"/>
<meta property="og:site_name" content="Gosuke Miyashita"/>

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="{{ .Title }}"/>
<meta name="twitter:image" content="https://mizzy.org{{ .OGImagePath }}"/>

これで、SNSでシェアしたときにタイトル入りの画像が表示されるようになる。

今後

デザインは現状かなりシンプルなので、余裕があればもう少し凝ったものにしたい。ロゴを入れたり、グラデーション背景にしたり、といったあたりは比較的簡単にできそう。

older post ↓