Create beautiful Open Graph images with Browsershot and Tailwind CSS

18 Oct, 2021

For Artisan School, I wanted to create custom Open Graph images for each video page. For example, when somebody shares a link on social media, platforms like Facebook and Twitter use the OG image to represent the shared link. There are many services to create and serve OG images, but I didn't want to depend on an external service. For the website, I already had a Laravel application up and running with Tailwind CSS.

The routes file for this app is quite simple. Based on the slug URI segment of the route, I fetch the video from the database and return a Blade view:

use App\Models\Video;

Route::get('/{slug}', function ($slug) {
    $video = Video::whereSlug($slug)->firstOrFail();

    return view('video', ['video' => $video]);
});

I added a second route, which also returns a Blade view, just to render the OG image.

Route::get('/{slug}/openGraphImage', function ($slug) {
    $video = Video::whereSlug($slug)->firstOrFail();

    return view('videoOpenGraphImage', ['video' => $video]);
})->name('video.openGraphImage');

These images are typically 1200x630 pixels, so I created a container with those dimensions and centered it on the page. Be sure to enable Tailwind's JIT mode to get the square-bracket notation to work. In this container, I added the Artisan School logo and the title of the video.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    </head>
    <body class="flex items-center justify-center min-h-screen">
        <div class="bg-blue-500 w-[1200px] h-[630px]">
            <!-- your content -->
        </div>
    </body>
</html>

Now how do we store an image out of this Blade view? There's a gorgeous package called Browsershot by Spatie. It converts a webpage to an image or PDF using a headless version of Google Chrome. It needs some setup, but it's straightforward to use. I added a method within my Video model that handles the conversion and saves the image to the public folder of my app.

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Storage;
use Spatie\Browsershot\Browsershot;

class Video extends Model
{
    public function saveOpenGraphImage()
    {
        $path = Storage::disk('public')->path("{$this->slug}.jpg");

        Browsershot::url(route('video.openGraphImage', ['slug' => $this->slug]))
            ->waitUntilNetworkIdle()
            ->showBackground()
            ->windowSize(1200, 630)
            ->setScreenshotType('jpeg', 100)
            ->save($path);
    }

    public function getOpenGraphImageUrl(): string
    {
        return Storage::disk('public')->url("{$this->slug}.jpg");
    }
}

To make my life easy, I also added a method to return the full URL of the OG image. You can use this in the header section of the HTML page or with an SEO package like artesaos/seotools.

<meta property="og:image" content="{{ $video->getOpenGraphImageUrl() }}">

Create beautiful Open Graph images with Browsershot and Tailwind CSS

Related posts

Protone Media

Contact

Contact