Generator obrazów OG: obraz 1200 x 630 do udostępniania w przeglądarce | We.Inc
Zaprojektuj obraz, który pojawia się przy udostępnianiu Twojej strony. Wybierz szablon, dodaj tytuł, logo i kolory, sprawdź podgląd karty w X, LinkedIn, Slack i iMessage, a potem pobierz PNG 1200 na 630 i znaczniki meta.
Standardowy rozmiar obrazu Open Graph to 1200 na 630 pikseli, czyli proporcje 1,91 do 1, które dobrze wyświetlają Facebook, LinkedIn, X, Slack i komunikatory. Wybierz poniżej szablon, wpisz tytuł, dodaj logo i kolory marki, sprawdź podglądy, a następnie pobierz PNG i skopiuj znaczniki meta og:image.
Rozmiary obrazów do udostępniania według platformy
Platforma
Czego wymaga
Uwagi
Facebook i inne aplikacje Meta
1200 na 630 dla najlepszych efektów; co najmniej 600 na 315
Proporcje 1.91:1; małe obrazy wyświetlają się jako miniatura
Duża karta X (Twitter)
Proporcje 2:1; od 300 na 157 do 4096 na 4096; poniżej 5 MB
Wymaga ustawienia twitter:card na summary_large_image
LinkedIn
1200 na 627
Użyj Post Inspector, aby odświeżyć obraz z pamięci podręcznej
Slack, Discord, iMessage, WhatsApp
Brak opublikowanego rozmiaru
Odczytują og:image; 1200 na 630 dobrze wygląda w każdym z nich
Cztery szablony rysowane na canvasie w Twojej przeglądarce w rozmiarze dokładnie 1200 na 630. Twoje logo nigdy nie opuszcza Twojego urządzenia. Podglądy pokazują w przybliżeniu, jak każda aplikacja przycina obraz, a blok znaczników meta jest gotowy do wklejenia w sekcji head strony.
Wybierz szablon: wyrazisty nagłówek, wyśrodkowany, podzielony z logo albo karta artykułu.
Wpisz tytuł i krótką linijkę pod nim oraz nazwę witryny lub URL widoczny na dole.
Wybierz kolor tła, tekstu i akcentu, a jeśli chcesz, prześlij logo (najlepiej sprawdza się PNG lub SVG z przezroczystym tłem).
Sprawdź podglądy, pobierz PNG, prześlij go na swoją stronę i wklej znaczniki meta z jego pełnym adresem URL.
Tytuł powinien mieć mniej niż około 60 znaków i co najmniej 48 pikseli wysokości na obrazie, bo większość osób widzi kartę w ułamku jej rzeczywistego rozmiaru.
Zostaw margines wokół ważnego tekstu. Niektóre aplikacje przycinają krawędzie lub zaokrąglają rogi.
W og:image używaj bezwzględnego adresu https. Ścieżki względne nie działają w większości crawlerów.
Platformy przechowują obrazy w pamięci podręcznej. Po zmianie obrazu odśwież go narzędziem do debugowania każdej platformy albo nadaj plikowi nową nazwę.
Najczęściej zadawane pytania
Jaki jest najlepszy rozmiar obrazu OG?
1200 na 630 pikseli. Spełnia zalecenie Meta dla ekranów o wysokiej rozdzielczości, jest bliski rozmiarowi 1200 na 627 z LinkedIn i działa w dużej karcie obrazu X, więc jeden plik wystarcza wszędzie. Zapisz go jako PNG przy projektach z dużą ilością tekstu lub jako JPG przy zdjęciach i trzymaj rozmiar wyraźnie poniżej 5 MB.
Czy potrzebuję osobnego obrazu dla karty Twittera?
Zwykle nie. X korzysta z og:image, gdy brakuje twitter:image. Potrzebujesz jednak znacznika meta twitter:card ustawionego na summary_large_image, aby zamiast małej miniatury pojawił się duży podgląd.
Dlaczego nadal widać mój stary obraz?
Każda platforma przechowuje podgląd w pamięci podręcznej. Użyj Sharing Debugger od Meta, Post Inspector od LinkedIn albo po prostu nowej nazwy pliku obrazu, aby wymusić ponowne pobranie. Slack i komunikatory odświeżają podgląd według własnego harmonogramu.
Czy mogę automatycznie tworzyć jeden obraz na każdą stronę?
Tak, za pomocą renderera obrazów po stronie serwera, który buduje obraz z tytułu każdej strony. To narzędzie służy do projektowania szablonu i tworzenia starannie dobranych obrazów dla ważnych stron.
Co sprawia, że obraz do udostępniania przyciąga kliknięcia
Karta udostępnienia konkuruje w małym rozmiarze ze wszystkim innym w feedzie. Krótki, duży tytuł i jeden mocny element wizualny wygrywają z zatłoczonym układem. Traktuj obraz jako partnera nagłówka, a nie drugą kopię strony.
Spójność marki pomaga ludziom z czasem rozpoznawać Twoje linki. Używaj tego samego szablonu z innym tytułem dla każdej strony, zamiast projektować każdy obraz od zera.
Jak sprawdzić, czy zadziałało
Po publikacji wklej adres strony do naszego narzędzia podglądu Open Graph, aby zobaczyć znaczniki, które strona faktycznie zwraca, a przed dużą premierą także do debuggera każdej platformy.