Generator obrazów OG — kreator obrazów udostępnianych w mediach społecznościowych

Obraz Open Graph to obraz, który pojawia się, gdy link zostanie wklejony na czacie, w tweecie lub kanale Slack — a każda platforma, która to renderuje, oczekuje płótna o wymiarach około 1200 × 630 pikseli, czyli rozmiarze kart og:image na Facebooku i na Twitterze podsumowania_large_image. Jeśli źle dobierzesz rozmiar, obraz będzie przycięty, rozmazany lub ściśnięty; jeśli źle ułożysz układ, tytuł będzie brzmieć jak nieczytelny fragment na tle zajętego zdjęcia. To narzędzie komponuje obraz w rzeczywistej docelowej rozdzielczości przy użyciu interfejsu API Canvas 2D, więc na podglądzie widzisz dokładną siatkę pikseli dostarczoną w pliku PNG.

Wybierz tło — płaski kolor, dwustopniowy gradient liniowy zbudowany z dwóch wybranych kolorów lub przesłane zdjęcie, które zostanie przycięte tak, aby wypełniło całą klatkę o wymiarach 1200 × 630 w taki sam sposób, jak rozmiar tła CSS: okładka, a nie nieproporcjonalnie rozciągnięta. Wpisz tytuł i opcjonalny podtytuł: oba są mierzone znak po znaku w oparciu o metryki czcionek obszaru roboczego, więc nagłówek, który jest zbyt długi, aby zmieścił się w jednym wierszu, zawija się w drugim lub trzecim wierszu na granicy rzeczywistego słowa, zamiast wylewać się z krawędzi lub niewidocznie obcinać. Wybierz wyrównanie do środka lub do lewej, wybierz kolor tekstu pasujący do tła i upuść opcjonalne logo w rogu o stałym, czytelnym rozmiarze.

Poniżej płótna znajdują się cztery małe karty przybliżające wygląd gotowego obrazu po owinięciu go przez prawdziwą platformę we własny chrom: 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 żadnego opisu, a osadzenie Discorda umieszcza domenę, tytuł i opis nad obrazem we własnym ciemnym motywie. Są to przybliżone stylizacje na potrzeby planowania — wyraźnie oznaczone jako ilustracyjne, z linią domeny, którą sam wpisujesz — a nie pobieranie na żywo ani zrzut ekranu rzeczywistych platform, ponieważ udostępnienie linku i umożliwienie robotowi indeksującemu każdej platformy odczytanie prawdziwych metatagów og:image i og:title Twojej strony jest tym, co w rzeczywistości tworzy aktywną 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 plik PNG canvas.toBlob() zawierający tylko to, co skomponowałeś — żadne obramowania makiet, fałszywe paski przeglądarki ani logo platformy nie są zapisywane w pobranym obrazie. Jeśli później zajdzie potrzeba zmiany rozmiaru lub konwersji wyeksportowanego pliku PNG, dostępne w tej witrynie narzędzia do zmiany rozmiaru obrazu i konwertera obrazów będą działać dokładnie tam, gdzie kończy się to narzędzie.