Znasz to uczucie. Udostępniasz link do swojego sklepu lub produktu na Facebooku i zamiast ładnego zdjęcia widzisz szary prostokąt, losowe logo albo zdjęcie kompletnie nie związane z tym, co chciałeś pokazać. Tytuł ucięty w połowie, opis z przypadkowego fragmentu tekstu, a całość sprawia wrażenie jakby strona nie istniała.
To nie jest wina Facebooka. Przynajmniej nie do końca. I jest na to proste narzędzie.
Jak Facebook czyta Twoją stronę
Kiedy ktoś wkleja link w poście, Facebook wysyła swojego „robota”, który odwiedza stronę i szuka specjalnych tagów ukrytych w sekcji <head> kodu HTML. Nazywają się tagami Open Graph (OG) i to właśnie z nich Facebook bierze tytuł, opis i zdjęcie do podglądu linka.
Jeśli tych tagów nie ma, są źle skonfigurowane albo mają złe wymiary – podgląd wychodzi losowo lub w ogóle się nie wyświetla. I nie dowiesz się o tym, dopóki ktoś nie wklei Twojego linka w poście.
Meta Sharing Debugger – narzędzie, które powinieneś znać
Pod adresem developers.facebook.com/tools/debug znajdziesz bezpłatne narzędzie od Mety, które robi dokładnie to co potrzeba: pokazuje, co Facebook „widzi” kiedy ktoś udostępnia link do Twojej strony.
Żeby skorzystać: zaloguj się kontem Facebook, wklej URL strony, którą chcesz sprawdzić, i kliknij „Debuguj”. W kilka sekund zobaczysz:
- jakie tagi Open Graph są zdefiniowane na tej stronie (i czy w ogóle są),
- czy Facebook znalazł zdjęcie i jakie,
- ostrzeżenia i błędy do poprawienia,
- podgląd tego, jak będzie wyglądał post po udostępnieniu linka.
Jest też jedna funkcja, o której większość właścicieli stron nie wie: przycisk „Scrape Again” (Wyczyść pamięć podręczną). Facebook zapamiętuje podgląd linku i nie aktualizuje go automatycznie – nawet jeśli właśnie zmieniłeś zdjęcie czy opis na stronie. Bez ręcznego odświeżenia przez Debugger możesz przez kilka dni wyświetlać klientom stare, nieaktualne informacje. Zawsze klikaj „Scrape Again” po każdej zmianie.
Przykład z życia: sklep gadzety-reklamowe.com
Weźmy konkretny przykład. Strona produktowa kubka podróżnego Tana (P437.1019) zawiera kilkanaście ładnych zdjęć produktu ładowanych przez JavaScript z zewnętrznego API. I tu jest problem: Facebook przy odwiedzaniu strony nie uruchamia JavaScriptu. Widzi tylko surowy HTML.
Jeśli w kodzie <head> nie ma jawnie wpisanego tagu og:image z bezpośrednim adresem zdjęcia – Facebook nie wie, które zdjęcie wybrać. Podgląd linka wychodzi bez obrazka albo z przypadkową grafiką z nagłówka strony. Świetne zdjęcia produktów, które w mediach społecznościowych w ogóle się nie pojawiają.
Jakie tagi Open Graph musi mieć każda strona
Minimalny zestaw tagów, który powinien znaleźć się w <head> każdej podstrony:
<!-- Tytuł wyświetlany w podglądzie linka -->
<meta property="og:title" content="Kubek podróżny Tana 750 ml z recyklingu – gadżet z nadrukiem">
<!-- Krótki opis (150–300 znaków) -->
<meta property="og:description" content="Ekologiczny kubek podróżny 750 ml z plastiku z recyklingu. Duża powierzchnia nadruku, praktyczny uchwyt. Idealny gadżet reklamowy z logo Twojej firmy.">
<!-- Zdjęcie do podglądu – bezwzględny URL, proporcje 1200x630 px -->
<meta property="og:image" content="https://api.reklamowe24.pl/media/cache/large/common/image/products/P437.1019_r24.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Kubek podróżny Tana 750 ml z nadrukiem z logo firmy">
<!-- Kanoniczny URL tej podstrony -->
<meta property="og:url" content="https://gadzety-reklamowe.com/p/P437.1019/Kubek-podrozny-900-ml-Tana-plastik-z-recyklingu/335070">
<!-- Typ strony -->
<meta property="og:type" content="website">Kilka zasad, które warto zapamiętać:
URL zdjęcia musi być bezwzględny – zaczyna się od https://, nie od /images/.... Podanie szerokości i wysokości (og:image:width, og:image:height) eliminuje jeden z najczęstszych powodów ostrzeżeń w Debuggerze. og:image:alt to dobra praktyka dostępności, którą Facebook coraz mocniej promuje.
Wymiary zdjęcia – to ważniejsze niż myślisz
Facebook najlepiej wyświetla zdjęcia w proporcji 1.91:1, czyli np. 1200×630 px. Zdjęcia produktów są zazwyczaj kwadratowe lub pionowe – wklejone jako og:image wyświetlą się przycięte z uciętymi bokami albo z rozmytym tłem dopełniającym proporcje.
Rozwiązanie: przygotuj osobną wersję głównego zdjęcia produktu w proporcji 1200×630 px – produkt wycentrowany, białe lub neutralne tło, trochę przestrzeni po bokach. Dla sklepów z wieloma produktami warto to zautomatyzować – większość platform sklepowych pozwala generować takie wersje przy dodawaniu produktu.
Najważniejsza zasada dla sklepów z wieloma produktami
To jest punkt, który w praktyce jest najczęściej pomijany.
Każda podstrona – strona główna, kategoria produktów, pojedynczy produkt – musi mieć własny, unikalny zestaw tagów OG. Jeśli wszystkie produkty dziedziczą te same tagi z szablonu strony, przy udostępnieniu każdego linka pojawi się to samo logo sklepu z tym samym ogólnym opisem. Klient nie wie, co ogląda, i nie klika.
Jak powinno to wyglądać w praktyce dla różnych typów podstron:
Strona produktu – og:image to główne zdjęcie produktu (1200×630 px), og:title zawiera nazwę produktu i kluczowy atrybut (np. kolor, materiał, pojemność), og:description to pierwsze zdanie opisu lub lista trzech głównych cech.
Strona kategorii (np. kubki-reklamowe, długopisy-reklamowe) – og:image powinien pokazywać reprezentatywne zdjęcie całej kategorii, np. kilka produktów w poziomej kompozycji. og:title i og:description opisują kategorię, a nie konkretny produkt.
Strona główna – og:image to key visual marki lub najlepiej rozpoznawalny produkt/układ produktów. To wizytówka firmy w mediach społecznościowych.
Co zrobić po wdrożeniu zmian
Po tym jak Twój programista lub agencja wdroży poprawne tagi OG na stronie, nie zapomnij o ostatnim kroku. Wejdź do Meta Sharing Debugger, wklej adres URL zmienionej strony i kliknij „Scrape Again”. Dopiero wtedy Facebook pobierze świeżą wersję i zacznie pokazywać poprawny podgląd.
Przy globalnej zmianie szablonu (np. gdy poprawiasz tagi dla wszystkich produktów naraz) wystarczy odświeżyć kilka przykładowych URLi. Dla pozostałych stron Facebook zaktualizuje podgląd stopniowo w ciągu 24–72 godzin.
Inne platformy – te same zasady, osobne narzędzia
Tagi Open Graph działają nie tylko na Facebooku. LinkedIn, Twitter/X i większość innych platform społecznościowych również je odczytuje. Jeśli chcesz sprawdzić wygląd linka na innych platformach, skorzystaj z:
- LinkedIn Post Inspector – linkedin.com/post-inspector
- Twitter/X Card Validator – cards-dev.twitter.com/validator
- opengraph.xyz – szybki podgląd bez logowania, działa dla wszystkich platform
Podsumowanie – co wdrożyć w pierwszej kolejności
Jeśli chcesz zabrać się za Open Graph metodycznie, zacznij od tego co daje największy efekt wizualny najszybciej. Najpierw upewnij się, że każda strona produktowa ma statycznie zadeklarowany og:image w <head> z pełnym, bezwzględnym URLem zdjęcia – nie ładowanym przez JavaScript. Następnie przygotuj wersje zdjęć w proporcji 1200×630 px dla bestselerów i stron kategorii. Potem dostosuj og:title i og:description tak, żeby były unikalne dla każdej podstrony i zachęcały do kliknięcia. Na koniec zweryfikuj wszystko przez Meta Sharing Debugger i wyczyść cache.
Trzy tagi, które bezwzględnie muszą być na każdej podstronie: og:title, og:description, og:image. Bez nich Facebook sam zdecyduje co pokazać – i rzadko jest to dobra decyzja.
