meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

OG Image Options

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.91.2K Ratings

🗓️ 28 August 2023

⏱️ 30 minutes

🧾️ Download transcript

Summary

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

Transcript

Click on a timestamp to play from that location

0:00.0

Welcome to syntax in this episode, we're getting real OG with it, we're going to be talking

0:18.7

about OG images and some interesting ways that you can work with OG images, what they

0:25.4

are about what's going on with them in general, and some of the techniques for doing dynamic

0:30.7

ones, ones that can be unique based on the content and what you're arriving on.

0:34.7

My name is Scott Tolenska, I'm a developer from Denver with me as always is West Boss, West

0:39.5

What's Up.

0:40.5

Hey, not too much excited to talk about OG images.

0:44.9

This is actually something that popped up when we were just having a little chat in their

0:49.9

syntax slackroom about it and we're like, there's actually a lot of ways to do OG images

0:57.1

and they all have their ups and downs and I have a bit of a crazy way I cooked up my version

1:02.5

which we might be using for syntax.

1:04.5

We'll see.

1:05.5

I think we should be using this for syntax because when you presented this to me, which

1:09.3

we'll talk about in a little bit, I'm just thinking like why isn't anybody else doing

1:12.8

it this way.

1:13.8

This makes so much more sense in many ways.

1:15.2

So we'll be talking about about that.

1:17.3

First, let's take a quick minute to talk about century, century at scntryry.io is the

1:24.2

perfect place to check out all of your errors, anything that's going on in your application.

1:29.0

You're running production software.

1:30.4

You need a tool like this to make sure that you aren't shipping errors and if you are

1:34.4

shipping errors that these things get resolved in a timely manner because you can get stack

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2026.