# Generator obrazków OG: obrazek do udostępnień dla każdej strony, sam Generator obrazków OG tworzy grafikę, która pokazuje się przy udostępnieniu linku na LinkedInie, X, Slacku czy WhatsAppie — z tytułu i danych samej strony, zamiast eksportować ją ręcznie do każdego wpisu. Shareglint robi to przez HTTP: wybierz jeden z 153 szablonów albo przynieś własny HTML i CSS, wyślij tytuł i wstaw zwrócony adres obrazka 1200×630 do og:image. ## Jak to działa 1. Wybierz wygląd. Jeden z 153 gotowych szablonów z galerii, własny HTML i CSS albo warstwy w edytorze wizualnym. Każdy szablon renderuje się w 6 rozmiarach. 2. Podłącz stronę. Jedno wywołanie API przy publikacji wpisu, podpisany adres obrazka budowany w szablonie strony albo — zupełnie bez kodu — jeden tag og:image, który czyta tytuł każdej strony. 3. Udostępnij link. Obrazek powstaje przy pierwszym zapytaniu i trafia do cache; ten sam tytuł drugi raz nic nie kosztuje. ## Wybierz swój framework Działający kod zgodny z konwencjami danego frameworka — gdzie wstawić wywołanie i na czym ludzie się potykają. - [Obrazki OG w Next.js](https://shareglint.com/pl/og-image-generator/nextjs): Podpisany adres obrazka prosto z generateMetadata — bez żądania przy renderowaniu strony. - [Obrazki OG w Nuxt](https://shareglint.com/pl/og-image-generator/nuxt): useSeoMeta na serwerze, obrazek generowany w useAsyncData. - [Obrazki OG w Astro](https://shareglint.com/pl/og-image-generator/astro): `` w nagłówku, każdy adres podpisany podczas builda. - [Obrazki OG w SvelteKit](https://shareglint.com/pl/og-image-generator/sveltekit): Adres obrazka pobierz w load, wstaw w svelte:head. - [Obrazki OG w WordPress](https://shareglint.com/pl/og-image-generator/wordpress): Wygeneruj obrazek przy publikacji wpisu i zapisz go w meta. - [Obrazki OG w Laravel](https://shareglint.com/pl/og-image-generator/laravel): Trait na modelu, zadanie w kolejce, adres w bazie. - [Obrazki OG w Hugo](https://shareglint.com/pl/og-image-generator/hugo): Jeden partial w nagłówku: auto-OG albo adres podpisany podczas builda. - [Obrazki OG w Ruby on Rails](https://shareglint.com/pl/og-image-generator/rails): Hook after_commit, Active Job, adres zapisany w rekordzie. - [Obrazki OG w Django](https://shareglint.com/pl/og-image-generator/django): Sygnał post_save, transaction.on_commit, adres zapisany przez update(). - [Obrazki OG w Jekyll](https://shareglint.com/pl/og-image-generator/jekyll): Skrypt przed budowaniem wpisuje `image:` do front matter. - [Obrazki OG w Ghost](https://shareglint.com/pl/og-image-generator/ghost): Webhook post.published, obrazek wraca przez Admin API. - [Obrazki OG w Eleventy](https://shareglint.com/pl/og-image-generator/eleventy): Filtr asynchroniczny, który zwraca adres obrazka w szablonie. - [Obrazki OG w Docusaurus](https://shareglint.com/pl/og-image-generator/docusaurus): Wtyczka, która generuje obrazki dla stron dokumentacji. ## Bez kodu: jeden tag na całą stronę Na WordPressie, Shopify, Webflow, Ghoście, Wixie czy Framerze możesz pominąć API: dopuść swoją domenę i wklej jeden tag og:image do szablonu strony. Czytamy tytuł, opis i ikonę każdej podstrony i rysujemy kartę. Fragmenty kodu dla każdej platformy. https://shareglint.com/pl/og-images-without-code ## Sprawdź wygląd przed rejestracją Wklej HTML i CSS do darmowego podglądu HTML na obrazek i zobacz PNG, który zrobi z niego Chrome — bez konta. Albo przejrzyj galerię szablonów: każdy podgląd to prawdziwy render. https://shareglint.com/pl/html-to-image#try ## Ile to kosztuje Free: 100 obrazków miesięcznie, bez karty, z małym znakiem wodnym. Starter: $9 miesięcznie za 2,000 obrazków. Karta, którą już wyrenderowałeś — ten sam szablon, ten sam tytuł — wraca z cache i nie zużywa limitu, więc przebudowa strony nic nie kosztuje. ## Pytania ### Czym jest generator obrazków OG? Narzędziem, które tworzy obrazek Open Graph — grafikę w podglądzie linku — z danych samej strony, takich jak tytuł, autor i data, więc każda strona dostaje własną kartę, a nikt nie musi jej projektować ręcznie. ### Jak generować obrazki OG automatycznie? Renderuj obrazek z szablonu przy każdej publikacji albo wstaw podpisany adres obrazka do tagu og:image, żeby powstał przy pierwszym zapytaniu. W Shareglint oba sposoby to jedno wywołanie HTTP; strony frameworków wyżej pokazują, gdzie je wstawić w 13 frameworkach. ### Czy jest darmowy generator obrazków OG? Plan Free w Shareglint robi 100 obrazków miesięcznie bez karty, z małym znakiem wodnym. Podgląd na stronie HTML na obrazek renderuje twój własny HTML bez zakładania konta. ### Jaki rozmiar powinien mieć wygenerowany obrazek? 1200×630 pikseli, proporcje 1,91:1. Wszystkie wbudowane szablony domyślnie renderują się w tym rozmiarze, a każdy szablon wyrenderujesz w każdym z 6 gotowych rozmiarów (og 1200×630, square 1080×1080, portrait 1080×1350, story 1080×1920, pinterest 1000×1500, youtube 1280×720). ### Czy muszę pisać kod? Nie. Auto OG potrzebuje jednego tagu og:image w szablonie strony i buduje kartę z tytułu i opisu każdej podstrony. Kod daje więcej kontroli: własne pola, rozmiary i formaty. ### Czy mogę użyć własnego projektu? Tak. Wyślij własny HTML i CSS z polami {{ pole }}, złóż go z warstw w edytorze wizualnym albo skopiuj wbudowany szablon i go zmień. ## Przyda się też - [Rozmiar obrazka OG na każdej platformie](https://shareglint.com/pl/og-image-size) - [Sprawdź tagi OG strony (za darmo)](https://shareglint.com/pl/tools/og-checker) - [API HTML na obrazek i podgląd na żywo](https://shareglint.com/pl/html-to-image) - [Najlepsze API do obrazków OG — porównanie](https://shareglint.com/pl/best-og-image-api)