Using Browsershot to create Open Graph images
I rarely use photos on this site and I knew this from the start. I decided to generate Open Graph images myself and it had to be automatic process. So of course Spatie had a package for that called Browsershot.
I have actually done this on my finnish travel blog before but now I decided to do without background images.
Using Laravel and Spaties Browsershot package it is quite easy to create an image. It needs only a Puppeteer and then it works like magic.
I have article-og
view that I give $article
parameter. Then it has everything it needs to generate nice looking Open Graph image.
First I make base64 image of the view.
1$base64Image = Browsershot::html(2 view('article-og', compact('article'))->render()3)4 ->showBackground()5 ->windowSize(1200, 630)6 ->base64Screenshot();
Then I just save it to my articles media collection (using another Spatie package, Medialibrary)
1$article->addMediaFromBase64($base64Image)2 ->usingFileName("{$article->slug}-og.png")3 ->toMediaCollection('og');
And then it is easy to get that image on the article page and place it on the right place. End result is similar to this image:
As you can see the image has it all that I want. It is super easy to modify since it uses Tailwind CSS and simple html.
On the travel blog I mentioned I use background image and again Tailwind and html to style it. End result is like this.
I like to make Open Graph images like this since it gives a bit of a special touch to the site when it is shared on the social media. I also suggest to make the images in a Laravel Job so it is a bit smarter way to do it.
For example I have a scheduled command that checks if article needs to be published. When it is then a job will run that makes my Open Graph image. I only need to set the time when I want the article be published at and the app does the rest. How great is that!
How do you generate Open Graph images?