docs-page

Szablon obrazka OG: strona dokumentacji

Produkt, dział i tytuł strony ze szkicem strony dokumentacji z boku.

Szablon obrazka Open Graph „strona dokumentacji” wyrenderowany przez Image API

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

Linki do dokumentacji lądują przez cały dzień w zgłoszeniach, wątkach na Slacku i na forach. Karta dla każdej strony — z działem w okruszkach i krótkim opisem — mówi, że link prowadzi do odpowiedzi, a nie na stronę główną. Domyślnie jasna, jak większość dokumentacji.

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
title tekst Tytuł strony. domyślnie: Page title Authenticating requests with API keys
description tekst Jedno–dwa zdania pod tytułem. Create a key, send it as a Bearer token and rotate it without downtime.
section tekst Dział dokumentacji widoczny w okruszkach. Getting started
product tekst Nazwa produktu albo serwisu z dokumentacją. Northwind Docs
site tekst Twoja domena albo krótki adres. docs.northwind.dev
logo adres obrazka Logo produktu obok nazwy. https://example.com/images/logo-northwind.png
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #2563eb #2563eb
theme dark | light Schemat kolorów: dark albo light. domyślnie: 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": "docs-page",
    "modifications": {
        "title": "Authenticating requests with API keys",
        "description": "Create a key, send it as a Bearer token and rotate it without downtime.",
        "section": "Getting started",
        "product": "Northwind Docs",
        "site": "docs.northwind.dev",
        "logo": "https://example.com/images/logo-northwind.png"
    }
}'

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/docs-page.png?description=Create%20a%20key%2C%20send%20it%20as%20a%20Bearer%20token%20and%20rotate%20it%20without%20downtime.&product=Northwind%20Docs&section=Getting%20started&site=docs.northwind.dev&title=Authenticating%20requests%20with%20API%20keys&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/docs-page/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów obrazków OG

Wszystkie szablony →