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

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