Screenshot API otwiera adres w prawdziwej przeglądarce i zwraca obrazek tego, co widać. API szablonów graficznych bierze układ zaprojektowany raz — w HTML-u i CSS albo w edytorze wizualnym — wstawia wysłane pola (tytuł, autora, cenę) i zwraca obrazek. Do obrazków Open Graph zwykle lepsze są szablony: projektuje się je na 1200×630, są czytelne w miniaturce i zmieniają się tylko wtedy, gdy zmieniają się ich pola. Zrzuty wygrywają, gdy chodzi właśnie o wygląd strony.
To cała odpowiedź; reszta poradnika to szczegóły, z kodem dla obu podejść.
Czym różnią się w praktyce
| Screenshot API | API szablonów | |
|---|---|---|
| Wejście | Adres (plus viewport, urządzenie, opcje czekania) | Slug szablonu i wartości pól |
| Kształt wyniku | Taki, jak wygląda strona w tym viewporcie | Dokładnie zaprojektowany układ |
| Proporcje | Viewportu, często 1280×800 (1,6:1) | Zwykle 1200×630 (1,91:1) |
| Czytelny przy 500 px szerokości | Rzadko — tekst kurczy się do ~5 px | Tak, jeśli zaprojektowany pod to |
| To samo wejście, ten sam wynik | Nie — strony się zmieniają, reklamy rotują, trwają testy A/B | Tak — cache po polach |
| Co może zepsuć | Banery cookies, leniwe ładowanie, ochrona przed botami, logowanie, wolne skrypty zewnętrzne | Za długie pole (rozwiązuje to dopasowanie tekstu) |
| Ponowny render, gdy | Zmieni się strona (rzadko wiesz kiedy) | Zmieni się pole (zawsze wiesz) |
O większości przypadków decyduje środkowy wiersz. Aktualności na Facebooku czy LinkedInie pokazują podgląd linku szeroki na mniej więcej 500 pikseli; zrzut artykułu szeroki na 1280 pikseli zmniejszony do tej szerokości zamienia 16-pikselowy tekst w około 6 pikseli. Obrazek jest technicznie poprawny i praktycznie nieczytelny.
Kiedy zrzut ekranu jest właściwym og:image
- Strona jest z natury wizualna: pulpit, wykres, strona statusu, landing page, którym chcesz się pochwalić, praca w portfolio.
- Pokazujesz cudzą witrynę: katalogi linków, narzędzia do zakładek, funkcje „jak wygląda ta strona”, archiwa. Nie masz pól do szablonu — tylko adres.
- Regresja wizualna albo monitoring: porównywanie strony z nią samą w czasie.
- Brak czasu na projekt karty: zrzut sekcji hero jest lepszy niż brak obrazka.
W takich przypadkach poproś o viewport bliski kształtowi karty — 1200×630, jeśli strona dobrze się w nim czyta — zamiast domyślnego viewportu komputera, i ukryj to, co do podglądu nie pasuje:
curl -X POST "https://shareglint.com/v1/screenshots?wait=true" \
-H "Authorization: Bearer $OG_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"url": "https://status.example.com",
"viewport_width": 1200,
"viewport_height": 630,
"block_cookie_banners": true,
"block_ads": true,
"hide_selectors": [".chat-widget"],
"wait_for": ".status-grid",
"format": "png"
}'
wait_for czeka, aż pojawi się element pasujący do selektora, co ma znaczenie przy stronach, które renderują treść JavaScriptem po zdarzeniu load. Nieudana strona (4xx/5xx, przekroczony czas, adres prywatny) wraca jako status: failed z powodem i nic nie kosztuje.
Banery cookies to najczęstszy powód, dla którego zrzut strony źle wygląda w aktualnościach. block_cookie_banners klika „akceptuj” na popularnych platformach zgód (OneTrust, Cookiebot, Didomi, Usercentrics, Quantcast, TrustArc, Sourcepoint), a resztę ukrywa listą EasyList Cookie List; na naszym zestawie dziesięciu stron głównych serwisów informacyjnych i sklepów, pełnych banerów, usunął każdy, który się pojawił. Dwie kolejne opcje pomagają przy podglądach: selector zapisuje jeden element (wykres, tabelę cen) zamiast całego viewportu, a click_selector najpierw klika zakładkę albo „pokaż więcej”. Jeśli zamiast obrazka chcesz krótkie wideo do social mediów, scroll_video: true nagrywa płynne przewijanie strony jako MP4 albo GIF.
Bez serwera ten sam zrzut działa jako podpisany adres, który wpiszesz prosto w og:image albo <img>: https://shareglint.com/s/acc_…png?url=https%3A%2F%2Fstatus.example.com&viewport_width=1200&viewport_height=630&s=… — podpis liczy się dokładnie tak jak przy adresach obrazków w dokumentacji API. Wszystkie opcje zrzutów opisuje strona Screenshot API.
Kiedy szablon jest właściwym og:image
- Blogi, dokumentacja, changelogi, strony produktów, oferty pracy, wydarzenia — wszystko, co ma tytuł i kilka faktów, które mają być czytelne w aktualnościach.
- Wiele stron w jednym stylu: szablon trzyma każdą kartę w zgodzie z marką, bez otwierania programu graficznego.
- Chcesz, żeby cache działał: obrazek jest funkcją swoich pól. Ten sam tytuł, ten sam plik — bez ponownego renderu i bez zużycia limitu.
curl -X POST "https://shareglint.com/v1/images?wait=true" \
-H "Authorization: Bearer $OG_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"template": "blog-og",
"modifications": {
"title": "We moved our status page to static hosting",
"author": "Ana Ruiz",
"site": "status.example.com"
}
}'
Długie tytuły to główny słaby punkt szablonów — a po polsku tytuły bywają dłuższe niż angielskie. Dobry szablon zmniejsza tekst, żeby zmieścił się w ramce, zamiast wylewać go poza nią; w Shareglint robi to atrybut data-autofit i używa go każdy wbudowany szablon. Gotowe układy znajdziesz w galerii szablonów, a własny możesz napisać w HTML-u i CSS (HTML do obrazka).
Rozwiązanie pośrednie: zrzut własnej trasy OG
Popularna droga środka to osobna, niepodlinkowana trasa w twojej witrynie — /og/posts/42 — która renderuje kartę 1200×630 w twoim HTML-u i CSS, i zrzut ekranu tej trasy. Dostajesz wynik jak z szablonu, z twojego kodu, z twoimi fontami i komponentami.
To działa, ale trzeba zaplanować trzy koszty: trasa jest publiczna (każdy może wyrenderować dowolną kartę, zmieniając ID, więc nie wystawiaj szkiców), strona musi być na tyle szybka i stabilna, żeby zrzut za każdym razem wychodził tak samo, a utrzymujesz i trasę, i zadanie robiące zrzuty. Jeśli i tak piszesz kartę w HTML-u, wysłanie tego HTML-a do API szablonów jako samego szablonu usuwa trasę i zostawia ten sam kod — to ten sam pomysł, tylko bez publicznego endpointu.
Ile to kosztuje
Ceny planów podstawowych wyspecjalizowanych screenshot API, z ich publicznych cenników (sprawdzone 2026-11-04, ceny miesięczne netto w USD):
| Serwis | Plan podstawowy | Zrzuty w cenie |
|---|---|---|
| ScreenshotOne | $17 / mies. | 2000 (plan darmowy: 100) |
| Urlbox | $19 / mies. | 2000 (7-dniowy okres próbny, bez planu darmowego) |
| ApiFlash | $7 / mies. | 1000 (plan darmowy: 100) |
W Shareglint zrzuty i obrazki z szablonów dzielą jeden limit: zrzut viewportu zużywa 1 render, zrzut całej strony 2, a ten sam adres z tymi samymi opcjami w ciągu 24 godzin zwraca istniejący plik za darmo. Plan Starter kosztuje $9 miesięcznie za 2 000 renderów; plan Free to 100 miesięcznie z małym znakiem wodnym (cennik).
Uczciwie wobec wyspecjalizowanych serwisów: mają opcje, których my nie oferujemy. ScreenshotOne we wszystkich planach daje m.in. tryb stealth i zapis gotowych plików do S3, a w najwyższym planie renderowanie na GPU; Urlbox ma od planu Hi-Fi własne nagłówki żądania i zapis do S3, a od Ultra własny JavaScript i renderowanie na GPU. Jeśli zrzuty ekranu są sednem twojego produktu, wybierz jeden z nich. Powodem, by użyć naszego, jest jeden klucz i jeden limit na zrzuty i szablony.
Decyzja w dziesięć sekund
- Obrazek ma pokazać, jak strona wygląda? Zrzut ekranu.
- Ma czytelnie powiedzieć, o czym jest strona, w aktualnościach? Szablon.
- Masz tylko adres, bez uporządkowanych danych? Zrzut — albo karty generowane automatycznie, które wstawiają tytuł i opis strony do szablonu.
- Potrzebujesz zawsze tego samego obrazka dla tej samej treści? Szablon.
Większość witryn kończy z szablonami dla własnych stron i zrzutami dla wszystkiego, co zewnętrzne albo wizualne. Obie odpowiedzi są w porządku; zła jest jedna — zrzut artykułu 1280×800 jako obrazek do udostępniania tego właśnie artykułu.
