Obrazki Open Graph: dlaczego Twoje linki wyglądają źle po wysłaniu

Problem leży w tagach meta

Wysyłasz link do swojej strony klientowi na WhatsAppie. W wiadomości pojawia się szare pole, adres wyciągnięty ze stopki albo zdjęcie z połowy strony. Sama witryna jest w porządku. Karta podglądu nie.

Tę kartę budują tagi Open Graph. Aplikacja pobiera stronę, czyta zestaw tagów w sekcji head i na tej podstawie tworzy podgląd. Jeśli tagów nie ma, zgaduje. Zgadywanie wygląda na niedopatrzenie.

Open Graph powstał w Facebooku w 2010 roku i dziś jest wspólnym standardem dla Facebooka, LinkedIna, WhatsAppa, Messengera, Slacka, Discorda, iMessage i większości pozostałych. Pełną listę właściwości znajdziesz w specyfikacji protokołu Open Graph.

Cztery tagi, które mają znaczenie

Potrzebujesz czterech, a kreator stron obsłuży je za Ciebie:

• og:title to nagłówek na karcie. Zwykle tytuł strony, czasem krótszy.

• og:description to jedna lub dwie linie pod tytułem. Często to samo co meta description.

• og:image to obrazek. To jego ludzie zauważają.

• og:url to kanoniczny adres strony.

X czyta Open Graph, ale obsługuje też własne tagi twitter:card. Jeśli ustawisz oba zestawy, X użyje tych bardziej szczegółowych. Jeśli ustawisz tylko Open Graph, X z niego skorzysta i zwykle to wystarcza.

Rozmiar obrazka ustaw raz, dobrze

Użyj 1200 x 630 pikseli. To proporcja 1,91:1, której oczekuje duży format karty na każdej większej platformie.

Wytyczne Meta dotyczące obrazków w udostępnianych linkach podają minimum 200 x 200 pikseli, limit pliku 8 MB i rekomendują co najmniej 1200 x 630 dla ekranów o wysokiej rozdzielczości. Poniżej 600 x 315 dostajesz małą kwadratową kartę zamiast szerokiej, którą łatwo przewinąć bez zatrzymania.

Platformy przycinają obrazek i robią to różnie, więc trzymaj ważne elementy dalej od krawędzi. A jeśli dodajesz tekst, ogranicz go do kilku dużych słów. Karty widać najczęściej w rozmiarze miniatury na telefonie.

Dlaczego poprawka nie jest widoczna

Wgrywasz nowy obrazek, publikujesz, wysyłasz link i znowu widzisz stary podgląd. Nic się nie zepsuło. Platforma zapisała kartę w cache.

Każda platforma przechowuje kartę zbudowaną przy pierwszym kontakcie z Twoim adresem. Dopóki cache nie wygaśnie, pokazuje starą wersję, czasem przez kilka dni. Rozwiązaniem jest wymuszenie odświeżenia:

• Facebook i WhatsApp: użyj narzędzia Sharing Debugger od Facebooka i kliknij Scrape Again.

• LinkedIn: wklej adres do LinkedIn Post Inspector.

• X: sprawdź adres w walidatorze kart.

Jeśli platforma uparcie nie odświeża karty, dodanie parametru w adresie, na przykład ?v=2, daje jej adres, którego nigdy nie widziała, więc buduje kartę od zera. Traktuj to jako test, nie jako docelowy link do udostępniania.

Jak to ustawić we Framerze

Framer trzyma te opcje w panelu ustawień strony, nie na kanwie.

1. Otwórz projekt i przejdź do ustawień wybranej strony.

2. Ustaw Title i Page Description. Zasilają zarówno wyniki wyszukiwania, jak i kartę podglądu.

3. Wgraj Social Image w rozmiarze 1200 x 630.

4. Opublikuj, a potem odśwież cache w narzędziach platform.

Ustawienia witryny przechowują wartości domyślne, a ustawienia strony je nadpisują. Ustaw więc sensowny obrazek globalny, a potem nadpisz go na stronach, które mają znaczenie: strona główna, usługi, realizacje. Framer opisuje ten proces w artykule pomocy o tytułach, opisach i obrazkach społecznościowych.

Dla stron CMS podłącz obrazek społecznościowy do pola obrazka w kolekcji. Każdy wpis blogowy czy case study dostanie wtedy własną kartę, zamiast dzielić jedną grafikę ogólną.

Jak to ustawić w Webflow

Webflow ma osobną sekcję Open Graph.

1. Otwórz ustawienia strony i znajdź sekcję Open Graph.

2. Wypełnij Open Graph title i description albo zaznacz opcję użycia tytułu SEO i meta description.

3. Dodaj adres obrazka Open Graph. Najpierw wgraj plik do zasobów i użyj jego linku.

4. Opublikuj, a potem odśwież cache.

Dla stron kolekcji podłącz pola do kolekcji, żeby każdy element generował własną kartę. Webflow opisuje te ustawienia w poradniku o kontrolowaniu udostępnień w social mediach.

Dziesięciominutowa lista kontrolna dla małej witryny

1. Wypisz strony, które faktycznie udostępniasz. W większości firm usługowych to strona główna, dwie lub trzy strony usług, kontakt i to, o czym właśnie piszesz.

2. Zrób jeden szablon 1200 x 630 w Figmie i wyeksportuj wersję na stronę. Duża typografia, spójny układ.

3. Wgraj obrazki, ustaw tytuły i opisy, opublikuj.

4. Przepuść każdy adres przez narzędzia Facebooka i LinkedIna i sprawdź kartę.

5. Na koniec wyślij sobie jeden link na WhatsAppie.