product-og

Szablon obrazka OG: karta produktu

Nazwa produktu, hasło, cena i zrzut ekranu — szablon startowy dla SaaS i aplikacji.

Szablon obrazka Open Graph „karta produktu” wyrenderowany przez Image API

To prawdziwy render z API z przykładowymi wartościami z tabeli niżej, w rozmiarze 1200×630.

Klasyczna karta produktu w dwóch kolumnach: logo, odznaka, nazwa i jednozdaniowy opis po lewej, zrzut ekranu po prawej i cena w stopce. Dostaje go każde nowe konto.

Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

Pole Typ Opis Przykład
name tekst Nazwa produktu. domyślnie: Product name Northwind Analytics
tagline tekst Jednolinijkowy opis. Privacy-first product analytics for teams that ship weekly.
price tekst Linia z ceną w stopce. From $19 / month
badge tekst Krótka etykieta w pigułce, np. NOWOŚĆ albo Na sprzedaż. NEW
site tekst Twoja domena albo krótki adres. domyślnie: twojblog.pl northwind.dev
logo adres obrazka Logo. https://example.com/images/logo-northwind.png
screenshot adres obrazka Zrzut ekranu produktu. https://example.com/images/laptop.jpg
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #f97316 #f97316
theme dark | light Schemat kolorów: dark albo light. —

Wyrenderuj go jednym żądaniem

Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.

curl -X POST "https://imageapi.benchkithq.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "product-og",
    "modifications": {
        "name": "Northwind Analytics",
        "tagline": "Privacy-first product analytics for teams that ship weekly.",
        "price": "From $19 / month",
        "badge": "NEW",
        "site": "northwind.dev",
        "logo": "https://example.com/images/logo-northwind.png",
        "screenshot": "https://example.com/images/laptop.jpg"
    }
}'

Albo wklej podpisany adres w og:image

Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.

<meta property="og:image" content="https://imageapi.benchkithq.com/i/acc_YOUR_ACCOUNT_ID/product-og.png?badge=NEW&name=Northwind%20Analytics&price=From%20%2419%20%2F%20month&site=northwind.dev&tagline=Privacy-first%20product%20analytics%20for%20teams%20that%20ship%20weekly.&s=YOUR_SIGNATURE">

Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

curl -X POST "https://imageapi.benchkithq.com/v1/templates/library/product-og/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów obrazków OG

Wszystkie szablony →