Joel Varty 0:16 Hi, folks, I’m Joel. We’re here to talk today about next js and Astro projects and automating your Open Graph image generation. Open Graph image is super important, one of those things that you might not know right away, how to do it, or what the importance of it is in your projects, but we’re going to show you how to automate that so you can get all the benefits from it. Let’s dive in to see what what is actually open graph, and what is it all about? So Open Graph, you might notice as like an OG colon image in there, in your back end of your code, in your header, this is where this is going to sit. It’s an Open Graph standard for adding extra semantic data onto your web pages. And it basically tells like social sharing sites like Facebook, X slash, Twitter, LinkedIn, even slack a little bit more about your page, so that when you share this link, this image comes up. So we’re gonna learn how to actually generate that and what it actually means for your for your site. The biggest thing is it’s gonna increase engagement on your site when it gets shared onto social platforms. So when someone shares your site onto or your page onto LinkedIn, Twitter, whatever, that page is, way more likely to get engagement when you can see an image that’s on there, and you want that image to be representative of what that page is. So we’ll see some techniques for generating that based on the content that’s actually in the page, which is super cool. So what are OG tags anyway? Let’s dig into what they actually mean.

It started off actually, the first place this was actually used was on Facebook, and you have the OG, the OG image, which is probably the most important tag of all. So that’s where you put the URL of your open graph image. You can also set an alt tag onto here. I’m not going to be going too much into this, but I highly recommend doing this as well. So from an accessibility standpoint, it just describes what is in that open graph image from a accessibility standpoint, so that someone who, you know, maybe they’re visually impaired, or they’re using a screen reader, they can actually get a description of what is in that image. This is super important. Has the title, which is kind of a repetition of what’s in your your head title, but it could be different, and you can set a description in there as well. So that’s probably going to be the same as your meta description. But again, this could be a different value based on what you want to say as a description, different from different ways shared socially. And then you can set the OG URL. This is an important one to set for a canonical URL to be set up. So there’s more than these as well. There’s a lots of references where you can kind of see what are all the value values for this. What can be a little confusing is that Twitter has all of these sort of, like competing standard values that it sets up. So with the Twitter image title and description, and you can set a Twitter card to say what kind of image to show on there, I would say these are kind of obsolete, or at least deprecated now. So you can set these, but you don’t have to. It will fall back to the open graph for the OG values. So Open Graph is really the standard that’s been set up and kind of established. And if you’re thinking of like social networks like LinkedIn and even slack, which isn’t really a social network, but when you share links on there, it will pull that in. And I’m sure lots of other platforms do this as well. So it’s a really, really cool tool to kind of increase engagement and just make your your web pages a lot richer when they’re shared. So how do we actually generate this? So you can see there’s, I actually put some of the markup right there in this slide. So we’re going to actually generate a meta property with the content that has the URL in it. And the property name is OG colon image. You could just use a boring image URL, and we’ll show actually an example of how to do that. And that’s really useful, especially if you’re paired with a site that is dynamically generated from a CMS. So you know, lots of sites out there, they’re going to be, you know, have content that’s driven and especially if it’s from a headless CMS, you’re going to have structured content in something like a blog post or a news release or an employee bio, whatever is the content of that page. If there’s an image that’s part of there, we can actually just use that as our meta in the meta tag for the OG image. But a little more interesting, we could auto generate it based on the page title of what we’re sharing. We could do this on the CDN, and I’m going to show how to do this with this tool called cloudinary, which is a really cool digital asset management system and more. Or we can actually, there’s a vercel library we’re going to dug into as well. You can actually generate this on the web server. Now, of these, two of these two patterns, I certainly think that this is something you should experiment with. I’m going to show you how to do it. I like the CDN pattern a lot better than generating it locally on your web server.

