Generator obrazków OG
Obrazek Open Graph 1200 × 630, PNG lub JPG, bez znaku wodnego
- Darmowe
- Bez zakładania konta
Obrazek rysuje Twoja przeglądarka. Tekst, logo i zdjęcie nie są nigdzie wysyłane.
Treść i wygląd
Meta tagi do <head>
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og-image.png">Wgraj pobrany plik na swój serwer, wpisz jego adres powyżej i wklej tagi do sekcji <head> strony. Pełny zestaw Open Graph sprawdzisz w narzędziu Kontrola Open Graph.
Generator obrazków OG tworzy obrazek 1200 × 630 pikseli, który serwisy społecznościowe i komunikatory pokazują przy udostępnionym linku. Wpisz tytuł, dodaj logo albo zdjęcie w tle, wybierz kolory i pobierz PNG lub JPG. Narzędzie podaje też meta tagi og:image i twitter:card do wklejenia w <head>. Obrazek powstaje w przeglądarce, a ani tekst, ani wgrane pliki nie trafiają na nasz serwer.
Dlaczego karta nie pokazuje obrazka?
Rozmiar ma znaczenie, ale nie jest jedyną przyczyną. Meta zaleca obrazek co najmniej 1200 × 630 pikseli, możliwie blisko proporcji 1.91:1, i plik nie większy niż 8 MB. Mniejsze niż 600 × 315 wyświetli się jako mała miniatura.
Najczęstszy powód braku obrazka to adres. og:image musi być pełnym adresem, najlepiej https, dostępnym bez logowania. Ścieżka względna, adres http albo plik wymagający logowania kończą się kartą bez grafiki.
Każdy serwis kadruje inaczej. Dlatego tekst i logo trzymamy w marginesie 80 pikseli, a obszar bezpieczny pokazuje też środkowy kwadrat, czyli to, co zostaje przy kadrowaniu do 1:1.
Serwisy zapamiętują pobraną kartę. Po zmianie obrazka nowa wersja może pojawić się dopiero po odświeżeniu w debuggerze danego serwisu albo po zmianie adresu pliku.
Jeden szablon na typ strony
Zamiast projektować każdą kartę osobno, ustal wygląd dla typu strony: artykułu, produktu, narzędzia. Zmieniaj tylko tytuł. Krótszy tytuł na karcie działa lepiej niż pełny title strony: to, co przeczyta się w sekundę w strumieniu, a nie w wynikach wyszukiwania.
Meta for Developers, Images in link sharesJak zrobić obrazek Open Graph (og:image) do udostępniania linków
Obrazek OG projektujesz w rozmiarze 1200 × 630 px, publikujesz pod pełnym adresem https i wskazujesz go w tagu og:image. Pięć kroków prowadzi od tytułu do karty, którą widać po udostępnieniu linku.
-
Wpisz krótki tytuł karty
Tytuł na obrazku nie musi powtarzać title strony. Wystarczy kilka słów, które da się przeczytać w sekundę w strumieniu, a pełny tytuł i tak pokaże się pod obrazkiem z og:title.
-
Wybierz szablon, kolory i logo
Szablon Jednolity albo Gradient pasuje do samego tekstu, Zdjęcie do karty z fotografią w tle. Jeśli tekst za słabo odcina się od tła, generator pokaże ostrzeżenie o kontraście.
-
Pokaż obszar bezpieczny i sprawdź kadrowanie
Opcja Pokaż obszar bezpieczny zaznacza margines 80 px i środkowy kwadrat, który zostaje po kadrze 1:1. Logo i najważniejsze słowa trzymaj w tym kwadracie, bo część serwisów przycina obrazek.
-
Pobierz plik i wgraj go na serwer
Pobierz PNG albo JPG. Generator rysuje obrazek w przeglądarce, więc tekst, logo i zdjęcie nie trafiają na nasz serwer. Plik wgrywasz sam, najlepiej pod adres z nazwą strony albo numerem wersji.
-
Wklej tagi do head i sprawdź kartę
Wpisz adres, pod którym opublikujesz plik, i uzupełnij tekst alternatywny. Skopiuj tagi og:image i twitter:card do sekcji head, a potem sprawdź stronę narzędziem Kontrola Open Graph albo w debuggerze serwisu.
Przykłady tagów og:image i ich błędów
Kod, który najczęściej decyduje o tym, czy karta ma obrazek.
<meta property="og:image" content="/img/og.png"><meta property="og:image"
content="https://example.com/img/og-cennik-v2.png">Protokół Open Graph opisuje og:image jako adres URL obrazka, a względna ścieżka często kończy się kartą bez obrazka. Numer wersji w nazwie pliku ułatwia też podmianę obrazka w pamięci podręcznej serwisów.
<meta property="og:image" content="https://example.com/img/og-cennik-v2.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Cennik planów na tle z logo firmy">
<meta name="twitter:card" content="summary_large_image">Według Meta wymiary w tagach pozwalają crawlerowi wyświetlić obrazek od razu, bez wcześniejszego pobierania i przetwarzania pliku.
obrazek: 1200 × 630 px (proporcja około 1,905:1)
kwadrat na środku: 630 × 630 px
od x = 285 px do x = 915 pxTyle zostaje, gdy serwis przytnie kartę do 1:1. Logo i tytuł postaw w tym obszarze.
Najczęstsze błędy przy obrazkach Open Graph
-
Obrazek za logowaniem albo pod adresem http
Crawler serwisu społecznościowego pobiera plik jak anonimowy gość. Jeśli plik wymaga logowania, jest zablokowany albo podany przez http, karta zwykle pokazuje się bez obrazka.
-
Za mały obrazek
Według Meta obrazek mniejszy niż 600 × 315 px wyświetla się jako mała miniatura obok tekstu. LinkedIn pokazuje miniaturę, gdy obrazek ma mniej niż 401 px szerokości.
-
Tekst przy samej krawędzi
Każdy serwis kadruje kartę po swojemu, a część komunikatorów pokazuje mniejszy wycinek. Tekst w odległości kilku pikseli od krawędzi bywa wtedy ucięty, dlatego generator trzyma margines 80 px.
-
Jeden obrazek dla całej strony
Ta sama grafika przy artykule, cenniku i narzędziu wygląda wszędzie tak samo, więc odbiorca nie odróżni linków. Szablon na typ strony z innym tytułem daje lepszą kartę bez dodatkowej pracy.
-
Brak og:image:alt
Bez tego tagu obrazek na karcie nie ma opisu tekstowego. Generator ma na niego osobne pole. Specyfikacja Open Graph definiuje og:image:alt jako opis tego, co widać na obrazku.
Wymiary i wymagania obrazków Open Graph
| Wartość | Co oznacza | Źródło |
|---|---|---|
| 1200 × 630 px | Rozmiar, który Meta zaleca, żeby obrazek dobrze wyglądał na ekranach o wysokiej rozdzielczości, przy proporcji jak najbliższej 1,91:1. | Meta for Developers, Images in link shares |
| 600 × 315 px | Minimum według Meta, od którego link wyświetla się z dużym obrazkiem. Mniejsze obrazki pokazują się znacznie mniejsze. | Meta for Developers, Images in link shares |
| 8 MB | Maksymalny rozmiar pliku obrazka OG według Meta. | Meta for Developers, Images in link shares |
| 1200 × 627 px | Minimalne wymiary obrazka podglądu linku według LinkedIn, przy zalecanej proporcji 1,91:1 i pliku do 5 MB. | LinkedIn Help, link previews |
| 4 | Tyle właściwości jest wymaganych przez protokół Open Graph: og:title, og:type, og:image i og:url. | The Open Graph protocol |
Źródła sprawdzone:
Cztery zasady
- 1.911200 × 630
- Zalecany rozmiar i proporcje obrazka udostępnianego linku.
- httpsPełny adres
- og:image podaj jako bezwzględny adres https, nie ścieżkę względną.
- 80Margines
- Tekst i logo z dala od krawędzi, bo serwisy przycinają kadr.
- 8 MBLimit pliku
- Górna granica Meta. Dla szybkości trzymaj plik dużo mniejszy.
Meta zaleca co najmniej 1200 × 630 pikseli i proporcje możliwie bliskie 1.91:1, żeby obrazek wyświetlał się w całości bez przycinania. Minimum dla dużej karty to 600 × 315 pikseli, a plik nie może przekraczać 8 MB. Ten generator tworzy obrazek dokładnie 1200 × 630.
Wgraj plik na serwer, a w sekcji <head> strony dodaj <meta property="og:image" content="https://twoja-domena/ścieżka/obrazek.png">. Warto dodać też og:image:width, og:image:height, og:image:alt oraz twitter:card z wartością summary_large_image. Gotowy zestaw tagów generator podaje pod podglądem.
PNG zachowuje ostre krawędzie tekstu i logo, więc zwykle jest lepszy dla kart z samym tekstem na jednolitym tle. JPG daje mniejszy plik przy zdjęciach w tle. Oba formaty są obsługiwane przez serwisy społecznościowe.
Serwisy zapamiętują raz pobraną kartę. Wymuś odświeżenie w debuggerze danego serwisu albo opublikuj nowy plik pod innym adresem, na przykład z numerem wersji w nazwie.
Zwykle nie. Jeśli brakuje twitter:image, X używa og:image. Znacznik twitter:card z wartością summary_large_image mówi, żeby pokazać dużą kartę z obrazkiem zamiast małej miniatury.
Nie. Obrazek rysuje przeglądarka na elemencie canvas. Tekst, logo i zdjęcie zostają na Twoim urządzeniu, a pobrany plik zapisujesz sam.
Protokół Open Graph wymaga czterech właściwości: og:title, og:type, og:image i og:url. Do obrazka dodaj też og:image:width, og:image:height i og:image:alt, a dla X tag twitter:card.
LinkedIn nie potrzebuje osobnego obrazka, bo jego wymagania pokrywają się z zaleceniami Meta. LinkedIn podaje minimum 1200 × 627 px i proporcję 1,91:1, a plik 1200 × 630 px z tego generatora spełnia oba warunki, o ile waży mniej niż 5 MB.
Tag og:image:alt opisuje, co widać na obrazku, bo tak definiuje go specyfikacja Open Graph. Jeśli obrazek to sam tytuł na tle, wpisz ten tytuł i nazwę marki, na przykład tytuł artykułu i logo firmy.
Co jeszcze może Ci się przydać
Plik albo kod gotowy? Po wdrożeniu sprawdź wynik na stronie
Indeksowalność, metadane i struktura z priorytetami i raportem dla klienta.