Introduction
On this page
This package makes it easy to generate Open Graph images for your Laravel application. Define your OG image HTML inline in your Blade views, and the package automatically generates screenshot images, serves them via a dedicated route, and caches them on disk.
Here's a quick example using the Blade component:
<x-og-image> <div class="w-full h-full bg-blue-900 text-white flex items-center justify-center"> <h1 class="text-6xl font-bold">{{ $post->title }}</h1> </div> </x-og-image>
This will render a hidden <template> tag containing your HTML. The package middleware automatically injects the og:image and twitter:image meta tags into your page's <head>. The screenshot is taken at 1200×630 pixels (at 2x resolution for retina sharpness), the standard OG image size.
Because the OG image template lives on the actual page, it inherits your page's existing CSS, fonts, and Vite assets. No separate CSS configuration needed.
The approach of using a <template> tag to define OG images inline with your page's own CSS is inspired by OGKit by Peter Suhm. If you don't want to self-host the generation of OG images, look no further than OG Kit.
We got badges
