OG Kit дозволяє генерувати динамічні зображення Open Graph за допомогою HTML і CSS.

0
Перекладено ШІ
Оригінал: Laravel News
Оновлено: 25 березня, 2026
OG Kit генерує динамічні Open Graph‑зображення з вашого HTML і CSS та має офіційну інтеграцію для Laravel 10–12. Встановіть пакет і за кілька хвилин редагуйте Blade‑шаблони, переглядайте прев’ю й отримуйте кешовані зображення без складних налаштувань.

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.

Популярні

Logomark Logotype

Журнал аудиту в Laravel

Хочете забезпечити повну прозорість у своїх Laravel-додатках? Пакет Laravel Audit Log допоможе вам детально відстежувати всі зміни моделей Eloquent та відповідати вимогам регуляторів. Читайте далі, щоб дізнатися, як цей потужний інструмент може підвищити надійність вашого проєкту

Logomark Logotype

Nuxt 3 + Laravel Sanctum: Просте та надійне рішення для автентифікації вашого SPA та API

У сучасній веб-розробці аутентифікація є ключовою для захисту додатків і даних користувачів. Дізнайтеся, як модуль nuxt-sanctum-authentication спростить інтеграцію між Nuxt 3 та Laravel Sanctum, забезпечуючи надійний і зручний спосіб реалізації аутентифікації для вашого проєкту

Logomark Logotype

Що нового в PHP 8.5

PHP 8.5 обіцяє безліч нових можливостей, таких як оператор Pipe, функції `array_first()` та `array_last()`, а також нове розширення URI. Чи готові ви дізнатися, як ці функції можуть спростити вашу розробку? Читайте далі, щоб дізнатися більше про ці захоплюючі нововведення