CDN is going to give you auto formatting. It’s going to be way more reliable. When my animations are all messed up here, it’s going to be geo scale. If it’s local, if you don’t have a CDN, you can blow up your origin. So why would you do that? It’s going all the place. So the CDN is going to be a lot faster, just in general, because it’s going to the compute for that that’s going to actually generate that image is offloaded, and of course, it’s going to be automatically geoscale for you. So that’s going to be served from that CDN. If you’re generating it locally. Ensure that your site is behind a CDN to do that, because otherwise you can blow up your origin. I’ve actually seen this happen in the wild where all of the image people had used sort of these automatic image generations, not just for the social sharing image, which is for images in general, the auto formatted images on their site, they weren’t being cached in the CDN and cause huge, huge problems, really big cloud builds, because if your origin blows up, then you actually pay for it to get scaled out. And it’s just, it’s just not a good thing. So in the on the CDN side of things with like these purple buttons, they’re going to automatically give you the like a web web P or AVA format, or like whatever format your browser can handle. So that’s really, really good and high quality. It’s going to be globally distributed, also really cool. On the flip side, local compute is always something that we want to eliminate, if possible, and do less of. Obviously, there’s a balance there between what’s going to be computed on the CDN and locally, but I highly recommend the the idea of computing this on the CDN local can have unintended consequences. So I’m going to show you how to how to do both things. But really, if you can use a tool like cloudinary, I highly recommend it, even if you’re not using cloudinary for the rest of your site, like we’re not in the sites that I’m going to be showing you, but we do use cloudinary Just for the social share images, because it’s a really cool way of doing it, and it means that it’s just like it’s just taken care of. You don’t have to worry about it. Here’s an example of if you’re testing out your site later, you can go to meta or Facebook’s it’s like, it’s called the debugger, the Open Graph debugger. So what I’ve done is I pasted in a URL from our doc site here, from the Jody s.com Doc site, and paste it in, you know, just a random, random page, and just clicked on that, clicked on the debug. And what’s cool is you can if it hasn’t been scraped by Facebook, you can scrape it again, but then it’s going to show you all the different recommendations that it would have, and it’ll give you warnings if you don’t have all of the OG values set, but you don’t have to worry too much about that, because it will infer those properties. For instance, if you don’t have the OG Title Set, it’ll just use your header title. But the most important one is just checking out the actual image itself to see that it’s coming through. So this is a good thing to do here, and you’re going to see, you know, a really good preview of what that looks like. And you can see here we’ve got using Page management and have the CMS dash agility. So this is pulling the title from the documentation, from that actual article that’s in the documentation site, and automatically generate an image with that. So it doesn’t sound that interesting, but it’s super useful, because with this code, every single page on this site, I have not added an image to it, it’s going to automatically generate this no matter what the title is. So this will work into the future for any page that can get shared from the documentation site. So that’s really cool. So this, the sharing debugger, is really good way to kind of check that out and make sure that it is working, just if you’re using so this is a screenshot from LinkedIn here. So what I just Just copy and pasted this link into, like a new LinkedIn post, and you should see a preview. I think I copy, I pasted the link in and just hit space, and you should see a preview of what that social sharing image is going to look like. If you’re not seeing that once you, once you do some of these steps, then you probably have an issue. I’m going to get into some code in a little while, where actually we’re going to look at the markup and to see what you should be seeing in your markup if this is indeed working or not. And as I was saying, this is a screenshot from Slack. So you know, with you, you copy and paste a link into Slack, you can get these previews as well. So it’s going to show you, obviously, your title, the description, the meta description, and the and this uses the OG image to figure that out. So it’s a really, really cool way to give a lot more visual meaning to your to your web pages. So just a really, really nice thing. Alright, so let’s jump out of the slides here for a second, and let’s actually start looking at some code. Cool,

