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