lighthouse-scores

Szablon obrazka OG: Wyniki Lighthouse

Raport z audytu w oknie przeglądarki: adres w pasku adresu, do czterech pierścieni w kolorach progów Lighthouse i opcjonalny zrzut ekranu.

Szablon obrazka Open Graph „Wyniki Lighthouse” wyrenderowany przez Shareglint
Szablon Wyniki Lighthouse w rozmiarze square (1080×1080)
Szablon Wyniki Lighthouse w rozmiarze portrait (1080×1350)
Szablon Wyniki Lighthouse w rozmiarze story (1080×1920)
Szablon Wyniki Lighthouse w rozmiarze pinterest (1000×1500)
Szablon Wyniki Lighthouse 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 agencji, hostingów, narzędzi SEO i deweloperskich, które chwalą się wynikami strony: wydajnością, dostępnością, dobrymi praktykami i SEO. Pierścienie są ograniczone do 0–100 i robią się czerwone poniżej 50, pomarańczowe poniżej 90 i zielone od 90; wyświetlana liczba to ta, którą wysłano. W kadrach poziomych cztery wskaźniki stoją w rzędzie, a zrzut ekranu po prawej, przycięty od góry; w kwadratowych i pionowych zrzut jest nad siatką dwa na dwa.

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
url tekst Adres badanej strony, np. northwind.dev/cennik. domyślnie: example.com northwind.dev/pricing
scores tekst Do czterech wyników jako pary etykieta:liczba oddzielone przecinkami albo średnikami, np. Wydajność:98, Dostępność:100, Dobre praktyki:96, SEO:100. Performance:87, Accessibility:100, Best practices:96, SEO:100
device tekst Urządzenie audytu: mobile albo desktop. jedna z wartości: mobile | desktop mobile
date tekst Data audytu w dowolnym zapisie. Oct 26, 2026
screenshot adres obrazka Zrzut ekranu strony. https://example.com/images/phone-app.png
logo adres obrazka Logo w dolnym rogu okna. 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://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "lighthouse-scores",
    "modifications": {
        "url": "northwind.dev/pricing",
        "scores": "Performance:87, Accessibility:100, Best practices:96, SEO:100",
        "device": "mobile",
        "date": "Oct 26, 2026",
        "screenshot": "https://example.com/images/phone-app.png",
        "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://shareglint.com/i/acc_YOUR_ACCOUNT_ID/lighthouse-scores.png?date=Oct%2026%2C%202026&device=mobile&scores=Performance%3A87%2C%20Accessibility%3A100%2C%20Best%20practices%3A96%2C%20SEO%3A100&url=northwind.dev%2Fpricing&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/lighthouse-scores/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów: Dla programistów

Wszystkie szablony w kategorii Dla programistów (11) →  ·  Wszystkie szablony →