Thumbnails and OGP
This document covers the generation and management of thumbnail images and OGP (Open Graph Protocol) images for blog articles.
Overview
Each blog article has a thumbnail image displayed in the article header and an OGP image shown when shared on social media. Thumbnails are SVGs generated by kumiko-gen, and OGP images are PNGs converted from those SVGs.
File Structure
Thumbnails and OGP images are placed in the blog/public/thumbnails/ directory.
{slug}.svg— Thumbnail displayed in the article header (generated by kumiko-gen){slug}.png— Image for OGP meta tags (converted by svg-to-png, 1200x630px)
The slug matches the article's MDX filename (without extension).
kumiko-gen: Thumbnail SVG Generation
kumiko-gen (@takazudo/kumiko-gen) generates kumiko-pattern SVG thumbnails using the article slug as a seed. The same slug always produces the same pattern. Installed as a root devDependency.
The root script includes --color-scheme random --zoom 5 by default, so each slug gets a deterministic unique color scheme and zoomed-in view.
pnpm kumiko-gen <slug>
This outputs an SVG file to blog/public/thumbnails/{slug}.svg.
Options
--size <number>— SVG size (default: 800)--zoom <number>— Zoom level (default: 1, recommended: 5)--color-scheme <name>— Color scheme name orrandomfor deterministic per-slug selection--list-color-schemes— Print available color scheme names and exit--fg "<color>"— Foreground color--bg "<color>"— Background color--stroke-width <number>— Stroke width--divisions <number>— Grid division count--finalize— Apply finalize processing--out <path>— Custom output path
svg-to-png: OGP Image Conversion
svg-to-png converts thumbnail SVGs into PNG images (1200x630px) for OGP. It uses the sharp library to rasterize SVGs.
pnpm svg-to-png <slug>
This outputs a PNG file to blog/public/thumbnails/{slug}.png.
Batch Conversion
Use the --all option to convert all SVGs in the thumbnails directory at once.
pnpm svg-to-png --all
Workflow for New Articles
When creating a new article, prepare thumbnails and OGP images with the following steps:
- Create the article MDX file
- Generate the thumbnail SVG with kumiko-gen
- Convert to OGP PNG with svg-to-png
pnpm kumiko-gen my-article-slug
pnpm svg-to-png my-article-slug
The root script already includes --color-scheme random --zoom 5, so no extra flags are needed.
OGP Meta Tags
On the blog's Next.js side, generateMetadata on the article page outputs OGP meta tags. The OGP image uses blog/public/thumbnails/{slug}.png.
When shared on social media, the article's title, description, and thumbnail image are displayed as a preview.