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.
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