Screenshot webpages to render social media cards on-the-fly using Puppeteer; largely based on how Pieter generates shareable pictures for Nomad List, and how I did them for Coworkations with cardserver.
 📄 HTML 🖼️ PNG |
 📄 HTML 🖼️ PNG |
|---|---|
 📄 HTML 🖼️ PNG |
 📄 HTML 🖼️ PNG |
After deploying to Netlify and setting BASE_URL the site should be good to go, try visiting https://{site-name}.netlify.app/screenshot for a capture of your homepage.
Any additional path that comes after /screenshot is used in the request to your webserver:
https://{site-name}.netlify.app/screenshot/**/* -> {BASE_URL}/**/*
If you want to change the BASE_URL edit the site's environment variables from Site Settings > Build & deploy > Environment, the value should be the root domain of your website e.g. https://example.com.
Netlify Screenshot performs HTML requests based on PNG requests like so:
If you want to serve your cards on the same domain as your app, you can route PNG traffic to Netlify via NGINX:
location ~ ^/(cards/.*\.png)$ {
proxy_pass http://{site-name}.netlify.app/screenshot/$1;
}
Then your URLs can look something like this:
You’ll want meta tags something like these:
<meta itemprop="image" content="https://coworkations.com/cards/coworkations.png">
<meta property="og:image" content="https://coworkations.com/cards/coworkations.png">
<meta name="twitter:image" content="https://coworkations.com/cards/coworkations.png">