all right, so I’ve got Visual Studio code up here, and actually this is the code of the agility documentation site. So this is an older site. So for those of you who are using next js and you haven’t moved to like the app router yet, this is for you. So this is a fairly standard site. It’s actually not even using TypeScript. It’s using just using JavaScript. And we have this function in here called this method called Create. Sharing image. And I actually borrowed this from hats off to Matthias Hernando arello, and he shared this on a gist. So I found this, I don’t know, a couple years ago, when we were looking to add this functionality into the documentation site. Found this cool gist that he had set up that basically tells you how to do this. So it’s really nice, really way of basically creating a composite of image in cloudinary. Now, if you’ve ever used cloudinary before, it has the ability to basically extend the URL of an image, or just adjust the URL to add a whole bunch of stuff in there. And one of the things you can do is add text into there and say, what’s the font, what’s the color, and how do you know, where do I want this to be displayed and all of that sort of stuff. So in this case, I want to have a 1600 by 900 image. I’m going to fill it, crop fill on an automatic quality, automatic format, which is really important. So that’s like, it’ll generate that WebP or avif image, like we said before, and the qualities is going to adjust that to probably somewhere around the 60% 70% quality. So it’s, you can’t tell visually that it’s been sort of transcoded down, but it still looks really good. And then I’m going to take, so we’re passing in some text into this. So that’s the title that we’re going to pass in. And what it’s going to do is it’s going to use newly font of 9696 point, put it in the center. Okay, so that’s like this, this text portion here, and we encode this. So we have to URL encode this, because it’s going to actually get into into the text. And I actually figured out we got to replace if we have percent to see in there, we got to replace that with this. I can’t remember exactly what percent to see is, but this is some trial and error with some different titles that I was testing on. So hopefully, with your content, you don’t have to do too much of this. And then I’ve hard coded some stuff in here, just based on where my cloudinary stuff is. So let’s shift my browser for a second, and we’ll just actually look at this in my cloudinary media. So what I’ve done is I uploaded two PNGs, one for our main site and one for the documentation site, and then just grab this. So the public ID of this is it’s in the docs folder, and its ID is agility OG Docs. So you can see here, this is the public ID of the image that I’m using as my background. That’s the base of what’s going to be used here, and the rest of all these transformations are going to be joined up in front of that. So we have the base URL. We have the image transformations, what’s our here? We have our text transformations, what’s our all here, and this little object, they all get appended together to create the full URL. So let’s actually run this and see what we get. Okay, so I’m just gonna run this locally. Let’s open it up in the browser over here. So this is gonna be local host, 3000

All right, so we’ll see, just like the base URLs that are here, and let’s just go into something that’s like a normal, oh, we have, this is under a sub folder, slash docs. Excuse me for a second. Slash Docs. So let’s go to the owners and amend. Let’s go to, let’s go something interesting. Let’s go to the Developer section. That’s always the most fun. Let’s go to developing with agility. Cool. All right, so I’m not really interested too much in what’s on this page, but really what’s behind this page. So let’s inspect this now, and I’m going to actually, let’s just resize this a little bit, and I’m going to search inside here for OG colon image. And you can see we’ve definitely output this here. And you can see we’ve got this, let’s actually open it up in a new tab here. So you got res do cloudinary. So it’s in cloudinary. It’s in, you know, you’ve got this, all of this text translations, all that sort of stuff that’s been put in there. Here’s the text, and there’s the actual image that’s on the background. So, you know, you’re never going to sort of like try to remember all that stuff, but really, it’s really cool is it automatically just handles it and makes it look great for you. So as long as you can create the background image, which isn’t too hard, upload that into cloudinary to where you need it to be, and remember where that the ID of that image, what’s what that is, and you can get that from the metadata of the image, I believe, or actually just opening it. Well, they change this all the time, but I think I can open this, copy the URL. Here we go, and we can just do copy the original URL. I believe if we look at the original URL, you can see it always ends with the public ID, slash docs, slash OG, dash Docs. So that’s how we figured out what the URL was for this, to figure out, you know, how to start compositing things onto there you can actually use. There’s some tons of tools and tons of documentations on how to do transformations, which they have a whole section in their in their tool for to do these. Okay, so that’s probably the hardest way to do these transformations, but it’s really nice. So this, this method called Create sharing image. We just basically, this is in our we have, like a component here that’s doing all the header SEO. What we do is we come down through here and say, look, we’ve got the we’re just creating a variable called the OG image. If we didn’t already have an OG image pulled in from somewhere.

