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

说明与用途

使用无 npm 依赖的 headless Chrome 为每篇文章生成唯一的 og:image，保证输出确定性并减少构建时间。

问题

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.

来源