Тема

OG-зображення для дописів у блозі

OG-зображення для дописів у блозі — це соціальне зображення попереднього перегляду (social preview image) розміром 1200×630, яке показується, коли хтось ділиться вашою статтею в X, LinkedIn, Facebook, Slack або WhatsApp. FastOG генерує його динамічно на запит із заголовка, анотації та автора вашого допису — без дизайнерської роботи, завантажень, підписок, платних тарифів і без необхідності входу для початку роботи.

Чому кожен допис у блозі потребує власного OG-зображення

Посилання, опубліковане без картки або з застарілим універсальним зображенням, губиться серед інших дописів. Картка для кожного допису з актуальним заголовком і чистим макетом отримує більше поширень і більше кліків. Вартість ручного створення такого зображення для кожного допису — саме те, чому більшість блогів обмежуються одним типовим зображенням. Саме цю проблему усуває FastOG.

Як отримати динамічне OG-зображення для допису в блозі

Ви підписуєте URL під час рендерингу сторінки за допомогою template=blog, заголовка допису, уривка та автора. Соціальний краулер отримує його, FastOG один раз рендерить PNG, а Cloudflare кешує його, тому кожен наступний обмін миттєвий і безкоштовний.

tsx

// Next.js App Router — app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
    const post = await getPost(params.slug);
    return {
        title: post.title,
        openGraph: {
            images: [generateOgImageUrl({
                template: "blog",
                title: post.title,
                subtitle: post.excerpt,
                author: post.author.name,
            })],
        },
    };
}

Використовуйте template=blog для виділеної картки блогу з автором і заголовком або default для чистішого макета лише із заголовком. Усі шаблони рендеряться у форматі 1200×630.

Який шаблон підходить для вашого блогу

Якщо ваш блог…	Використовуйте шаблон	Бонус
Показує автора та анонс	`blog`	рядок автора включено
Переважно складається із заголовка та слогана	`default`	мінімалістичний, орієнтований на бренд
Використовує фото або обкладинку	`editorial` / `image-right`	макет із акцентом на фото
Публікує анонси запусків / продуктові пости	`launch`	поля версії та домену

FAQ

Скільки коштує FastOG для дописів у блозі?

Один рендер на унікальне зображення; ідентичні URL-адреси кешуються на периферії назавжди й не враховуються у ваш місячний ліміт.

Чи потрібно генерувати зображення заново, коли я редагую допис?

Лише якщо змінюються заголовок, анотація або автор — URL залежить від вмісту, тому зміна вмісту створює нову URL-адресу та новий рендер. Якщо URL не змінився, він залишається в кеші й не враховується у ваш ліміт.

Чи можу я використовувати FastOG зі своїм наявним фреймворком для блогу?

Так. Готові підписувачі (signers) доступні для Next.js, React, SvelteKit, Vue/Nuxt, Astro, Express, Vanilla Node.js, JavaScript, PHP/Laravel, Python та Ruby/Rails. Дивіться сторінку SDK.

Спробуйте безкоштовно — реєстрація не потрібна

Переглядайте та тестуйте динамічні OG-зображення за лічені секунди.

Відкрити безкоштовний тестер OG-зображень