Jaki jest rozmiar wygenerowanego obrazu?

Zawsze 1200x630 pikseli, standardowe proporcje Open Graph i Twitter summary-large-image (około 1,91:1). Ten rozmiar wyświetla się ostro w podglądach linków na Facebooku, X/Twitterze, LinkedIn, Slacku i Discordzie.

Jak dodać własne logo?

Wklej bezpośredni adres URL obrazu logo w polu Adres URL logo. Obraz jest pobierany z tego adresu i rysowany nad tekstem o stałej wysokości z zachowaniem proporcji. Źródło musi zezwalać na użycie międzydomenowe (CORS), w przeciwnym razie przeglądarka zablokuje jego rysowanie na płótnie.

Czy mogę kontrolować kolory i układ?

Tak. W Ustawieniach możesz przełączać się między jednolitym tłem a dwukolorowym ukośnym gradientem, ustawić kolor(y) tła i kolor tekstu oraz wybrać wyrównanie do lewej lub do środka. Tytuł i podtytuł zawijają się automatycznie, a długi tekst jest skracany wielokropkiem.

Czy mój tekst lub obraz jest gdzieś przesyłany?

Nie. Karta jest rysowana w całości na płótnie HTML w Twojej przeglądarce i eksportowana do PNG lokalnie. Twój tytuł, podtytuł i kolory nigdy nie są wysyłane na serwer. Pobierany jest tylko podany przez Ciebie adres URL logo, a to żądanie trafia bezpośrednio z Twojej przeglądarki do wybranego przez Ciebie hosta.

Generator obrazów OG

Wpisz tytuł i podtytuł, wybierz jednolite lub gradientowe tło oraz opcjonalny adres URL logo, podejrzyj na żywo kartę społecznościową 1200x630 i pobierz ją jako PNG.

Ładowanie narzędzia…

Generator obrazów OG — Utwórz obraz Open Graph 1200x630, który pojawia się, gdy Twoja strona jest udostępniana na Facebooku, X/Twitterze, LinkedIn lub Slacku. Wpisz tytuł i podtytuł, wybierz jednolite tło lub dwukolorowy gradient, ustaw kolor i wyrównanie tekstu oraz opcjonalnie wskaż adres URL logo. Podgląd na żywo jest przerysowywany podczas pisania, a gotową kartę możesz pobrać jako PNG. Obraz jest rysowany w całości na płótnie (canvas) w Twojej przeglądarce, więc Twój tekst i kolory nigdy nie opuszczają Twojego urządzenia.

Czym jest Generator obrazów OG?

Generator obrazów OG to darmowe narzędzie działające w przeglądarce do tworzenia kart udostępniania społecznościowego (obrazów Open Graph / Twitter Card) w standardowym rozmiarze 1200x630 pikseli. Marketerzy, blogerzy, niezależni deweloperzy i każdy, kto publikuje stronę docelową, używają go do stworzenia czytelnej miniatury podglądu bez otwierania aplikacji do projektowania. Wpisujesz nagłówek i opcjonalny podnagłówek, wybierasz jednolity kolor lub ukośny gradient, ustawiasz kolor tekstu oraz wyrównanie do lewej lub do środka i wklejasz adres URL logo, jeśli chcesz mieć znak marki w rogu. Płótno jest przerysowywane na żywo, dzięki czemu możesz dopracować treść i kolory, a następnie wyeksportować plik PNG gotowy do użycia w znaczniku meta og:image.

Jak używać Generator obrazów OG

Wpisz tytuł w polu Tytuł; jest rysowany dużą i pogrubioną czcionką i zawija się na maksymalnie trzy wiersze.
Dodaj opcjonalny podtytuł pod tytułem lub pozostaw go pustym, aby pokazać tylko nagłówek.
Otwórz Ustawienia, aby wybrać jednolite lub gradientowe tło, ustawić kolory tła i tekstu oraz wybrać wyrównanie do lewej lub do środka.
Opcjonalnie wklej adres URL obrazu logo (obraz z włączonym CORS), aby umieścić logo nad tekstem.
Obserwuj, jak podgląd 1200x630 aktualizuje się na żywo, kliknij go, aby powiększyć, a następnie pobierz kartę jako PNG.

Przykłady

Karta udostępniania wpisu na blogu

Wpisz nagłówek artykułu jako tytuł, a autora lub nazwę witryny jako podtytuł, wybierz gradient pasujący do Twojej marki i pobierz plik PNG 1200x630, aby użyć go jako og:image wpisu.

Baner premiery produktu

Użyj jednolitego koloru marki, wyrównania do środka, swojego hasła jako tytułu i adresu URL logo w rogu, aby stworzyć spójną kartę premierową dla każdego kanału społecznościowego.

Najczęściej zadawane pytania

Jaki jest rozmiar wygenerowanego obrazu?: Zawsze 1200x630 pikseli, standardowe proporcje Open Graph i Twitter summary-large-image (około 1,91:1). Ten rozmiar wyświetla się ostro w podglądach linków na Facebooku, X/Twitterze, LinkedIn, Slacku i Discordzie.
Jak dodać własne logo?: Wklej bezpośredni adres URL obrazu logo w polu Adres URL logo. Obraz jest pobierany z tego adresu i rysowany nad tekstem o stałej wysokości z zachowaniem proporcji. Źródło musi zezwalać na użycie międzydomenowe (CORS), w przeciwnym razie przeglądarka zablokuje jego rysowanie na płótnie.
Czy mogę kontrolować kolory i układ?: Tak. W Ustawieniach możesz przełączać się między jednolitym tłem a dwukolorowym ukośnym gradientem, ustawić kolor(y) tła i kolor tekstu oraz wybrać wyrównanie do lewej lub do środka. Tytuł i podtytuł zawijają się automatycznie, a długi tekst jest skracany wielokropkiem.
Czy mój tekst lub obraz jest gdzieś przesyłany?: Nie. Karta jest rysowana w całości na płótnie HTML w Twojej przeglądarce i eksportowana do PNG lokalnie. Twój tytuł, podtytuł i kolory nigdy nie są wysyłane na serwer. Pobierany jest tylko podany przez Ciebie adres URL logo, a to żądanie trafia bezpośrednio z Twojej przeglądarki do wybranego przez Ciebie hosta.

Powiązane narzędzia

Kod na obraz

Zamień fragment kodu na obraz z podświetlaniem składni w przeglądarce — z ponad 20 językami, własnymi motywami i tłami, numerami wierszy oraz eksportem PNG lub SVG.

Sprawdzanie kontrastu kolorów

Sprawdź kontrast WCAG 2.1 i wynik APCA Lc między kolorem tekstu a tłem, zobacz plakietki AA, AAA i 3:1 oraz zastosuj najbliższy zaliczony kolor.

Mikser kolorów

Zmieszaj dwa kolory HEX w wybranej proporcji w przestrzeni RGB lub Lab i odczytaj powstały kolor pośredni jako próbkę oraz kopiowalną wartość HEX.

Generator odcieni koloru

Zamień jeden bazowy kolor HEX w skalę OKLCH, HSL lub RGB z regulowaną liczbą stopni, wskazówkami kontrastu WCAG na stopień oraz eksportem do CSS, Tailwind i JSON.