OG Kit — сервіс для генерації динамічних Open Graph зображень за допомогою вашого HTML і CSS. Розроблений Peter Suhm, він дозволяє визначати шаблони OG-зображень прямо в кодовій базі замість покладання на зовнішні дизайн‑інструменти або headless browser‑налаштування.
Як це працює
Додаєте тег <template> з розміткою OG-зображення на будь-яку сторінку, підключаєте клієнтський скрипт OG Kit — сервіс рендерить і кешує зображення. Щоб переглянути шаблон у браузері, додайте ?ogkit-render до URL і в інструментах розробника підправляйте його в реальному часі.
<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>Оскільки шаблони — звичайний HTML і CSS, можна використовувати наявні стилі, шрифти, зображення та вашу систему шаблонів. Ніякої власної DSL вивчати не потрібно.
Інтеграція з Laravel
OG Kit має офіційний пакет для Laravel, що підтримує версії 10, 11 і 12:
composer require petersuhm/ogkit-laravelПакет автоматично знаходить свій service provider, тому додаткових налаштувань після встановлення не потрібно.
Ось приклад шаблону:
<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>Працює також з Inertia; усю документацію з інтеграції з Laravel дивіться тут.
Ціни
OG Kit пропонує безкоштовний тариф на 25 сторінок; платні плани починаються від $99/рік за 1 000 сторінок. Усі плани включають кешовані зображення та необмежену кількість доменів. «Сторінка» означає унікальний URL, де OG Kit генерує й розміщує OG-зображення.
| План | Ціна | Сторінки |
|---|---|---|
| Безкоштовний | $0 | 25 сторінок |
| Базовий | $99/рік | 1 000 сторінок |
| Pro | $299/рік | 10 000 сторінок |
| Індивідуальний | Зверніться до відділу продажів | Вищі ліміти |
Деталі — на сайті OG Kit або в пакеті для Laravel на GitHub.