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