Or else, like, passed into this component. It could be passed into it by some data, like I said, if we already had an image that was there, but 99% of the time in this site, this is going to be basically no gets passed in for this. So we’re going to actually create this sharing image based on the title of the of the page, and then just basically jam that into our OG image right there, and we also are using it for our Twitter image as well. We’re setting the Twitter card to be summary, large image, which is Twitter speak for. We want this to be show the big image side of this. And I’m not even sure you This is even needed anymore Twitter site. This is an older, an older value that you used to have to put this on there. I can’t remember if you still do. I don’t think you do for if you were sharing, if you’re sharing stuff on Twitter. Was called an x now, but I don’t think that’s actually required anymore. So the and actually these Twitter, the Twitter values, are sort of obsolete and deprecated now. So as long as you have the OG image, you’re good to go. Let’s look at so this is, this is in next js. I think this is next JS 10, so it’s a little bit older. It’s using the pages router, and it’s not using the sort of new next JS stuff that’s going on. But the cool thing is, is generating this like OG image property is done in cloudinary, and that’s where that code is. I’m actually going to, if you actually, if you go into the GitHub, I’m actually going to just jump right there right now for agility, we can actually find this. So let’s jump into agility. And I’m pretty sure the documentation site is going to have all of that stuff in there. Let me just grab that in another tab, two shakes of a lamb tail, and I’ll grab that full link for you and share that so you can see it. So the of the repo. So here’s the Twitter, sort of the agility documentation site, right here. So if you want to go to this site, I’ll share it in the chat too.

This is where all that code is. So if you go into here under pages, sorry, I think it’s actually under components common, and I believe it’s under like head SEO, right in there. So this is where we’re calling this create, sharing image. Okay, so that’s that’s all the source code for that. Pretty straightforward if you’re using next JS 10, that’s for you. If you’re on a newer version of next js. Let’s dig into how that might work. So this is the actual agility CMS, our main site, not the documentation site. So everything that’s before the slash docs and it’s using the app router, which is a slightly different way of generating the header. You basically export a function called Generate metadata. Okay, so what we’ve done is this is, this is entirely data driven site, driven by content coming from the head of CMS, which is agility in this case. So we have this function called resolve agility metadata, and it’s doing a bunch of stuff, because in this site, there’s a lot of different kinds of content. Let’s just look at a few of them, so you can get an idea of, you know, if you’re actually working with with content that’s that’s similar to this, and how it might work for you. Okay? So I believe this is started up. So let’s actually just go back to localhost, 3000 here. Oh, it’s already running cool. So we’re just actually loaded up cool. So if we’re in something like in the resources section, there’s like a blog, right? So if I’m on one of these blog posts, then they actually have images already, and so we wanted to do in this case, is use that image as the OG image. So let’s just double check to see if that’s actually working, see if that’s see if that’s actually coming through. So if I check out the OG image, I can see here, let’s just open this in a new URL for us and a new tab. We can see that that’s just being pulled through, and it’s being format equals auto with equals 1200 this is just coming from like the agility CDN, actually. So it’s not doing anything special. It is cool, though, that it is pulling from content, which is something that what I’m trying to describe to developers how to do this, oftentimes they’ll get kind of caught up on what’s going on there. So let’s take a quick peek at what’s going on with that. So agility has this idea of a dynamic, dynamic page item is basically the page, the content item that’s used to render this page. And all we do is we check to say, Hey, do we have a post image on there? And if we do use that as the OG, as an OG image, and we actually add the alt onto that too, so it’ll create the alt. So that’s pretty simple, but if we don’t have any of those images on there, what can we do? So this actually has differences. So it looks for different, like for it could be a blog post, could be a resource, all the different kinds of potential, like actual dynamic content that’s on there. But if there’s none of those are actually happening, let’s actually look at how we can generate the OG image. So I think that’s if I just scroll down here. I believe we have this create sharing image. So if we haven’t already generated an OG image based on, you know, it’s a blog post or something else, we’re just on a regular page that’s throughout the site. It doesn’t have a specific image already designated as the OG Image. We’re just going to create one, and this is going to use almost the exact same function as we had before. So this looks really familiar, right? Because again, thanks human thanks to you, matteus arello for for generating this. We use the exact same thing to generate that image, so it’s almost exactly the same logic. I’m not going to walk through it again, literally copied and pasted from the other site. So that means that if we’re on a page, let’s just go to, like, just a, I don’t know, a regular page. This doesn’t have a piece of content on it. That’s special. We look at the OG image again. Let’s find that. And we can see here it is coming from cloudinary, and it’s generated based on the page title, okay? And you can see how it automatically wraps. And we, you know, we you know, we could be doing a lot more with it. We could be doing a whole bunch of other things, but this is super basic and clean, and it means that if this gets shared, obviously we’re going to still see a nice image that’s branded and has all that in there, which is really cool.

