Want to know how to dynamically develop Open Graph images and Twitter Cards for your JAMstack website? Check out this discussion between Ryan Filler and Cloudinary’s Customer Education team to see how it is possible, using Svelte, Sapper, Puppeteer and Netlify Functions.
Open Graph-related References
- Open Graph
- Usage by Discord
- Usage by Slack
- Usage by Apple in iMessages
- Unfurling Links in Slack
- Twitter Cards
- Alt Text in Open Graph
- Alt Text Support for Twitter Cards
- Twitter Card Validator
- Facebook Sharing Debugger
- IFramely
Mentioned Technologies
- JAMstack
- Jekyll
- Gatsby
- React
- Markdown
- Playwright
- Jest
- Bitbucket
- GitLab
- Netlify.toml
- Front Matter
- Base64
- HTMLImageElement - srcset
- Netlify Functions
- Glimmer
- Ember
Project Stack and Repo
- GitHub Repo
- Svelte
- Sapper
- Puppeteer
- Cypress
- Netlify
- AWS Lambda
- Cloudinary
- URLSearchParams
- Node-fetch on NPM
- Chrome-AWS-Lambda on NPM
Referenced Blog Posts and Documentation
- How to use Puppeteer in a Netlify (AWS Lambda) function by Ire Aderinokun
- Code examples on using local Chrome from Wes Bos
- Cloudinary Documentation on Public IDs
- Cloudinary Documentation on Asset Versions
- Cloudinary Documentation on resizing and cropping images
- Chris Biscardi’s course on building an Open Graph image generation API with Cloudinary, Netlify Functions, and React.
- A Greener Web
- Advantages of a JAMstack Architecture - Gatsby Documentation
- A Deep Dive into Sapper by Ryan Filler
Connect with Ryan
- Instagram
- LinkedIn
- Blog
- Twitter
Show music provided by Otis McDonald.
Not a Cloudinary user yet? Sign up for free!