Syntax - Tasty Web Development Treats
OG Image Options
This episode isn’t summarized yet
Create a free account and summarize it. In a few minutes you’ll have the key takeaways and a section-by-section summary.
Show notes
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