Dlaczego podgląd linku wygląda źle i jak go naprawić za pomocą Open Graph

Udostępniasz link do nowej strony docelowej, a podgląd pokazuje brak zdjęcia, tytuł strony głównej albo baner sprzed dwóch kampanii. Sama strona jest w porządku. Podgląd powstaje z czegoś innego: kilku linijek kodu w sekcji head strony, których większość ludzi nigdy nie widzi.

Ten wpis omawia sześć przyczyn, które stoją za większością zepsutych podglądów, w kolejności, w jakiej warto je sprawdzać. Jeśli chcesz, żeby tagi zostały napisane za Ciebie, bezpłatny generator Open Graph je zbuduje, poprawnie zakoduje znaki i sprawdzi według limitów podanych poniżej.

Jak powstaje podgląd linku

Gdy link zostaje wklejony do posta lub wiadomości, aplikacja wysyła na stronę crawler. Crawler odczytuje tagi <meta> w <head> i na ich podstawie rysuje kartę. Tagi pochodzą z protokołu Open Graph, który wymienia cztery wymagane:

• og:title: tytuł strony w takiej postaci, w jakiej ma pojawić się na karcie.
• og:type: czym jest strona, zwykle website albo article.
• og:image: obraz.
• og:url: kanoniczny adres URL strony, który protokół nazywa jej stałym identyfikatorem.

Dodaj og:description i karta jest gotowa. Pełny, minimalny zestaw wygląda tak:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Przyczyna 1: brakuje tagów

Bez tagów og: każda aplikacja musi sięgnąć po to, co znajdzie na stronie, na przykład <title> albo pierwszy obraz, a wybór zależy od danej aplikacji. Dlatego jeden link może wyglądać dobrze w jednym miejscu, a źle w innym. Naprawa polega na podaniu czterech wymaganych tagów oraz opisu na każdej stronie, którą ludzie będą udostępniać, nie tylko na stronie głównej. Strona produktu udostępniona z tagami strony głównej pokazuje kartę strony głównej.

Przyczyna 2: adres obrazu jest względny

Tego łatwo nie zauważyć, bo strona wygląda dobrze w Twojej przeglądarce. content="/images/og.jpg" działa w przeglądarce, która już jest na Twojej stronie, ale crawler jest spoza niej. Wpisz pełny adres, zaczynający się od https:// i Twojej domeny. To samo dotyczy og:url.

Przyczyna 3: obraz ma złe wymiary lub proporcje

Każda platforma podaje, czego oczekuje, a w przypadku szerokiego obrazu akurat się zgadzają:

• LinkedIn w przewodniku, jak przygotować stronę do udostępniania pisze, że obraz powinien mieć co najmniej 1200 × 627 pikseli, zalecana proporcja to 1.91:1, a rozmiar nie może przekraczać 5 MB.
• Meta w zaleceniach dotyczących udostępniania zaleca obrazy o szerokości co najmniej 1080 pikseli dla ekranów o wysokiej rozdzielczości i co najmniej 600 pikseli szerokości, aby wyświetlać reklamy z linkiem graficznym.
• Duża karta obrazu w X obsługuje proporcję 2:1, od 300 × 157 do 4096 × 4096 pikseli, poniżej 5 MB, w formatach JPG, PNG, WEBP lub GIF, i nie obsługuje SVG, zgodnie z dokumentacją dla deweloperów (oryginalna strona przekierowuje dalej, więc ten link prowadzi przez Internet Archive).

Jeden rozmiar pasuje do wszystkich trzech: 1200 × 630. Spełnia minimum LinkedIn wynoszące 1200 × 627, jest szerszy niż 1080 w Meta, a jego proporcja wynosi 1200 ÷ 630 = 1.905, czyli mieści się w 5% od proporcji 2:1 w X. Kwadratowy lub wysoki obraz zostanie przycięty do szerokiej karty, więc ważną treść trzymaj na środku. Kalkulator proporcji pokaże, co zostaje po przycięciu do środka.

Podaj też rozmiar w tagach. Meta wymaga og:image:width i og:image:height, żeby jej crawler mógł od razu wyrenderować obraz, zamiast najpierw go pobierać i przetwarzać. Jej przewodnik dla webmasterów mówi prosto: podaj wysokość i szerokość, aby obraz wczytał się poprawnie już przy pierwszym udostępnieniu strony.

Przyczyna 4: tagi dodaje JavaScript

Niektórzy kreatorzy stron i aplikacje jednostronicowe dodają tagi meta dopiero po załadowaniu strony, w przeglądarce. Crawler, który czyta HTML wysłany przez Twój serwer, może nigdy nie uruchomić tego kodu, więc nie widzi tagów. Sprawdź kod źródłowy strony (Wyświetl źródło strony, a nie inspektor, który pokazuje stronę po wykonaniu skryptów). Jeśli tagów nie ma w źródle, crawler prawdopodobnie też ich nie zobaczy. Poprawka należy do ustawień Twojej strony albo jej szablonu po stronie serwera.

