Podgląd udostępnienia (Open Graph)

Wpisujesz adres strony i widzisz, jak wygląda link do niej wklejony na Facebooku, LinkedInie albo w wiadomości. Jeśli zamiast zdjęcia jest szary prostokąt albo tytuł brzmi „Strona główna”, narzędzie powie, którego znacznika brakuje.

  • Wpisz adres podstrony i kliknij „Sprawdź”.

Tak wygląda wklejony link

Podgląd pojawi się po sprawdzeniu
twojastrona.plTytuł strony

Adres, który wpisujesz, trafia na nasz serwer tylko po to, żeby pobrać stronę. Wynik trzymamy w pamięci przez dwie minuty. Obrazek do podglądu Twoja przeglądarka pobiera już bezpośrednio ze sprawdzanej strony.

Jak z tego korzystać

  1. Wpisz adres konkretnej podstrony. Każda podstrona ma własne znaczniki, więc wpis na blogu sprawdzaj osobno, a stronę główną osobno.
  2. Kliknij „Sprawdź”. Po prawej zobaczysz podgląd linku i wymiary obrazka, po lewej uwagi.
  3. Pod podglądem jest tabela ze wszystkimi znalezionymi znacznikami, razem z tymi, których brakuje.
  4. Jeśli strona nas nie wpuszcza, wklej jej kod ręcznie (Ctrl+U w przeglądarce).

Co sprawdzamy

  • Obrazek. Czy jest, czy ma pełny adres, czy się otwiera i jakie ma wymiary.
  • Tytuł i opis. Gdy nie ma og:title i og:description, serwisy biorą zwykły tytuł i opis strony. To działa, ale tytuł pisany pod Google bywa za długi na kartę linku.
  • Adres. og:url powinien wskazywać ten sam adres co znacznik canonical. Rozbieżność rozbija polubienia i udostępnienia na dwa liczniki.
  • Karta dla X. Bez twitter:card z wartością summary_large_image X pokazuje małą miniaturę zamiast dużego zdjęcia.
  • Duplikaty. Dwa komplety znaczników to znak, że robią je naraz motyw i wtyczka SEO. Serwisy biorą pierwszy, nie zawsze ten lepszy.

Najczęstsze znaleziska

Co widaćPrzyczyna
szary prostokąt zamiast zdjęciabrak og:image albo adres względny
logo partnera ze stopki jako zdjęciebrak og:image, serwis sam wybrał pierwszy większy obrazek ze strony
tytuł ucięty w połowietytuł pisany pod Google, bez osobnego og:title
ten sam podgląd dla każdego wpisuznaczniki wpisane na sztywno w szablonie, zamiast osobno dla każdej podstrony
mała miniatura z boku zamiast dużego zdjęciaobrazek węższy niż 600 pikseli

Pytania

Co to jest Open Graph?
Zestaw znaczników w kodzie strony, które mówią serwisom społecznościowym i komunikatorom, co pokazać przy wklejonym linku: tytuł, opis i obrazek. Wymyślił je Facebook, a dziś czytają je też LinkedIn, Messenger, WhatsApp, Slack, iMessage i większość innych.
Dlaczego przy moim linku nie ma obrazka?
Najczęściej z jednego z trzech powodów. Na stronie nie ma znacznika og:image. Adres obrazka jest względny, na przykład /img/foto.jpg, a musi być pełny, razem z https:// i domeną. Albo obrazek jest za mały: poniżej 200 na 200 pikseli Facebook go pomija, a poniżej 600 na 315 pokazuje tylko małą miniaturę z boku.
Jaki obrazek jest najlepszy?
Poziomy, 1200 na 630 pikseli, w formacie JPG albo PNG, do 1 MB. Najważniejszą treść trzymaj w środku kadru, bo część aplikacji przycina boki do kwadratu. Napis na obrazku powinien dać się przeczytać na telefonie, więc najwyżej kilka dużych słów.
Poprawiłem znaczniki, a Facebook pokazuje stary podgląd. Co robić?
Facebook zapamiętuje podgląd linku nawet na kilka tygodni. Wklej adres w narzędziu Sharing Debugger (developers.facebook.com/tools/debug) i kliknij „Scrape Again”. LinkedIn ma do tego Post Inspector. To narzędzie pokazuje stan faktyczny strony, czyli to, co zobaczy każdy nowy serwis.
Czy Open Graph wpływa na pozycję w Google?
Nie. Google tych znaczników nie używa do ustalania pozycji. Wpływają na to, ile osób kliknie link udostępniony przez Ciebie albo przez zadowolonego klienta, a link ze zdjęciem klika się wielokrotnie chętniej niż goły adres.
Skąd wziąć gotowe znaczniki?
Z generatora meta tagów. Wypełniasz tytuł, opis i adres obrazka, a on oddaje komplet do wklejenia w sekcję head. W WordPressie to samo zrobisz w polach wtyczki Yoast albo Rank Math, w zakładce o mediach społecznościowych.

Inne darmowe narzędzia