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

Description and use

Generate a unique og:image per article using headless Chrome without npm dependencies, ensuring deterministic output and reduced build time.

Problem

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

Outcome

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

Workflow

• 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.

Evidence

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

Source