OG Image Options
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
- 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