# OG Image Options  ## Episode metadata - Episode title: OG Image Options - Show: Syntax - Tasty Web Development Treats - Owner / Host: Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers - Episode publish date: 2023-08-28 - Episode AI description: Dive into the world of Open Graph (OG) images, essential for optimizing link previews on social media. Discover tools like Polypane for testing and techniques for dynamically creating stunning visuals with Satori. Learn about the challenges of rendering and using custom fonts in OG images. Explore image generation services such as Cloudinary and get insights into using Puppeteer for dynamic solutions. It's a must-listen for web developers looking to enhance their content sharing! - Duration: 29:48 - Episode URL: [Open in Snipd](https://share.snipd.com/episode/0a756e56-0338-47f0-be17-28b5011be7ab) - Show URL: [Open in Snipd](https://share.snipd.com/show/5f385f44-f6ed-46cd-affc-63516c507208) - Export date: 2026-02-17T23:20:52 ## Snips ### [OG Image Purpose](https://share.snipd.com/snip/baf30309-f76f-4475-bb13-c82d6accecb4) 🎧 02:18 - 03:24 (01:06) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/f1bccd56-046c-4ff5-888c-1096ed311cab" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - OG (Open Graph) images enhance link previews on social media, making them more engaging than plain text links. - This standard was created by Facebook in 2010 to improve visual appeal and click-through rates. #### 💬 Quote > OG images [...] are defined via a meta tag. So I actually didn't even think about this. It's so funny. > — Scott Talinsky Scott Talinsky on the technical implementation of OG images. #### 📚 Transcript **Scott Tolinski:** Okay, so OG images, what makes them gangster? What makes them OG? What's going on with OG images? Well, it turns out open graph is what OG stands for in the OG of OG images and open graph was a standard standard in quotes here created by Facebook in 2010 and it's basically just a way that like Facebook and they were I don't know if they were thinking about other social media sites, but maybe they were they were thinking like, hey, when somebody pastes a link, it's kind of ugly just to have a link in there, right? Like, you're not you're not giving enough information about what this thing is, especially when you're posting the social media. We all know, like graphic image, or those types of things are more visually, people are more likely to click on things and interact with things if it's not just like a little blue link in a text box, right? **Wes Bos:** So **Scott Tolinski:** they created this thing called Open Graph, which is basically a way of adding metadata that social media sites can latch on to. And then the owner of that site can then choose how they want to display those things. --- ### [Defining OG Images](https://share.snipd.com/snip/7b7ab74c-3a96-4470-90fd-373d6dba047c) 🎧 03:35 - 04:16 (00:41) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/0abc4783-b1a5-4f61-b941-f6fb1482a57d" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Define OG images using meta tags with the `og:image` property. - Different social media platforms can interpret and display these images. #### 💬 Quote > The OG image is OG colon image. And then Facebook, Twitter, whoever, Slack can choose to latch on and load that image how they see fit. > — Scott Talinsky Scott Talinsky explaining how social media platforms utilize the OG image meta tag. #### 📚 Transcript **Scott Tolinski:** And these are called an OG image. The OG image is the image that pops up. And they're defined via a meta tag. So I actually didn't even think about this. It's so funny. We have our meta tags in HTML, right? All the meta tags we used to use for SEO and who knows what, right? But it makes sense that you can just have a meta tag and kind of like hijack that to do something that you want to do yourself. Because all they did is have a property of OG colon and then whatever the meta property is. So the OG image is OG colon image. And then Facebook, Twitter, whoever, Slack can choose to latch on and load that image how they see fit. And they namespaced it with OG for open graph. Yeah, --- ### [Testing OG Images](https://share.snipd.com/snip/d6e17999-1800-407c-b996-6cdfc8ec22fa) 🎧 06:20 - 08:23 (02:03) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/e3f8e030-c897-4d4f-830c-846ac5b902a4" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Test OG images with tools like Polypane, a browser designed for previewing how different platforms render them. - Utilize platform-specific debuggers from Facebook and Twitter to understand and refresh how your OG images appear. #### 💬 Quote > Polypane is a really cool application [...] to be able to preview them. And he recreated all of the logic of displaying open graph images in the application, which I imagine is not fun or easy at all. > — Wes Bos Wes Bos recommending Polypane for testing open graph images. #### 📚 Transcript **Wes Bos:** Let's talk about testing them. If you want to be able to test. And then we'll talk about how do you actually set them up. Polypane is a really cool application that we had the author on the podcast. I also met him. He's Dutch. met him in the Netherlands a couple of months ago. So that was pretty cool. And that is a nice app to be able to preview them. And he recreated all of the logic of displaying open graph images in the application, which I imagine is not fun or easy at all. Yeah. **Scott Tolinski:** I primarily use Polypane for testing them. There's also this metatags.io site. You can just paste in any URL and it's going to load up, showing you how all the metatags work and function on your site, which is great. I mean, Polypane does that too. If you don't want to use a full browser like Polypane, you can always just dump your URL in to see this and see exactly what's going on. Is it getting the right images? Is it loading them up? Always a very useful thing to do. But that one's going to be for like, you know, sites that exist online already. So if you're working locally, I probably will always lean on something like Polypane myself. I like the way that works. It's very nice and shows you everything. Twitter **Wes Bos:** and Facebook both have their own they call them, which are helpful tools. Twitter's used to preview it and it would scrape it and tell you the output. The Facebook one does that. It'll tell you, all right, these are the meta tags as I Facebook sees them. And Twitter now tells you just paste a link into Twitter and you can see how it looks. But they both have tools to invalidate them, which are really handy because sometimes you share something with like test, test, test, testing, one, two, three, or like the only image on the page is like a photo of like your uncle. And then like, oh, well, I'll use that as the open graph image, you know? And you need to like purge that information in Facebook and in Twitter. So the tools, you can invalidate the data and it will do a fresh fetch if you've changed your tag since. That's --- ### [Basic OG Image Creation](https://share.snipd.com/snip/d583d480-e72c-4405-8413-b88d7cb40489) 🎧 08:23 - 09:15 (00:51) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/ebc975fc-fc81-4261-918e-2e4444437961" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Create a basic OG image by designing a wide, visually representative image (12000x630 pixels). - Reference this image in your site's meta tags alongside other Open Graph metadata. #### 💬 Quote > If you want to do, you know, if you want to just get something up for your OG images, that's the way. > — Scott Talinsky Scott Talinsky advising on a straightforward approach to setting up OG images. #### 📚 Transcript **Scott Tolinski:** nice, a fresh fetch. We always like a fresh fetch. What about like, okay, so if you're out here and you're thinking, okay, I'm gonna make my OG image. Here's the simplest, most, the basic path you can possibly do for this type of thing. You create an image that is 12,000 pixels wide, 630 tall. You have it be something that visually represents your website, your entire page. The entire website could just be your like the current one for syntax at the moment of recording this is just like basically our logo on a grunge. It's like an a wide version of the podcast art that you typically see when you subscribe to syntax. If you do that, you get that up and running, you paste links, hey, it's going to look way better than not having one. So if you want to do, you know, if you want to just get something up for your OG images, that's the way. --- ### [Dynamic OG Images](https://share.snipd.com/snip/40169f99-087f-40f5-9d1e-ea1334a6b987) 🎧 09:15 - 10:00 (00:45) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/bae2ea2c-ae0a-44f5-b311-c852002f64be" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Dynamic OG images offer tailored previews for individual pieces of content. - These images can incorporate details like author photos, titles, and other relevant elements. #### 💬 Quote > The image, the big old OG image will have maybe a of the author, maybe some text, maybe a date, maybe, you know, tags or who knows what. > — Scott Talinsky Scott Talinsky describing what Dynamic OG images can contain. #### 📚 Transcript **Scott Tolinski:** You then need to just reference that image in the meta tag on your site, along with any other metadata that you want to have with Open Graph, and you're done. But I think we're here to talk about maybe the, the less basic aspects of this. What are like the more dynamic ways you can do this? You'll often see people on Twitter, they'll post links to a, you know, a video or a blog post or something. And the image, the big old OG image will have maybe a of the author, maybe some text, maybe a date, maybe, you know, tags or who knows what. It will be graphically an image that is there to represent the individual piece of content itself. And this is a world that has gotten very interesting. Yeah, --- ### [Wes's OG Image Automation](https://share.snipd.com/snip/328f3996-0555-46b4-8253-18e88686731f) 🎧 16:07 - 16:52 (00:44) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/916ac773-161b-42f0-953d-a2a4abe1ab2d" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Wes Bos created dynamic OG images for his videos with text overlays. - He initially used Figma but automated the process due to repetition. #### 💬 Quote > I found the same thing when I built, if you look at any of my like TikToks or Twitter videos, you'll see that I have like text that is overlaid on top of the video in the thumbnail. > — Wes Bos Wes Bos sharing his experience of using dynamic OG images for his online video content. #### 📚 Transcript **Wes Bos:** I found the same thing when I built, if you look at any of my like TikToks or Twitter videos, you'll see that I have like text that is overlaid on top of the video in the thumbnail. So I built, I was like, I was doing those in Figma every single time. I was like, this is annoying. So I built something that laid it out in HTML and CSS and then I made like a 9x16 version. I made a 4x4 version and then it just resizes it and whatnot. I used HTML2Canvas to basically lay it out in HTML and CSS and then I used HTML2Canvas to essentially they just redid the entire layout engine in canvas that is CSS. --- ### [Puppeteer for Dynamic OG Images](https://share.snipd.com/snip/1771dd2a-c845-4df7-8da1-2cf923bc9f3a) 🎧 16:52 - 18:12 (01:19) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/6724a3f6-5e57-454b-800e-ad57bd7a5ced" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - For dynamic OG images, consider Puppeteer (headless Chrome) to screenshot a webpage. - This approach gives full HTML and CSS control, making it easy to debug layouts and implement complex designs. #### 💬 Quote > So what I did is outside of your serverless function, like outside of the request handler, I created a map. > — Wes Bos Wes Bos sharing his setup on how he generates OG images on demand. #### 📚 Transcript **Wes Bos:** And it works 87% of the way there or 92% of the way there. But line height was off when I would render it. And spacing was a bit weird and line wrapping. And then as soon as a new piece of CSS comes out, like, what is it? Like container queries. This is a perfect use case for container queries is that if you want to size the text dependent on how big the OG image is, you can use container queries for that. Then you got to wait for these packages to support container queries. And, you know, so you're right. In a lot of cases, especially if you just need a corporate text gradient, you're good to go. But I always found that to be a little bit limiting when I'm like, I just want full-ass HTML and CSS. And I don't necessarily care about the speed because OG images are not blocking anything. The only person waiting on OG images is Twitter, Facebook, Slack, Discord. And they just have to wait an extra for, in my case, we'll talk about my puppeteer example. Sometimes it takes an extra second or two seconds to render the thing out, but literally never an issue. --- ### [Cloudinary Experience](https://share.snipd.com/snip/1c90642d-0fe8-4890-9cde-e9e8fc290faf) 🎧 18:26 - 21:04 (02:38) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/e3f1ea42-9db6-402a-8779-99285a9884a1" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Scott Talinsky used Cloudinary for dynamic OG images on Level Up Tutorials, which allowed features like face cropping. - However, he found the layout system complex and the properties like "gravity west" counterintuitive. #### 💬 Quote > But the problem there is once again, you don't have access to CSS straight up. But so you end up having things like, and this is actually a thing I don't understand why they chose to do this. > — Scott Talinsky Scott Talinsky explaining why he didn't like Cloudinary. #### 📚 Transcript **Scott Tolinski:** So you can get some awesome stuff. Now there's an other alternative route. And this is what we did on up tutorial. So I have direct experience with Satori and this version, which is something like Cloudinary and Cloudinary has the ability to do a lot of cool stuff to where you are basically assembling an image via commands in a URL, which is not a lot of fun to do that. And you probably won't in practice end up actually just writing the URL unless you're like really confident with Cloudinary URLs, because you end up having to do like groups and layer type of deals with that. And it can get really, really confusing in the URL space. So there is a node package that allows you to pass in parameters to how you want things and different items in your image to be laid out. And then you run it through a function, essentially, and it spits out a URL of your image. And that's what we did on Level Up Tutorials. It was really nice and easy. It worked well enough. But the problem there is once again, you don't have access to CSS straight up. But so you end up having things like, and this is actually a thing I don't understand why they chose to do this. Um, cause I like Cloudinary a lot, but like when you're, when you're choosing to, to lay stuff out, the layout system is, is unfortunately very difficult to work with. And you end up with really weird properties like gravity west. Gravity is equal to west. Why would they choose west? Yeah, southwest, northwest. Why? What are we doing here? Why did we choose gravity west? One, gravity. Okay, I get it. You can do like a line center, a line left, a line top left, gravity west. I don't know who's behind that choice. But I don't I don't agree with it. And then you also have things like, like weird properties, like different types of flags, like, Oh, I want to, I want to encapsulate all of these transformations I've done and now apply it to a layer. And if you're not a Cloudinary pro, I honestly, I, I took me a day of ripping my hair out to, to get this, even with their like visual editor. And once I got it, granted the end result was great. I had layered images. I had a face. You can do things like face cropping. So you can say, Hey, crop to this person's face, which was really great for authors, right? I got their face cropped in a circle. I got their, you know, nice digital or nice background images and everything looked very, very nice. The end result was there for me. But it was the process of getting to the end result was it was not the most fun aspect of it. --- ### [Canva API](https://share.snipd.com/snip/3f1ca6eb-f380-4da7-9564-c2e95facfc19) 🎧 28:25 - 29:21 (00:56) <iframe src="https://share.snipd.com/embed/obsidian-player/snip/ea38e8e6-f387-40a2-bd77-607ecd7ba094" width="100%" height="100" style="border: none; border-radius: 12px;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-write" ></iframe> - Consider the Canva API for creating OG images if your designs are already in Canva. - The API lets you dynamically populate design elements, providing another alternative for generating these images. #### 💬 Quote > Some people also use the Canva API, which I thought was really interesting because if your designer builds the thing in Canva, then you can just pipe in the variable parts via the API and get a JPEG out the other end. > — Wes Bos Wes Bos suggesting the use of Canva API as an alternative for generating OG images. #### 📚 Transcript **Scott Tolinski:** Yeah, right. Wow. What a fascinating, what a fascinating strategy. If you're out there and you're doing OG images in a way that's not Cloudinary, Satori, or something with screenshotting via a headless browser like this, I want to hear what you're doing for this because I don't know of any other techniques. And this is an area that I'm particularly interested in exploring right now. **Wes Bos:** Oh, one other one I forgot was some people use the Canva API, which I thought was really interesting because if your designer builds the thing in Canva, then you can just pipe in the variable parts via the API and get a JPEG out the other end. So that's pretty cool as well. Obviously, I like HTML and CSS because that's what I'm most comfortable with having full control. But if somebody is like, I'm going to design the open graphs in Canva instead, then you could use that API. --- Created with [Snipd](https://www.snipd.com) | Highlight & Take Notes from Podcasts