PHPackages mischasigtermans/laravel-ogkit - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. mischasigtermans/laravel-ogkit ActiveLibrary[Image & Media](/categories/media) mischasigtermans/laravel-ogkit ============================== Dynamic OG images for Laravel. Design social previews with your own HTML and CSS. v0.3.0(1mo ago)1342[1 PRs](https://github.com/mischasigtermans/laravel-ogkit/pulls)MITBladePHP ^8.2CI passing Since Dec 22Pushed 1mo agoCompare [ Source](https://github.com/mischasigtermans/laravel-ogkit)[ Packagist](https://packagist.org/packages/mischasigtermans/laravel-ogkit)[ RSS](/packages/mischasigtermans-laravel-ogkit/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (12)Versions (8)Used By (0) Laravel OG Kit ============== [](#laravel-og-kit) [![Latest Version on Packagist](https://camo.githubusercontent.com/30ce0b543e072307c3febd3ffb25f3631b590d1d566fdfead7b5c7f2d12982f5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d69736368617369677465726d616e732f6c61726176656c2d6f676b69742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mischasigtermans/laravel-ogkit)[![Total Downloads](https://camo.githubusercontent.com/e397b6b28fa7d6eef50995e8aae1cb27db63ee3df2aff439bf93aaba35ee00b1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d69736368617369677465726d616e732f6c61726176656c2d6f676b69742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mischasigtermans/laravel-ogkit) Dynamic OG images for Laravel. Design social previews with HTML and CSS using [OG Kit](https://ogkit.dev). OG Kit screenshots your custom HTML templates to generate beautiful Open Graph images. This package provides Blade components, directives, and 21 pre-built templates to get you started quickly. Installation ------------ [](#installation) ``` composer require mischasigtermans/laravel-ogkit ``` Add your API key to `.env`: ``` OGKIT_API_KEY=your-api-key ``` Quick Start ----------- [](#quick-start) ### Option 1: From Controller/Component (Recommended) [](#option-1-from-controllercomponent-recommended) Set the OG template from your controller or Livewire component: ``` use Ogkit\Ogkit; class ArticleController extends Controller { public function show(Article $article, Ogkit $ogkit) { $ogkit->template('layered', [ 'title' => $article->title, 'category' => $article->category->name, 'image' => $article->featured_image_url, ]); return view('articles.show', compact('article')); } } ``` In Livewire: ``` use Ogkit\Ogkit; class ArticlePage extends Component { public function mount(Article $article, Ogkit $ogkit) { $ogkit->template('detailed', [ 'title' => $article->title, 'readingTime' => $article->reading_time . ' min read', 'category' => $article->category->name, 'image' => $article->featured_image_url, ]); } } ``` ### Option 2: In Blade View [](#option-2-in-blade-view) Add a template directly in your Blade view: ``` ``` ### Add Meta Tags [](#add-meta-tags) Add the meta-tags to your layout's ``: ``` @ogkit ``` Why OG Kit? ----------- [](#why-og-kit) Static OG images are limiting. You want dynamic images that reflect your content – blog titles, product names, user profiles. OG Kit lets you design OG images with tools you already know: HTML, CSS, and Tailwind. **How it works:** 1. Add a template to your page (via controller or Blade) 2. OG Kit's service screenshots that template at 1200x630 3. The screenshot URL is used as your `og:image` No image generation code. No Puppeteer servers. No Canvas APIs. Just HTML. **Common use cases:** - **Blog posts**: Dynamic titles with featured images and reading time - **E-commerce**: Product images with prices and sale badges - **User profiles**: Personalized cards with avatars and stats - **Documentation**: Section titles with code snippets - **Social sharing**: Year-in-review cards, achievement badges Preview Mode ------------ [](#preview-mode) Enable the preview overlay during development to see your OG images in real-time: ``` OGKIT_PREVIEW=true ``` A preview button is automatically injected into all HTML responses. Click "OG Preview" to see exactly what will be screenshotted. Templates --------- [](#templates) 22 pre-built templates included: TemplateFieldsBest For`split-title`title, subtitleLanding pages`image`title, imageBlog posts`headline`title, logoAnnouncements`bold`title, domainSimple pages`bold-logo`title, logoBrand pages`masked`title, ctaMarketing`masked-logo`title, logo, ctaCampaigns`outlined`title, domainMinimal style`centered`title, subtitle, domainAbout pages`centered-logo-avatar`title, logo, authorName, authorImage, imageAuthor posts`poppin`title, domainBold statements`simple`title, subtitle, domainGeneral use`simple-logo`title, subtitle, logoBrand pages`detailed`title, readingTime, category, image, domainBlog posts`wireframe`title, subtitle, domainMinimal pages`wireframe-background`title, image, domainTech content`wireframe-split`title, description, image, domainArticles`layered`title, category, image, domainFeatured content`default`title, subtitle, price, fromPrice, imageE-commerce`bold-sale`title, price, fromPrice, imageSales`documentation`overline, title, subtitle, repository, imageDocs`repository`title, subtitle, image, codeOpen source### Using Templates [](#using-templates) From controller: ``` $ogkit->template('layered', [ 'title' => 'How to Build Great Products', 'category' => 'Engineering', 'image' => asset('images/hero.jpg'), ]); ``` Or in Blade: ``` ``` If you've set a default template in your config, you can omit the `template` prop: ``` ``` ### Custom Templates [](#custom-templates) Create your own design without using a named template: ``` {{ $title }} {{ $subtitle }} ``` Styling ------- [](#styling) ### Color Props [](#color-props) PropCSS VariableDescription`background-primary``--og-background-primary-color`Main background`background-secondary``--og-background-secondary-color`Gradient/pattern secondary`foreground-primary``--og-foreground-primary-color`Main text color`foreground-secondary``--og-foreground-secondary-color`Muted text color`accent-color``--og-accent-color`Accent/highlight color### CSS Utilities [](#css-utilities) Use these classes in your templates: ``` /* Backgrounds */ .og-bg-primary .og-bg-secondary .og-bg-accent /* Text */ .og-text-primary .og-text-secondary .og-text-accent /* Borders */ .og-border-primary .og-border-secondary .og-border-accent /* Fonts */ .og-font /* Primary font */ .og-font-secondary /* Secondary font (serif by default) */ ``` ### Background Types [](#background-types) Set via `background-type` prop: TypeDescription`gradient-vertical`Top to bottom gradient`gradient-horizontal`Left to right gradient`gradient-diagonal`Corner to corner gradient`boxes`Grid pattern`paper`Graph paper pattern`lines`Horizontal lines`lines-v2`Vertical lines`lines-v3`Cross-hatch lines`diagonal`Diagonal stripes`diagonal-v2`Reverse diagonal stripes`diagonal-v3`Fine diagonal lines`waves`Radial wave pattern`zig-zag`Zig-zag pattern`moons`Moon/circle pattern`triangles`Triangle pattern`triangles-v2`Reverse triangles`rectangles`Rectangle pattern`plusses`Plus sign pattern``` $ogkit->template('bold', [ 'title' => 'My Page', 'backgroundType' => 'boxes', ]); ``` ### Fonts [](#fonts) Pass any Google Font name: ``` $ogkit->template('split-title', [ 'title' => 'Hello World', 'font' => 'Space Grotesk', ]); ``` You can also set a secondary font for accent text like domains or labels: ``` $ogkit->template('wireframe-split', [ 'title' => 'My Article', 'font' => 'Open Sans', 'fontSecondary' => 'Besley', ]); ``` Use the `.og-font-secondary` utility class in your custom templates to apply the secondary font. Configuration ------------- [](#configuration) Publish the config file: ``` php artisan vendor:publish --tag=ogkit-config ``` ``` // config/ogkit.php return [ 'api_key' => env('OGKIT_API_KEY'), 'preview' => env('OGKIT_PREVIEW', false), 'base_url' => env('OGKIT_BASE_URL', 'https://ogkit.dev'), 'defaults' => [ 'template' => 'wireframe-split', 'font' => 'Space Grotesk', 'font_secondary' => 'Besley', 'accent' => '#171717', 'typography' => [ 'primary' => '#171717', 'secondary' => '#8a8a8a', ], 'background' => [ 'type' => 'boxes', 'primary' => '#ffffff', 'secondary' => '#f5f5f5', ], ], ]; ``` Blade Directives ---------------- [](#blade-directives) ### @ogkit [](#ogkit) Output complete OG meta tags: ``` @ogkit ``` With title and description: ``` @ogkit(title: 'My Page Title', description: 'Page description for social sharing') ``` Generates: ``` ``` ### @ogkitUrl [](#ogkiturl) Get just the image URL: ``` ``` With a version parameter for cache busting: ``` ``` ### @ogkitTemplate / @endOgkitTemplate [](#ogkittemplate--endogkittemplate) Create inline custom templates: ``` @ogkitTemplate {{ $title }} @endOgkitTemplate ``` Service Methods --------------- [](#service-methods) ``` use Ogkit\Ogkit; public function show(Article $article, Ogkit $ogkit) { // Set template from controller $ogkit->template('layered', ['title' => $article->title]); // Get image URL $url = $ogkit->imageUrl(); $url = $ogkit->imageUrl('https://example.com/page'); $url = $ogkit->imageUrl(version: 'v2'); // Get complete meta tags HTML $meta = $ogkit->meta(); $meta = $ogkit->meta( title: 'Page Title', description: 'Page description', pageUrl: 'https://example.com/page', version: 'v2' ); // Get just the image meta tags $meta = $ogkit->imageMeta(); } ``` Tailwind Setup -------------- [](#tailwind-setup) Add the package views to your `tailwind.config.js` content array: ``` content: [ // ... your other paths './vendor/mischasigtermans/laravel-ogkit/resources/views/**/*.blade.php', ], ``` Publish and import the CSS utilities: ``` php artisan vendor:publish --tag=ogkit-css ``` ``` /* resources/css/app.css */ @import './vendor/ogkit.css'; ``` Or import directly from vendor: ``` @import '../../vendor/mischasigtermans/laravel-ogkit/resources/css/ogkit.css'; ``` Use Cases --------- [](#use-cases) ### Blog with Dynamic OG Images [](#blog-with-dynamic-og-images) ``` class ArticleController extends Controller { public function show(Article $article, Ogkit $ogkit) { $ogkit->template('detailed', [ 'title' => $article->title, 'readingTime' => $article->reading_time . ' min read', 'category' => $article->category->name, 'image' => $article->featured_image_url, ]); return view('articles.show', compact('article')); } } ``` ### E-commerce Product Pages [](#e-commerce-product-pages) ``` class ProductController extends Controller { public function show(Product $product, Ogkit $ogkit) { $ogkit->template('default', [ 'title' => $product->name, 'subtitle' => $product->short_description, 'price' => '$' . number_format($product->price, 2), 'fromPrice' => $product->compare_price ? '$' . number_format($product->compare_price, 2) : null, 'image' => $product->featured_image_url, ]); return view('products.show', compact('product')); } } ``` ### User Profile Cards [](#user-profile-cards) ``` class ProfileController extends Controller { public function show(User $user, Ogkit $ogkit) { $ogkit->template('centered-logo-avatar', [ 'title' => $user->name, 'authorName' => '@' . $user->username, 'authorImage' => $user->avatar_url, 'logo' => asset('images/logo.svg'), ]); return view('profiles.show', compact('user')); } } ``` ### Documentation Pages [](#documentation-pages) ``` class DocsController extends Controller { public function show(string $section, string $page, Ogkit $ogkit) { $doc = Documentation::find($section, $page); $ogkit->template('documentation', [ 'overline' => $section, 'title' => $doc->title, 'subtitle' => $doc->description, 'repository' => 'github.com/your-org/your-repo', ]); return view('docs.show', compact('doc')); } } ``` Testing ------- [](#testing) ``` composer test ``` Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 10, 11, or 12 - [OG Kit](https://ogkit.dev) API key Credits ------- [](#credits) - [OG Kit](https://ogkit.dev) by [Peter Suhm](https://github.com/petersuhm) - [Mischa Sigtermans](https://github.com/mischasigtermans) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 42 — FairBetter than 90% of packages Maintenance90 Actively maintained with recent releases Popularity18 Limited adoption so far Community8 Small or concentrated contributor base Maturity42 Maturing project, gaining track record Bus Factor1 Top contributor holds 84.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~22 days Total 5 Last Release 50d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a002abdc851a76410e86443f04058710f9d32f82f31873f8c6544d2e881e79c6?d=identicon)[mischasigtermans](/maintainers/mischasigtermans) --- Top Contributors [![mischasigtermans](https://avatars.githubusercontent.com/u/22501510?v=4)](https://github.com/mischasigtermans "mischasigtermans (11 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)") --- Tags metadataogkitopengraphopengraph-imageslaravelseoopen-graphog-imagesocial-preview ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/mischasigtermans-laravel-ogkit/health.svg) ``` [![Health](https://phpackages.com/badges/mischasigtermans-laravel-ogkit/health.svg)](https://phpackages.com/packages/mischasigtermans-laravel-ogkit) ``` ### Alternatives [creativeorange/gravatar A Laravel Gravatar package for retrieving gravatar image URLs or checking the existance of an image. 5467.5M54](/packages/creativeorange-gravatar)[intervention/image-laravel Laravel Integration of Intervention Image 1496.5M102](/packages/intervention-image-laravel)[bkwld/croppa Image thumbnail creation through specially formatted URLs for Laravel 510496.0k23](/packages/bkwld-croppa)[spatie/laravel-og-image Generate OG images for your Laravel app 305.2k](/packages/spatie-laravel-og-image)[vormkracht10/laravel-open-graph-image Laravel package to generate dynamic Open Graph images 7217.7k](/packages/vormkracht10-laravel-open-graph-image)[lionix/seo-manager SEO Manager for Laravel Framework 2165.4k](/packages/lionix-seo-manager) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)