日本語OGPの折り返しをBudouXで直して、フォントを99.9%削った

日本語OGP、こう折れてませんか

@vercel/og や astro-og-canvas で作った日本語のOGP画像。長いタイトルが不自然に割れがちです。

開発者 と にも の間で割れています。日本語（CJK）はデフォルトで 文字単位 で折り返されるため、こうなります。英語なら単語の空白で折れますが、日本語には空白が無いからです。

文節の境界でだけ 折り返すと読みやすくなります。開発者にも はひとかたまりのまま。

BudouX で文節を出す

Google の BudouX（15KB・WASM可）で折り返し境界を出せます。

import { loadDefaultJapaneseParser } from "budoux";
loadDefaultJapaneseParser().parse("開発者にも届くための日本語OGP設計");
// => ["開発者にも", "届く", "ための", "日本語OGP設計"]

文節を1つずつ span にして flex-wrap で並べると、途中で折れず可視の隙間も出ません。

フォントを 9.15MB → 10.6KB に

Noto Sans JP は約9MB。OGP1枚が使う文字は数十字なので、subset-font で使うグリフだけへサブセットすれば十分です。

full font  : 9.15 MB
subset     : 10.6 KB  (-99.9%)

可変フォントなら variationAxes: { wght: 700 } でウェイトを固定して静的化できます。

リポジトリ