OG Kit: Generate Dynamic Open Graph Images with HTML and CSS

OG Kit is a service for generating dynamic Open Graph images using your own HTML and CSS. Created by Peter Suhm, it lets you define OG image templates directly in your codebase instead of relying on external design tools or headless browser setups.

How It Works

You add a <template> tag with your OG image markup to any page on your site, include the OG Kit client script, and the service handles rendering and caching the images. To preview a template in your browser, append ?ogkit-render to any URL and use your browser's dev tools to tweak it live.

<template data-og-template>
  <div style="width: 1200px; height: 630px; display: flex; align-items: center; justify-content: center;">
    <h1>{{ $post->title }}</h1>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/ogkit@1"></script>

Because templates are standard HTML and CSS, you can use your existing styles, fonts, images, and templating language. There is no custom DSL to learn.

Laravel Integration

OG Kit provides an official Laravel package that supports Laravel 10, 11, and 12:

composer require petersuhm/ogkit-laravel

The package auto-discovers its service provider, so no additional setup is needed beyond installation.

Then, you can use a template like this:

<body>
    <article>
        <h1>{{ $post->title }}</h1>
        <p>{{ $post->excerpt }}</p>
    </article>
 
    @ogTemplate
        <div class="w-full h-full bg-slate-900 text-white p-16 flex flex-col justify-end">
            <p class="text-xl opacity-80">{{ config('app.name') }}</p>
            <h1 class="mt-6 text-6xl font-bold">{{ $post->title }}</h1>
            <p class="mt-4 text-2xl">{{ $post->excerpt }}</p>
        </div>
    @endOgTemplate
</body>

This also works with Inertia, and you can view all the docs on the Laravel integration here.

Pricing

OG Kit offers a free tier with 25 pages, with paid plans starting at $99/year for 1,000 pages. All plans include cached images and unlimited domains. A "page" represents a unique URL where OG Kit generates and hosts an OG image.