So that’s how we do that in next JS 13. Now, one of the things in when I was in the slideshow that we had actually I’ll bring up the I’ll bring up the repository for this site as well, in case you want to see that. So the that’s because this is also an open we open source this website, so agility website, we just find that for you as well. So this repo right here, and it has all of this next js code in it as well. So there’s a ton of next js, next JS 14. So it’s pretty nice using uses all kinds of cool technology in there to generate all this sort of stuff. And I’m pretty sure if you look under the lib folder, that’s where that generate, create sharing image is going to be all right. Now, haven’t actually rolled this one out, but I did want to show a really cool way of generating images dynamically, literally on your web server, okay, in your origin. And so there’s this next slash OG image response that you can do. This is super cool. And this is a really basic demonstration of this. But say I had this string that I wanted to show from maybe my page title. I’m not passing that into this function. This is, this is implemented as its own route, the route called OG. So this is passing in a hello friends with a with a little waving, you know, emoji there. But then what we do notice, this is a route with a TSX, which is not normal for a route. Normally, a road is just TS but this actually has a React component in it, you know, it is just a div, and I’m fairly certain we have to style that div, like, with hard coded like these actual style tags. However, that’s still a lot easier than a lot of other image manipulation libraries. Like, there’s tons like image sharp and other libraries you could use. This is a really nice way of, kind of wrapping that up and generating an image that’s 1200 by 630 and putting this right in the middle using CSS. So there’s a whole lot of documentation on this about how to do this stuff, but let’s just actually see what this looks like. So if we come into here, we go to slash API slash OG, and check it out. This is what this image would look like. So we could set this image, this this. So slash, API, slash OG as our as our OG image. And obviously, probably would want to pass, you know, the text in there. You know, text equals the text. We would probably want to do that of our title. I’m not going to go too deeply into that. I still don’t love this, okay, because of the fact that this is generating on my web server, and in a lot of next JS installations that I’ve seen, people don’t have caching set up, right? And normally it’s not that big a deal, because, yeah, you’re just generating the text of your web pages. When you start generating a lot of images, that’s a lot heavier of a task for your web server to do to generate that image. So I still really recommend looking at something like cloudinary, but this is an alternative, if cloudinary is not an option for you, and by the way, I even with, even with agility site, we’re still on cloudinary, like very low end plan, and it’s not, not expensive. We’re not using cloudinary for all of our images. It’s only for a few, but it still works really, well, okay, now that’s, that’s next js, let’s look at Astro. So this is now we’re looking at my actual personal website, which is built on Astro. It’s a super basic site. Let’s actually, let’s shut this one down. Okay, now let’s just run Astro here. Okay, I really like Astro, in addition to next js. Next JS has all kinds of cool stuff, but I would say it’s kind of getting a bit bloaty at doing maybe too many things for too many people, whereas Astro is a little simpler, I believe, for now, it basically allows you to do your own things without having to jump through a bunch of weird hoops like that. Whole export of generating the metadata is a way, I think, to make it easier to generate metadata, but it was not intuitive for me to learn, whereas Astro is very intuitive from more of a web standards point of view, for the most part, there’s still some things in Astro that are a little weird to me. But let’s look at how we can actually output an Open Graph image from there and generate it and sort of Jack that into the markup. So in my layout. This is, again, this is, this is generated from content that’s in agility, coming from a headless CMS. It could be coming from any CMS, probably headless, because, you know, traditional CMSs don’t give you as much opportunity to work with the code in a low level way like this. So headless. CMS highly recommended for this kind of work. But you can see here we have, we have a variable for OG image, URL. This is in our the main layout that we’re using. I have my cloudinary Cloud name, pulling from this is, this is case didn’t hard code it. So it’s pulling from environment variable, and if we have a dynamic page item, again, I’m still going to use that. So I think this site does have blog posts on it, but we got a little smarter on this one. So we’re doing some interesting stuff, and I’m going to show you that in a second. But most of the time, if we just have an image field, then what we’re going to do is use that image for that. Otherwise, we’re going to fall back and automatically create the sharing image with the exact same logic that we had before. Okay? So it’s really using almost the same back end logic, because this is just node right now, right? So this is, again, that same, that same create sharing image that we had before. It’s using a different cloud name, but the same and a different, a different image here. So this is obviously, this is my personal cloud nerd account. Now that I’ve used for that, I’m pretty sure I want the free account for this one with a different image that’s in there. So let’s take a look at what that actually looks like. So let’s go to, you know, fiction page.

