Szablon obrazka OG: Tabela porównawcza funkcji

og1200×630 square1080×1080 portrait1080×1350 story1080×1920 pinterest1000×1500 youtube1280×720

Szablon obrazka Open Graph „Tabela porównawcza funkcji” wyrenderowany przez Shareglint

Szablon Tabela porównawcza funkcji w rozmiarze square (1080×1080)

Szablon Tabela porównawcza funkcji w rozmiarze portrait (1080×1350)

Szablon Tabela porównawcza funkcji w rozmiarze story (1080×1920)

Szablon Tabela porównawcza funkcji w rozmiarze pinterest (1000×1500)

Szablon Tabela porównawcza funkcji w rozmiarze youtube (1280×720)

To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.

Dla stron „X vs Y” i „alternatywy dla…”, serwisów z recenzjami i porównań planów generowanych dla każdego konkurenta. Do czterech kolumn i siedmiu wierszy: szerokie kadry pokazują pięć wierszy i resztę liczą w linijce „+N more”, kwadratowe i pionowe pokazują siedem. Kolumna bez logo dostaje monogram, długie wartości kończą się wielokropkiem, a bez wierszy karta pokazuje pustą tabelę-szkic. Pionowe kadry dają funkcjom dwa wiersze i rysują znaczki większe.

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	Nagłówek nad tabelą. domyślnie: How we compare	Northwind vs the alternatives
`eyebrow`	tekst	Mały napis nad tytułem, np. Porównanie 2026.	Comparison 2026
`columns`	tekst	Nazwy kolumn rozdzielone `;`, np. Northwind;Brightpixel;Canvasly. Najwyżej cztery.	Northwind;Brightpixel;Canvasly
`rows`	tekst	Wiersze rozdzielone `;`, każdy jako funkcja\|wartość\|wartość…, po jednej wartości na kolumnę: yes, no, partial albo krótki tekst, np. Signed URLs\|yes\|partial\|no;Darmowy plan\|500 miesięcznie\|no. Najwyżej siedem.	Signed URLs\|yes\|partial\|no;Animated GIF and MP4\|yes\|no\|no;Templates included\|120+\|40\|12;Team workspaces\|yes\|yes\|partial;Free tier\|500 a month\|100 a month\|no
`highlight`	tekst	Numer kolumny uniesionej jako karta, np. 1 dla pierwszej; puste albo 0 nie wyróżnia żadnej. domyślnie: 1	1
`site`	tekst	Adres strony, w prawym górnym rogu.	northwind.dev/compare
`logo_1`	adres obrazka	Logo pierwszej kolumny.	https://example.com/images/logo-northwind.png
`logo_2`	adres obrazka	Logo drugiej kolumny.	https://example.com/images/b06-icon-hex.png
`logo_3`	adres obrazka	Logo trzeciej kolumny.	https://example.com/images/b06-icon-bolt.png
`logo_4`	adres obrazka	Logo czwartej kolumny.	—
`accent`	kolor	Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #4f46e5	#4f46e5
`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://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "feature-matrix",
    "modifications": {
        "title": "Northwind vs the alternatives",
        "eyebrow": "Comparison 2026",
        "columns": "Northwind;Brightpixel;Canvasly",
        "rows": "Signed URLs|yes|partial|no;Animated GIF and MP4|yes|no|no;Templates included|120+|40|12;Team workspaces|yes|yes|partial;Free tier|500 a month|100 a month|no",
        "highlight": "1",
        "site": "northwind.dev/compare",
        "logo_1": "https://example.com/images/logo-northwind.png",
        "logo_2": "https://example.com/images/b06-icon-hex.png",
        "logo_3": "https://example.com/images/b06-icon-bolt.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://shareglint.com/i/acc_YOUR_ACCOUNT_ID/feature-matrix.png?columns=Northwind%3BBrightpixel%3BCanvasly&eyebrow=Comparison%202026&highlight=1&rows=Signed%20URLs%7Cyes%7Cpartial%7Cno%3BAnimated%20GIF%20and%20MP4%7Cyes%7Cno%7Cno%3BTemplates%20included%7C120%2B%7C40%7C12%3BTeam%20workspaces%7Cyes%7Cyes%7Cpartial%3BFree%20tier%7C500%20a%20month%7C100%20a%20month%7Cno&site=northwind.dev%2Fcompare&title=Northwind%20vs%20the%20alternatives&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://shareglint.com/v1/templates/library/feature-matrix/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Użyj tego szablonu — zacznij za darmo

Więcej szablonów: Produkt i SaaS

Szablon obrazka Open Graph „changelog / wydanie” wyrenderowany przez Shareglint

Changelog / wydanie Szablon obrazka Open Graph „zapowiedź funkcji” wyrenderowany przez Shareglint

Zapowiedź funkcji Szablon obrazka Open Graph „porównanie (A vs B)” wyrenderowany przez Shareglint

Porównanie (A vs B) Szablon obrazka Open Graph „Plan rozwoju produktu” wyrenderowany przez Shareglint

Plan rozwoju produktu Szablon obrazka Open Graph „Aplikacja w sklepie” wyrenderowany przez Shareglint

Aplikacja w sklepie Szablon obrazka Open Graph „Dzień premiery” wyrenderowany przez Shareglint

Dzień premiery Szablon obrazka Open Graph „Plany cenowe” wyrenderowany przez Shareglint

Plany cenowe Szablon obrazka Open Graph „Komunikat o awarii” wyrenderowany przez Shareglint

Komunikat o awarii Szablon obrazka Open Graph „Makieta urządzenia” wyrenderowany przez Shareglint

Makieta urządzenia

Wszystkie szablony w kategorii Produkt i SaaS (11) → · Wszystkie szablony →