Automatically Generate Open Graph Images in Laravel (OG Kit)

So, one of the worst things about being a developer and launching new apps or new websites is honestly the open graph image. Like, who wants to design open graph images for every single page on your website, right? Like, that just sucks. Nobody wants to go and spend the time to, you know, customize it for every single page on the site. And to give you an example, like Laravel News, every single article we publish, like we'll just click on this one here, this featured image, that's our OG image and our Twitter image. And we've been doing this for, you know, 12 years now. So every single post has to have one of these. And it's timeconuming. It kind of sucks. And who wants to go do that for your own website? Not many people. That is where this cool tool called OG Kit comes in. It allows you to dynamically generate open graph images with your own HTML and CSS and it uses your own codebase. So the way this works is it hosts everything for you. All you have to do is register, get your API key and then just go integrate it. It's pretty nice, pretty simple. Um, but I wanted to go through and show you how it works. Before we get started, I want to switch over and show you this. So once you log in on the dashboard, um we've got a a video of Peter here, but uh he's got basically an onboarding video, but what's cool though is above that for AI coding assistance, you can download the LLM's.ext file and you know, you can tell your AI basically it gives it instructions to integrate it without having to touch anything. And that's what I did here, which was pretty nice. So before I jump into the code, let me show you what I built. So, I had Claude just generate me a basic personal website. Um, it's got a blog. It's got some projects. Um, that's about it, but and two two sample blog post. Um, so then I said I told Claude, I said, "Hey, this is my new website. Add integrate OG Kit." And boom, it did it. 2 seconds. It was perfect. So, let's switch over to the code. I'll open up Sublime Text. I'll go to resources, layouts, and app.blade.php. And if you're not a Laravel developer and you're watching this, basically the layouts app.blade.php is sort of like the global layout for every single page on this website. Um, but you can see we have the OG image tag here and then we have the Twitter image tag here, which I don't know why we have to do both. I guess Twitter from like historical reasons always did their own before OG the official OG image tag came out. Um it's also interesting that it's not X colon image but I guess that's for a topic for another day. But uh but you can see down here we have the template data OG template. And what's cool, and I think this is probably the most powerful feature of this whole entire setup, is you can have your Tailwind classes right right there in the template file, and it reads them and it pulls them over. You can also get fancy, add your own style tags. Um, and you can customize this basically any way you want to. So, pretty simple and really, really, really nice. So now let's jump over and if we go back over to the documentation, it shows you that you can just say add this to the this query string to your URL ogit- render. So if I add it here, boom, there is the open graph image for the homepage. It looks nice. It's simple. You can customize this any way you want to all within your HTML. But then what's nice though is let's let's click this tools I use daily. So this will be an example blog post. Same thing. You just append that. Boom. There's your OG image. You can look at it locally and then you can go in and customize it if you want to. So to me this is amazing. Like it's set once it's done. Um you can also like through your code you can go through and let's go through let's go to blog post and we'll just look at this one. And you can see right here, this is using blade uh section tags and that's just basically replacing out, you know, those in the layouts app.blade.php file. So that kind of gives you an example of how you can use it. And this is just the basic example. They also have another one where you can um go to docs and they have a Laravel plugin. So you can actually really deeply integrate this to your Laravel app. Um so that's really nice as well. But uh but anyway, that's sort of the highlights of this OG kit. Uh I think it's awesome. I think it's a great way of, you know, doing these dynamic OG images. So visit ogkit.dev, sign up, generate your API key, and give it a try. You know, it's super simple to set up and to start playing around with. Um if you have any questions or anything like that, just leave a comment below and we will be happy to answer them. And if you like content like this, be sure to like and subscribe. Thanks for watching and have a great day.