Okay, so Oops, didn’t mean to do that one which is going to go to here. Click into here and search for OG image, and pretty sure that’s gonna be there. Here we go. All right, so let’s actually just take a look at that now. So it’s gonna pull from here. This is a very super basic image, so I created this with a little mini headshot on there, and it’s just gonna put, you know, the page title on there. So we already saw that before. Not that cool. But interestingly enough, I wanted to do a little bit more with this part of the demo to say, well, what if we wanted to make it a little bit more like super interesting? So what if I had so on a normal blog post? Let’s look. Let’s look at this one. This is just a regular blog post. We’re going to use this image as our OG image. So let’s actually go find that OG image, and it’s just a regular OG image. Oops, let’s put it here. Okay, so it’s just showing the image. It’s not doing any overlay. But what if I wanted to combine a bunch of stuff and actually had a cloudinary image? So what I did is I actually added a cloudinary field to So Cloud agility has a cloudinary app. So what I did is I hooked up my cloudinary app and added a new field onto my blog post called cloudinary image. So what I did is I put some logic in there to say, hey, if I have a cloudinary image, use that instead for everything. So on this, yeah, this post, post, using a CMS may be better developer. Let’s actually look at that post. So using a CMS maybe a better developer. Here’s where that is. It’s using the cloud mirror image that I set up. Let’s look at the OG image on there real quick.