Przyczyna 5: znaki specjalne zepsuły tag

Tytuł z cudzysłowem, jak The "only" linen you need, przedwcześnie kończy atrybut content="..." i reszta tytułu znika. Znaki ważne wewnątrz atrybutu trzeba zapisać jako kody specjalne: " zamienia się w ", & w &, a < w <. Przeglądarki i crawlery przy odczycie tagu zamieniają je z powrotem na oryginalne znaki. Generator robi to za Ciebie i to jest połowa powodu, żeby z niego korzystać.

Przyczyna 6: aplikacja zapamiętała starą wersję

Poprawiłeś tagi, udostępniłeś ponownie, a stara karta nadal jest. To pamięć podręczna. Aplikacje przechowują to, co zebrały, i ponownie tego używają, a obie duże sieci dają narzędzie, by poprosić o świeże spojrzenie:

• Facebook: wklej adres URL do Sharing Debugger Meta. Według przewodnika dla webmasterów Meta narzędzie pokazuje, jakie tagi zebrał crawler, wraz z błędami i ostrzeżeniami, i uruchamia ponowne pobranie. Zalecenia Meta dodają, że w innym przypadku zebrana treść aktualizuje się w standardowym cyklu 24-godzinnym.
• LinkedIn: przepuść adres URL przez Post Inspector. Z strony pomocy LinkedIn jasno wynika ograniczenie: odświeżenie zmienia podgląd tylko w nowych postach. Posty, które już zawierają ten adres, zachowują stary podgląd.

Tę uwagę o LinkedIn warto zapamiętać przed startem. Sprawdź podgląd przed wysłaniem pierwszego posta, bo starego posta nie naprawisz, poprawiając stronę.

Tag twitter:card: jedna linia, a nie cztery

X też czyta Open Graph. Jego dokumentacja markupu kart podaje zapasową wartość dla każdego tagu: twitter:title przechodzi na og:title, twitter:description na og:description, twitter:image na og:image, a twitter:image:alt na og:image:alt. Nie musisz więc powtarzać wszystkiego. Jedyna linia do dodania to twitter:card: summary_large_image dla pełnoszerokościowego obrazu albo summary dla małego kwadratu. Jeśli ją pominiesz, ta sama dokumentacja mówi, że X może pokazać mniejszą kartę podsumowania, dlatego duży obraz czasem pojawia się jako miniatura. Ta sama dokumentacja ogranicza tytuł do 70 znaków, opis do 200, a tekst alternatywny do 420.

Pięciominutowe sprawdzenie przed startem

1. Wyświetl źródło strony i znajdź tagi og:. Wszystkie cztery wymagane, plus opis.
2. Sprawdź, czy og:image i og:url zaczynają się od https://.
3. Otwórz sam adres obrazu w przeglądarce. Powinien się wczytać, w rozmiarze 1200 × 630 albo zbliżonym.
4. Wklej adres do Sharing Debugger i Post Inspector i sprawdź karty.
5. Dopiero wtedy go udostępnij.

Gdzie pasuje Hermoso

Hermoso to agent marketingowy oparty na AI: analizuje reklamy, które już działają na Twoim rynku, tworzy reklamy graficzne i wideo zgodne z marką, planuje posty na Twoich własnych kontach i prowadzi płatne kampanie na Twoich kontach reklamowych. Dobry podgląd linku sprawia, że te posty warto kliknąć. Hermoso działa w aplikacji webowej albo wewnątrz Claude, ChatGPT i Cursor przez swój serwer MCP.

Często zadawane pytania

Dlaczego mój link nie pokazuje obrazka na Facebooku ani LinkedIn?

Zwykle brakuje tagu og:image, używa on ścieżki względnej zamiast pełnego adresu https://, albo wskazuje zbyt mały obraz. LinkedIn wymaga co najmniej 1200 × 627 pikseli. Po naprawie przepuść adres przez Sharing Debugger Meta lub Post Inspector LinkedIn, żeby ponownie go pobrały.

Jakie wymiary powinien mieć obraz Open Graph?

1200 × 630 pikseli sprawdza się w największych sieciach. Spełnia minimum LinkedIn 1200 × 627 przy proporcji około 1.91:1, jest szerszy niż 1080 pikseli zalecane przez Meta i jest blisko proporcji 2:1, którą X obsługuje w dużych kartach obrazu.

Jak zaktualizować podgląd linku w LinkedIn?

Popraw tagi na stronie, a potem wpisz adres w Post Inspector LinkedIn. Odświeżony podgląd dotyczy tylko nowych postów. Posty, które już zawierają ten adres, zachowują stary podgląd.

Czy potrzebuję tagów twitter:, jeśli mam tagi og:?

Tylko twitter:card. Gdy wersji twitter: brakuje, X przechodzi na og:title, og:description, og:image i og:image:alt.