Tytuł strony, opis, nazwa witryny i ikona, a gdy strona ma własny obrazek — w ramce okna przeglądarki.
To prawdziwy render z API z przykładowymi wartościami z tabeli niżej, w rozmiarze 1200×630.
Szablon obrazków auto OG: jeden tag w szablonie strony i każda podstrona dostaje tę kartę, wypełnioną jej własnym tytułem, opisem, ikoną i og:image — bez wysyłania pól. Można go też renderować jak każdy inny szablon. Bez obrazka tytuł zajmuje całą szerokość, a ikona witryny stoi duża w rogu; bez ikony pokazuje pierwszą literę nazwy witryny.
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: Untitled page | How we cut our image pipeline from 9 seconds to 900 ms |
description |
tekst | Opis strony, do dwóch linii. | Cold starts, font loading and a Chrome pool: what actually made renders fast. |
site |
tekst | Nazwa witryny obok ikony. | Northwind Blog |
url |
tekst | Adres strony na dole, bez https://. | blog.northwind.dev/image-pipeline |
favicon |
adres obrazka | Ikona witryny (PNG, JPEG albo WebP); bez niej pierwsza litera nazwy witryny. | https://example.com/images/logo-northwind.png |
image |
adres obrazka | Własny obrazek strony, w ramce okna przeglądarki po prawej. | https://example.com/images/dashboard.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. | — |
Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.
curl -X POST "https://shareglint.com/v1/images?wait=true" \
-H "Authorization: Bearer sk_live_YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{
"template": "site-card",
"modifications": {
"title": "How we cut our image pipeline from 9 seconds to 900 ms",
"description": "Cold starts, font loading and a Chrome pool: what actually made renders fast.",
"site": "Northwind Blog",
"url": "blog.northwind.dev/image-pipeline",
"favicon": "https://example.com/images/logo-northwind.png",
"image": "https://example.com/images/dashboard.png"
}
}'
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://shareglint.com/i/acc_YOUR_ACCOUNT_ID/site-card.png?description=Cold%20starts%2C%20font%20loading%20and%20a%20Chrome%20pool%3A%20what%20actually%20made%20renders%20fast.&site=Northwind%20Blog&title=How%20we%20cut%20our%20image%20pipeline%20from%209%20seconds%20to%20900%20ms&url=blog.northwind.dev%2Fimage-pipeline&s=YOUR_SIGNATURE">
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://shareglint.com/v1/templates/library/site-card/copy" \
-H "Authorization: Bearer sk_live_YOUR_KEY"
Wpis na blogu
Oferta pracy
Wydarzenie
Odcinek podcastu
Changelog / wydanie
Strona dokumentacji
Oferta nieruchomości
Karta produktu
Produkt w promocji
Lekcja kursu
Przepis
Wydanie newslettera
Karta z cytatem
Case study / opinia klienta
Repozytorium GitHub
Zapowiedź funkcji
Profil / karta autora
Porównanie (A vs B)
Wyróżniona liczba