So this one’s going to be a lot more complex. Hopefully it works Cool. All right, so we’re doing a lot more here. We still have the title, but we actually superimposed an overlay of this image onto here, so we can do some, I guess, as I said, some really cool compositing things. You can do this with an external image as well, but I think it works a little easier with a local image and it’s on top of the same backdrop. Let’s look at that code as the last little bit of code. I just enough time to show that here. I got a couple of minutes. So back to my astral layout. And let’s back up a little bit. So if I do have a dynamic page item, so if I have an item from the posts list. So this, this page is basically built from a blog post, right? Let’s go grab that, and it has a field on it called cloudinary image, which is actually a JSON field. So let’s actually pull that apart and we’re going to call create composite sharing image. This is a new method here. Now we’re going to pass in that cloudinary image that pass that in there, and also pass in the overlay text that we want to get from the title of this page. So let’s jump at, jump into there and see what we’re doing. Now we’re using all of this cloud and area the actual SDKs that they have, which are super cool, they allow you to do a lot more stuff, and it’s a lot more structured than the kind of hard coded way we’re doing it with the Create sharing the image earlier. Now this is nice because it’s, like, super low tech, and I know exactly the URL that I’m getting. This one took me a little bit longer to put together, because I had to kind of dig into a lot of, like, there’s some really syntactic sugar here that’s going on, but it’s a little more structured, and I think it’s if you really want to do some hardcore stuff with cloudinary, this is the way to go. I saved the best for the last so what I what I do is I basically start off creating a cloud nerd image based on my my background. So that’s the hard coded background. I could probably put that in environment variable or something, but this, that’s the main background I’m going to use for the underlay of this. And then I add an overlay of my text, so I pass in the text that I can’t that I got from my image. Page it’s going to the style is going to be, font is muley, size 60, bold weight, color white. The position is going to be this gravity. So the idea is really interesting to be the idea of gravity and a compass for direction, which is kind of weird, but I guess it works. As opposed to left, right and top, bottom, you have north east, south west. And I offset this to kind of pull it up, sorry, down 5050, pixels. So that’s the text overlay. And then I also do the an image overlay. So we can do the source of this overlay is going to be an image, and I pass in the public ID of that image background. So just to show you what that is, that’s this image here I transform it to 500 by 1200 so it’s like this is the size 500 by 1200 I do rounded, rounded corners by 60 to make it little little bit nicer looking. And then we position that in the center with minus 50. So kind of pull it down, or so I pull it up 50 pixels to get it, to get it so it doesn’t overlay with my beautiful headshot down here. So that’s all that’s happening here. And then we just call two URLs, so it’s doing two levels of overlays on there. Now what’s interesting is I could stack a whole bunch more things onto this if I wanted to do that or or use any kind of layout tool. So it’s almost like if you’ve ever used Canva or these other layered image generating tools. This is a programmatic way to achieve that, and it’s really cool. And that’s pretty much all I have for you today. That’s That’s how you do all these OG images, and works great. Hope you learned a lot. So

**Brian Rinaldi ** 31:43 thanks. Joel, well, it’s good to have you here. So that was a really good presentation.

Sorry, my and I, of course, I did not mute my my video here. Apologies. Joel, you know, I’ve only done this, like, 1000 times already. I should be better at this. Okay, so that was a really great presentation. I learned a ton. I you know, this to me, it’s one of those things like, like, nobody really wants to generate these per on a purse page basis. So, like, having something like this to automatically generate them is really incredibly useful. So I’m curious. So you showed us a lot of the a lot of code. Are you server rendering most of these images, like on the fly, or are you statically rendering them on your blog? Or how are you handling that? Because, I mean, I know you talked a little bit about how, like, this can actually eat up lots of resources if you’re generating it constantly.

Joel Varty 32:41 Yeah. So what’s great about the logic I showed is that all you’re generating at run time is the string of the URL, and until somebody actually grabs that, it doesn’t do anything, right? But, and so since we’re using cloudinary, cloudinary is doing all the heavy lifting themselves. So they do all the translations. And actually, from my personal site, it’s a free cloud near account that I’m using. Account that I’m using, because I don’t come they have a really generous free offering. So that works really well for for us and for the agility websites like that’s I showed, like our corporate website and our documentation site, even then, like, we don’t pay cloud near very much money for that, because we like how often social images actually get pulled out, not that often, and then they feel like LinkedIn or whatever, wherever they get shared, they those get cached on those platforms as well. So it actually is a nice, like, very low actual stuff, and it all happens on their servers, not ours, okay? So effectively, you’re largely relying on whatever caching is built into to their servers. Face, basically, yeah. So the way, yeah, the first time you have like, one of those really complex URLs, it does all those translations and figures it all out, and then it steers it from their CDN, so have all that figured out.

**Brian Rinaldi ** 33:59 Nice, yeah, that is the benefit of using something like that, as opposed to like, you know, writing it out yourself and writing your own transformations, you know. So, you know, I will say, as a side note, you talk about caching some of the services, LinkedIn caches, seemingly forever because we use, I’ll use, like, redirects for the URLs for these events. And a year later it, you know, two years later, it’s still using the same image from the first time I ran it on LinkedIn. It’s a pain in the butt. But anyway, so, yeah, just something, something to be aware.

