Generating per-article og:image with headless Chrome and zero npm dependencies

Описание и применение

Создание уникальных og:image для каждой статьи с помощью headless Chrome без npm‑зависимостей, гарантируя детерминированный вывод и экономию времени сборки.

Задача

Twenty small sites shared a single identical og:image, making articles indistinguishable on social platforms.

Результат

Unique og:image per article generated with zero npm dependencies, no recurring cost, deterministic output, and reduced build time by skipping unchanged images.

Рабочий процесс

• Build a fixed 1200×630 HTML+CSS page from article metadata.
• Write the HTML to a temporary file (og.html).
• Launch Chrome headless once with specific flags to screenshot the page.
• Crop the screenshot to 1200×630 using Node’s zlib.
• Store a hash of the input parameters next to the PNG to skip unchanged images.
• Use the PNG in the site’s build script if present, otherwise fall back to a shared image.

Доказательства

Chrome startup costs 0.5–1s per image, so rendering all 156 every day would add over two minutes to the nightly run.

Источник