August 28th, 2023 × #webdev#javascript#ogimage
OG Image Options
Scott and Wes discuss techniques for dynamically generating social media preview images known as open graph or OG images using services like Satori, Cloudinary, and Puppeteer.
Wes Bos Host
Scott Tolinski Host
In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them.
Show Notes
- 00:11 Welcome
- 02:18 What are OG images?
- 06:19 Testing OG images
- Polypane, The browser for ambitious web developers
- Meta Tags — Preview, Edit and Generate
- Sharing Debugger - Meta for Developers
- Card Validator | Twitter Developers
- 08:27 Creating an OG image
- vercel/satori: Enlightened library to convert HTML and CSS to SVG
- Open Graph (OG) Image Generation | Vercel Docs
- Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
- 09:41 Dynamically generating OG images
- wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses
- 21:16 Using Puppeteer
- Puppeteer | Puppeteer
- Puppeteer · Browser Rendering docs
- Cloudinary - Image and Video Upload, Store ad Monetization
- Fast and reliable end-to-end testing for modern web apps | Playwright
- 28:47 Canva API
- Build The Tools Behind Great Design | Canva Developers
Tweet us your tasty treats
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
- Wes Bos on Bluesky
- Scott on Bluesky
- Syntax on Bluesky