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