Joel Varty 34:36 They ignore any cache control parameters that you set on it. They just do their own thing,

**Brian Rinaldi ** 34:40 exactly. So. And let me like, do you? Do you have, I mean, I know you talked a little bit about Astro and about next js. I mean, is there any preference to how each handles i And, do you, obviously you like Astro for your personal site, but like, is there any key difference? Differences that you won’t think should be point out anything you’d like better or worse between the two frameworks.

Joel Varty 35:06 Yeah. I mean, I don’t love that. There’s a special method in next JS now just to generate all of your like your meta tags and stuff like that, and your OG images and all that, it does give you a nicely, strongly typed way of doing it. So I understand that that could be a good thing, but, but from the other side of it, it’s like Astro is just like, hey, you understand web standards. You understand the kind of markup you want to generate, generate yourself. I like that. And I think that the overall web development world will actually shift more towards that sort of methodology and sort of thought process, certainly with stuff like remix as well. It’s like based more on web standards than on this works decision of what the standards was, as I saw that happen with.net over the years as well.net. Got more and more and more complicated. They ended up doing a reset into version like five or something, and then simplified it again. So we may see that with next js, but certainly with Astro, it just seems easier and simpler.

**Brian Rinaldi ** 36:08 Yeah, yeah. I mean, I just redid a whole site in Astro. And I gotta say they’re like, the image tooling is really nicely done. And like, once I was, once I was done, and not, not just for OG images, just like, even for all your resized images and everything was super slick. So I was really happy with it. So the OG image method you showed in nextjs was that, like, basically you style, it takes whatever is represented in HTML and converts that to an OG image. It looked like you just did a div with some styling, so whatever’s inside this rendered HTML becomes your image.

Joel Varty 36:46 Yeah, that’s that image response class that we saw in the chat. So it’s really cool, because essentially you’re in a route, like an API route, but in that route TSX, as opposed to dot t, which you normally would, and that allows you to essentially put a React element in there. And what it does is it, I don’t know how it does it, but it renders that React element as an image for you, and gives you all the styling that that had. So it works. It works really, really well. That’s a next JS specific thing, and I do believe that does work outside of the vercel environment. I don’t know if it works everywhere when you self host, I can’t I haven’t tested in all different places, but it is a really cool option that does render on your origin server, though, so you want to make sure that that gets cached properly for sure.

**Brian Rinaldi ** 37:34 Yeah, nice. And you know, it is interesting to me, how with so many of these frameworks now it’s like, oh, it’s got this new, cool feature. But where does it work? Everywhere and often doesn’t? You know it’s, it’s, it’s good. I’m glad to see innovation at the same time I I’d love. I just look back on the days when I could just create something and run it wherever I wanted to. I look back on those fondly.

Joel Varty 38:02 yeah. It’s like, yeah, we want you to be accessible from a hosting point of view.

**Brian Rinaldi ** 38:09 Yeah, yeah. I mean, it is, it is it is tough to kind of which is, I think, why so many people just like, if I’m on Next I’m just going to go for sale. It’s easier. I know it all works, but, yeah,

cool. Well, this was, this was really great. I think it’s, it’s super useful. Everything you showed like, like, I think is really useful. I know I’ve seen people even go like, super creative, where they they make really slick looking OG images using all these same tools. So I think, you know, if you’re maybe a better designer than you and I, Joel, not not to critique your design skills, but I don’t mind.

Joel Varty 38:48 It’s a low bar for me, that’s for sure.

**Brian Rinaldi ** 38:51 Yeah. So you know, if I think somebody with some skills could probably make make that, oh, those od images look incredible. So thanks, Joel. I really, really appreciate the talk. Thanks for coming out alright.

Joel Varty 39:03 Thanks for having me on. Appreciate it.