O tym, jak wygląda udostępniony link, decydują tagi Open Graph w sekcji <head> strony. Nie ma ich? Wtedy Facebook, LinkedIn czy komunikator same zgadują tytuł i obrazek. I zgadują różnie. Zamiast zdjęcia z wpisu wyskakuje logo ze stopki, jakaś ikona albo pusty kafelek. Poniżej rozpisuję, które znaczniki wstawić i jak przygotować grafikę. Jest też o tym, jak to ustawić w WordPressie i jak zmusić platformę do odświeżenia podglądu, kiedy uparcie pokazuje starą wersję.
Table of contents
Czym są tagi Open Graph i skąd platformy biorą podgląd linku?
To znaczniki meta, z których serwis społecznościowy dowiaduje się, jakim tytułem, obrazkiem i adresem opisać stronę. Według specyfikacji protokołu Open Graph robią ze zwykłej podstrony obiekt, który platforma wyświetla tak samo jak swoje własne treści. Od strony technicznej to po prostu dodatkowe elementy <meta property=”og:…”> w nagłówku dokumentu. Odwiedzający ich nie widzi. W ogóle.
Z tych samych znaczników czytają Facebook, LinkedIn i większość komunikatorów. Jedno wdrożenie, wiele miejsc naraz, spoko. Tylko nie myl ich z danymi schema.org (to częsta pomyłka). Meta tagi dla social media sterują tym, jak wygląda udostępnienie. A to, czym są dane strukturyzowane, to już inna bajka: opis treści dla wyszukiwarek.
Jakie tagi Open Graph są obowiązkowe, a jakie warto dodać?
Specyfikacja wymaga na każdej stronie czterech właściwości. Kilka kolejnych poprawia wygląd i dostępność podglądu. Obowiązkowe są:
- og:title - tytuł, który ma się wyświetlić w podglądzie,
- og:type - rodzaj obiektu, dla wpisu blogowego zwykle article,
- og:image - adres obrazka pokazywanego w kafelku,
- og:url - adres kanoniczny, który służy platformie za stały identyfikator strony.
Do tego polecam kilka tagów uzupełniających. og:description to krótki opis. og:image:alt opisuje grafikę dla czytników ekranu (i moim zdaniem jest najczęściej pomijany). og:locale podaje język i region, a og:site_name nazwę serwisu. Komplet dla pojedynczego wpisu może wyglądać tak:
<meta property="og:title" content="Jak ustawić podgląd linku" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/podglad-linku/" />
<meta property="og:image" content="https://example.com/img/podglad-linku.jpg" />
<meta property="og:image:alt" content="Kafelek linku z tytułem i zdjęciem wpisu" />
<meta property="og:description" content="Krótki opis wpisu do podglądu." />
<meta property="og:locale" content="pl_PL" />
<meta property="og:site_name" content="Nazwa serwisu" />og:image: rozmiar, format i proporcje obrazka
Wymiary i proporcje obrazka muszą się zgadzać z aktualną dokumentacją platform. Jeśli się nie zgadzają, grafika zostanie przycięta albo skurczy się do małej miniaturki obok tekstu. Meta i LinkedIn co jakiś czas zmieniają wymagania. Dlatego zanim zrobisz szablon grafiki, zajrzyj do pomocy danej platformy, a nie do poradnika sprzed kilku lat.
Bez względu na wymiary sprawdza się kilka prostych zasad:
- podawaj bezwzględny adres z https, a nie ścieżkę względną,
- najważniejszy element i ewentualny tekst trzymaj w centrum kadru, bo krawędzie bywają obcinane,
- przygotuj osobną grafikę dla każdego wpisu zamiast jednego logo dla całej witryny.
Aha, podgląd na Facebooku i miniatura linku na LinkedIn biorą ten sam og:image. Czyli jeden porządnie zrobiony plik zwykle załatwia oba serwisy.
Jak ustawić tagi Open Graph w WordPressie i na innych stronach
W WordPressie najprościej oddać to wtyczce SEO, która sama generuje znaczniki dla każdego wpisu. Trzy kroki i gotowe:
- Zainstaluj i skonfiguruj wtyczkę SEO, na przykład Rank Math albo Yoast.
- W edytorze wpisu otwórz zakładkę social media i ustaw tytuł, opis oraz obrazek do udostępnień.
- Zapisz wpis i sprawdź w kodzie źródłowym strony, czy znaczniki og: mają właściwe wartości.
U nas wygląda to tak: na web-systems.pl og:title, og:image, og:image:alt i og:locale generuje Rank Math. I jeszcze jedno. Tytuł i opis pod social media nie muszą kopiować meta title pod Google. Mogą być krótsze, bardziej zaczepne. Zasady są w sumie te same, co gdy robisz copywriting pod wyszukiwarki, tylko czytelnik siedzi gdzie indziej. Scrolluje feed, a nie wyniki wyszukiwania.
W sklepach i na stronach bez WordPressa znaczniki wstawia się prosto w szablon nagłówka. Zwykle przy okazji, gdy zlecasz tworzenie stron internetowych dla firm. Uważaj za to na zdublowane tagi. Motyw plus dwie wtyczki, każde wstawia swoje, i platforma bierze nie ten obrazek, co trzeba. Klasyka.
Dlaczego podgląd linku się nie zmienia i jak go odświeżyć?
Bo platformy trzymają podgląd w cache. Po poprawce znaczników trzeba więc wymusić ponowne pobranie strony. Na Facebooku robi się to w Sharing Debuggerze od Meta, na LinkedIn w Post Inspectorze. Wklejasz adres, narzędzie ściąga stronę od nowa i pokazuje, co z niej odczytało, razem z ostrzeżeniami. Jak dokładnie działa cache, opisuje dokumentacja każdej z platform.
Diagnozę zaczynam zawsze od widoku źródła strony w przeglądarce. Nie ma tam znaczników? No to żaden debugger nie pomoże. Najczęściej winne są:
- obrazek mniejszy, niż wymaga platforma,
- adres grafiki podany jako ścieżka względna,
- blokada robota platformy w robots.txt albo w zabezpieczeniach serwera,
- łańcuch przekierowań prowadzący do innej wersji adresu,
- brak og:url albo adres niezgodny z kanonicznym.
Podgląd linku jako stały element publikacji
Tu nie ma co kombinować, wystarczy nawyk. Przy każdym nowym wpisie ustaw obrazek i tytuł do udostępnień, a zanim wrzucisz link gdziekolwiek, przepuść go przez debugger. Zadbany kafelek pracuje i w postach organicznych, i w reklamach. Dlatego dobrze ustawione tagi Open Graph to fundament, na którym stoją kampanie w mediach społecznościowych.
Najczęstsze pytania
Czy tagi Open Graph wpływają na pozycję w Google?
Nie. Google nie bierze ich pod uwagę przy ustalaniu pozycji. Ale decydują o tym, jak link wygląda po udostępnieniu, a od tego zależy, czy ktoś w niego kliknie i ile ruchu przyjdzie z social media.
Czy LinkedIn i Facebook potrzebują osobnych tagów?
Zwykle nie, bo oba serwisy czytają og:title, og:image i og:description. Osobną grafikę robi się tylko wtedy, gdy dokumentacja którejś platformy wymaga innych proporcji niż te, których już używasz.
Co zrobić, gdy po zmianie og:image nadal widać stary obrazek?
Wymuś ponowne pobranie adresu w Sharing Debuggerze albo Post Inspectorze. Nie pomogło? Wgraj grafikę pod nową nazwą pliku i podmień adres w og:image. Platforma potrafi bowiem trzymać w pamięci sam obrazek, niezależnie od strony.
