Screenshot webpages to render social media cards on-the-fly using Puppeteer; largely based on how Pieter generates shareable pictures for Nomad List.
 📄 HTML 🖼️ PNG |
 📄 HTML 🖼️ PNG |
|---|---|
 📄 HTML 🖼️ PNG |
 📄 HTML 🖼️ PNG |
Deploy the worker to Cloudflare and mount it on a route like example.com/screenshots/*, then visit screenshots/path/to/something.png for a capture of path/to/something.
Screenshots can be of any webpage, you can pass query params through to your backend if you need to toggle behaviors like to force dark mode on/off, or disable things like Intercom:
| 🖼 PNG (Cloudflare request) | 📄 HTML (webserver request) |
|---|---|
| https://coworkations.com/screenshots/hacker-paradise.png | https://coworkations.com/hacker-paradise |
| https://steve.ly/screenshots/home.png?dark=on | https://steve.ly/home?dark=on |
For social media cards you might want to render a template that works well on social media:
| 🖼 PNG (Cloudflare request) | 📄 HTML (webserver request) |
|---|---|
| https://coworkations.com/screenshots/cards/hacker-paradise.png | https://coworkations.com/cards/hacker-paradise |
| https://coworkations.com/screenshots/cards/pack/ubud-bali-2.png | https://coworkations.com/cards/pack/ubud-bali-2 |
The default dimensions for screenshots are 1280x720, which works well for most social media cards. You can specify different dimensions via the URL, e.g., screenshots/1024x768/path/to/something.png.
Additionally, you can adjust the pixel density by appending @2x, @3x, or @4x to the filename, e.g., screenshots/path/to/[email protected].
If you want to configure some query params to always pass through to your backend, you can set the QUERY_PARAMS environment variable and they will be appended to every webserver request.
You’ll probably want meta tags something like these:
<meta itemprop="image" content="https://coworkations.com/screenshots/cards/coworkations.png">
<meta property="og:image" content="https://coworkations.com/screenshots/cards/coworkations.png">
<meta name="twitter:image" content="https://coworkations.com/screenshots/cards/coworkations.png">