Generator obrazów OG — kreator obrazów do mediów społecznościowych

Obraz Open Graph to zdjęcie, które pojawia się po wklejeniu linku do czatu, tweeta lub kanału Slack — a każda platforma, która go renderuje, oczekuje canvasu o rozmiarze w przybliżeniu 1200×630 pikseli, czyli rozmiaru, dla którego zaprojektowano karty og:image Facebooka i summary_large_image Twittera. Źle dobrany rozmiar sprawia, że obraz jest przycinany, rozmyty lub ściśnięty; źle dobrany układ sprawia, że tytuł jest nieczytelnym paskiem na tle ruchliwego zdjęcia. To narzędzie tworzy obraz w docelowej rozdzielczości przy użyciu Canvas 2D API, więc to, co widzisz w podglądzie, to dokładnie ta siatka pikseli, która trafi do pliku PNG.

Wybierz tło — jednolity kolor, dwupunktowy gradient liniowy zbudowany z dwóch wybranych kolorów lub przesłane zdjęcie, które zostanie przycięte tak, aby wypełnić cały kadr 1200×630 w sposób podobny do CSS background-size: cover, zamiast być rozciągane nieproporcjonalnie. Wpisz tytuł i opcjonalny podtytuł: oba są mierzone znak po znaku przy użyciu metryk czcionek canvasu, więc nagłówek zbyt długi, by zmieścić się w jednej linii, zawija się do drugiej lub trzeciej linii na prawdziwym słowie, zamiast wychodzić poza krawędź lub być niewidocznie obcinany. Wybierz wyrównanie do środka lub do lewej, wybierz kolor tekstu czytelny na tle i opcjonalnie umieść logo w rogu o stałym, czytelnym rozmiarze.

Pod canvasem cztery małe karty pokazują w przybliżeniu, jak gotowy obraz wygląda po oprawieniu przez prawdziwą platformę w jej własne elementy: karta Twittera/X pokazuje tylko domenę i pogrubiony tytuł pod obrazem bez linii opisu, Facebook dodaje pasek domeny zapisany wielkimi literami nad blokiem tytułu i opisu, LinkedIn umieszcza domenę pod tytułem bez opisu, a embed Discorda umieszcza domenę, tytuł i opis nad obrazem w swoim ciemnym motywie. Są to stylizowane przybliżenia do celów planowania — wyraźnie oznaczone jako ilustracyjne, z ręcznie wpisaną linią domeny — a nie rzeczywiste pobranie lub zrzut ekranu platform, ponieważ to udostępnienie linku i umożliwienie crawlerowi każdej platformy odczytania prawdziwych znaczników og:image i og:title na stronie tworzy rzeczywistą kartę.

Wszystko jest renderowane lokalnie na elemencie HTML canvas w przeglądarce: tytuł, podtytuł, przesłane tło i logo nigdy nie opuszczają urządzenia, a wyeksportowany plik to czysty PNG z canvas.toBlob() zawierający tylko to, co skomponowałeś — żadne ramki makiet, sztuczne paski przeglądarki ani loga platform nie są zapisywane w pobranym obrazie. Jeśli po wyeksportowaniu potrzebujesz również zmienić rozmiar lub przekonwertować plik PNG, inne narzędzia na tej stronie — do zmiany rozmiaru i konwersji obrazów — mogą kontynuować pracę w miejscu, w którym to narzędzie kończy.