Social media22 lipca 202611 min czytania

Tagi Open Graph. Jak ustawić podgląd linku na Facebooku i LinkedInie

Cztery znaczniki decydują o tym, co widać po wklejeniu adresu Twojej strony. Wyjaśniamy, jak działają, jakie wymiary ma mieć grafika, dlaczego zmiany nie widać od razu i jak to wszystko sprawdzić przed wysłaniem linku klientowi.

Dłonie trzymające telefon z podglądem udostępnianego linku

Handlowiec wysłał klientowi link do oferty. W wiadomości zamiast tytułu i zdjęcia pojawił się goły adres i przypadkowy fragment menu. Klient odpisał: „to na pewno wasza strona?“.

Ta scena kosztuje więcej, niż się wydaje. Zajawka linku jest pierwszą rzeczą, jaką odbiorca widzi - wcześniej niż samą stronę - i pełni funkcję okładki. Kiedy wygląda na coś, czego nikt nie doglądał, taki sygnał dostaje firma, jeszcze przed jednym kliknięciem.

Odpowiadają za to znaczniki Open Graph: kilka linijek w kodzie strony, niewidocznych dla użytkownika, a odczytywanych przez wszystko, co przetwarza wklejony adres - portale społecznościowe, komunikatory, klienty poczty, narzędzia do notatek.

Ten tekst wyjaśnia, jak ten mechanizm działa, które cztery znaczniki decydują o wyglądzie zajawki, jakie wymiary i wagę ma mieć grafika, dlaczego po poprawce nadal widać starą wersję i jak sprawdzić efekt, zanim link pójdzie w świat. Teza: ustawienie Open Graph to jednorazowa praca na kwadrans, która działa na każdy link wysłany później - i właśnie dlatego jest jednym z najbardziej opłacalnych drobiazgów technicznych na firmowej stronie.

Skąd wziął się Open Graph i po co powstał

Protokół powstał w 2010 roku w Facebooku, jako sposób na to, żeby strony mogły same opisać, jak chcą wyglądać po udostępnieniu. Wcześniej serwisy zgadywały: brały pierwszy nagłówek, pierwszy akapit i pierwszy większy obrazek na stronie, co dawało wyniki od przypadkowych do kompromitujących.

Rozwiązanie okazało się na tyle wygodne, że przyjęło się poza Facebookiem. Dziś czytają je LinkedIn, komunikatory, aplikacje do notatek i wiele narzędzi wewnętrznych. Specyfikacja jest publiczna i dostępna pod adresem ogp.me. Kilka platform utrzymuje własne rozszerzenia - najbardziej znane to znaczniki twitter: - ale w praktyce, gdy ich brakuje, sięgają po odpowiedniki z Open Graph.

Mechanizm jest prosty. Wklejenie adresu uruchamia po stronie serwisu pobranie strony przez program zwany robotem podglądu. Robot czyta wyłącznie sekcję <head> dokumentu, wyciąga z niej znaczniki, pobiera wskazaną grafikę, buduje zajawkę i zapisuje ją w pamięci podręcznej. Ostatni element odpowiada za większość problemów opisanych dalej w tym tekście.

Warto od razu rozróżnić dwie rzeczy, które bywają mylone. Tytuł strony i opis meta służą wyszukiwarce i pojawiają się w wynikach wyszukiwania. Znaczniki Open Graph służą podglądowi linku i pojawiają się w wiadomościach oraz w mediach społecznościowych. Mogą się pokrywać, ale nie muszą - i często nie powinny, bo piszemy je dla innego odbiorcy w innym momencie.

Cztery znaczniki, które mają znaczenie

Specyfikacja definiuje kilkanaście pól. W praktyce o wyglądzie zajawki decydują cztery.

og:title - tytuł w zajawce. Nie musi być identyczny z tytułem strony. Do około sześćdziesięciu znaków, bo dłuższe zostają ucięte, przy czym miejsce ucięcia różni się między platformami. Pisz go jako zaproszenie: „Cennik usług - Firma XYZ” przegrywa z „Ile kosztuje przegląd instalacji w domu jednorodzinnym”.

og:description - jedno, dwa zdania. Do stu dziesięciu znaków w podglądzie mobilnym; na komputerze bywa więcej, ale planuj pod krótszy wariant. To zdanie piszesz dla człowieka, który waha się, czy kliknąć, więc powinno nieść konkret: co znajdzie po drugiej stronie i dlaczego to jego sprawa.

og:image - grafika. Tu jest najwięcej błędów i osobna sekcja niżej.

og:url - adres kanoniczny strony. Bez niego ta sama treść z parametrami kampanii albo identyfikatorami sesji zbiera reakcje jako kilka osobnych adresów, a statystyki udostępnień rozjeżdżają się na kilka słupków.

Dwa pola uzupełniające, warte dołożenia: og:type (dla większości stron firmowych website, dla wpisów blogowych article) oraz og:site_name z nazwą serwisu. Przy artykułach przydają się jeszcze article:published_time i article:author.

Jeśli strona jest wielojęzyczna, dochodzi og:locale oraz og:locale:alternate dla pozostałych wersji. To pole bywa pomijane, a odpowiada za sytuacje, w których polska strona wyświetla się w zajawce z angielskim opisem.

Grafika: trzy liczby i dwa najczęstsze błędy

Rozmiar 1200 na 630 pikseli. To proporcja bliska 1,91:1, którą Facebook rekomenduje od lat i pod którą przycinają większość podglądów pozostałe serwisy. Grafika mniejsza niż 600 na 315 pikseli bywa wyświetlana jako mała miniatura obok tekstu zamiast dużego kafla.

Waga poniżej 1 MB. Cięższe pliki część serwisów po prostu pomija, zwłaszcza przy pierwszym pobraniu. To najczęstsza przyczyna sytuacji, w której grafika jest ustawiona poprawnie, a mimo to nie widać jej w zajawce.

Format JPG albo PNG. WebP i AVIF bywają pomijane przez część narzędzi, mimo że przeglądarki obsługują je od dawna. Przy tym jednym pliku warto zostać przy starszym formacie.

Pierwszy najczęstszy błąd: logo na przezroczystym tle jako grafika podglądu. Przezroczystość zamienia się w czarne albo białe tło, zależnie od serwisu i motywu odbiorcy, a logo w kadrze 1200 na 630 tonie w pustce. Jeśli chcesz użyć logo, umieść je na pełnym, jednolitym tle, zajmujące około jednej trzeciej szerokości kadru.

Drugi: tekst przy krawędzi. Część miniatur jest przycinana do kwadratu albo do węższego paska, więc wszystko istotne trzymaj w środkowych sześćdziesięciu procentach kadru. Praktyczny sposób: nałóż na projekt prostokąt bezpieczny 720 na 630 pikseli wyśrodkowany i sprawdź, czy po jego przycięciu grafika nadal ma sens.

Trzecia rzecz, o której rzadko się pamięta: adres grafiki musi być bezwzględny, czyli pełny, z protokołem i domeną. Ścieżka względna działa w przeglądarce i nie działa w robocie podglądu. Plik musi też być publicznie dostępny - grafika za logowaniem albo w katalogu zablokowanym w robots.txt nie zostanie pobrana.

Dlaczego po poprawce nadal widać starą wersję

To jest punkt, który generuje najwięcej nerwów, więc zasługuje na osobne wyjaśnienie.

Każda z dużych platform utrzymuje własną pamięć podręczną zajawek. Kiedy jakikolwiek użytkownik po raz pierwszy wklei Twój adres, serwis pobiera stronę, buduje podgląd i zapamiętuje go. Kolejne wklejenia tego samego adresu nie uruchamiają ponownego pobrania - wyświetlana jest wersja zapisana. Bywa, że przez wiele dni.

Praktyczna konsekwencja: poprawienie znaczników nie zmienia niczego dla adresów, które ktoś już gdzieś wkleił, dopóki nie wymusisz odświeżenia. A wymusić trzeba osobno w każdym serwisie, w jego własnym narzędziu podglądu.

Stąd jedyna sensowna kolejność działania:

Ustaw znaczniki i wgraj grafikę.
Otwórz narzędzie podglądu danej platformy, wklej adres, wymuś ponowne pobranie.
Sprawdź, czy zajawka wygląda tak, jak powinna.
Dopiero teraz wyślij link komukolwiek.

Pominięcie punktu czwartego jako ostatniego kończy się tym, że pierwsi odbiorcy dostają starą albo pustą zajawkę, która potem krąży dalej w udostępnieniach i nie da się jej łatwo dogonić.

Jest jeszcze obejście na sytuacje awaryjne: dodanie do adresu parametru, na przykład ?v=2. Dla serwisu jest to nowy adres, więc podgląd budowany jest od zera. Traci się przy tym dotychczasowe reakcje przypisane do adresu pierwotnego, więc traktuj to jako ostateczność, a nie metodę pracy.

Jak to wdrożyć u siebie

Na WordPressie znaczniki ustawia większość wtyczek do optymalizacji treści. Zwykle wystarczy uzupełnić pola podglądu społecznościowego w edytorze wpisu albo strony i ustawić grafikę domyślną dla całego serwisu. Uwaga na sytuację, w której działają dwie wtyczki naraz - wtedy w kodzie pojawiają się zduplikowane znaczniki, a serwisy wybierają z nich losowo.

Na stronie pisanej ręcznie albo na generatorze statycznym wstawiasz cztery linijki do sekcji <head> szablonu, z wartościami pobieranymi z danych podstrony. To praca na kilkanaście minut, jednorazowa dla całego serwisu.

W sklepie internetowym warto zadbać o to, żeby karty produktów miały zdjęcie produktu jako grafikę podglądu, a nie wspólną grafikę sklepu. Link do konkretnego produktu jest w handlu najczęściej wysyłanym rodzajem linku.

Osobna, wartościowa praktyka: przygotuj osobną grafikę dla podstron, które wysyłasz najczęściej. Zwykle są to trzy: cennik, oferta i kontakt. Wspólna grafika dla całego serwisu działa poprawnie, ale zajawka dopasowana do treści wyraźnie podnosi liczbę kliknięć, zwłaszcza gdy link krąży w grupach i na czatach.

Warto też zaplanować, co się dzieje przy zmianie identyfikacji wizualnej. Grafiki podglądu są rozsiane po podstronach i przy zmianie logo bywają zapominane na lata. Trzymanie ich w jednym katalogu z czytelnymi nazwami plików oszczędza potem godziny szukania.

Kod do skopiowania

Minimalny zestaw, który wstawia się w sekcję <head> dokumentu:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Nazwa firmy">
<meta property="og:title" content="Ile kosztuje przegląd instalacji w domu">
<meta property="og:description" content="Z czego składa się cena i co ją podnosi.">
<meta property="og:image" content="https://twojafirma.pl/img/og-przeglad.jpg">
<meta property="og:url" content="https://twojafirma.pl/przeglad-instalacji/">
<meta property="og:locale" content="pl_PL">

Dla platformy X dokłada się dwie linijki, resztę wartości pobiera ona z Open Graph:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ile kosztuje przegląd instalacji w domu">

Wartość summary_large_image odpowiada za duży kafel z grafiką. Bez niej wyświetla się mała miniatura obok tekstu.

Trzy najczęstsze usterki i ich przyczyny

Zajawka pokazuje sam adres, bez tytułu i grafiki. Robot nie dotarł do sekcji <head> albo strona wymaga logowania. Sprawdź, czy adres otwiera się w oknie prywatnym przeglądarki i czy nie jest zablokowany w pliku robots.txt.

Tytuł i opis są poprawne, ale grafiki nie widać. Najczęściej wina leży po stronie pliku: zbyt duża waga, format nieobsługiwany albo adres względny zamiast pełnego. Wklej adres grafiki bezpośrednio w przeglądarkę - jeśli się nie otwiera, robot też jej nie pobierze.

Zajawka jest inna na dwóch platformach. To normalne, jeśli na jednej z nich podgląd został zbudowany przed poprawką i siedzi w pamięci podręcznej. Wymuś ponowne pobranie osobno w każdym serwisie.

Jak sprawdzić, czy działa

Minimalna procedura kontrolna, do wykonania raz po wdrożeniu i potem po każdej większej zmianie na stronie:

Otwórz kod źródłowy strony i sprawdź, czy cztery znaczniki są obecne i czy każdy występuje tylko raz.
Sprawdź, czy adres grafiki jest pełny i czy otwiera się po wklejeniu w pasek przeglądarki.
Wklej adres w narzędziu podglądu każdej platformy, z której korzystasz, i wymuś ponowne pobranie.
Sprawdź podgląd na telefonie, nie tylko na komputerze - to tam ucinane są dłuższe teksty.
Powtórz test dla trzech różnych podstron: strony głównej, jednej podstrony usługi i jednego wpisu.

Ostatni punkt wyłapuje najczęstszy błąd wdrożeniowy: znaczniki ustawione poprawnie na stronie głównej i puste albo dziedziczone na wszystkich pozostałych.

Co się zmienia

Dwie rzeczy warto obserwować.

Rośnie znaczenie zajawki poza mediami społecznościowymi. Coraz więcej rozmów handlowych toczy się w komunikatorach, a linki krążą w wiadomościach prywatnych i w grupach. Zajawka linku stała się przez to elementem materiałów sprzedażowych, a nie wyłącznie sprawą marketingu w social mediach.

Podglądy stają się bogatsze. Część narzędzi generuje własne streszczenia treści zamiast wyświetlać opis z kodu. To osłabia kontrolę nad tym, co zobaczy odbiorca, i jednocześnie premiuje strony, których treść jest jednoznaczna i dobrze ustrukturyzowana - bo z takiej łatwiej zbudować sensowne streszczenie.

Obszarem wymagającym uwagi jest brak jednolitości. Każdy serwis interpretuje znaczniki nieco inaczej, inaczej przycina grafikę i inaczej zarządza pamięcią podręczną. Nie zanosi się na ujednolicenie, więc testowanie w każdym kanale z osobna pozostanie konieczne.

Podsumowanie

Wracając do tezy: cztery znaczniki, jedna grafika i jedno wymuszenie odświeżenia to praca na kwadrans, która działa na każdy link wysłany później - przez lata i przez wszystkich w firmie.

Trzy rzeczy do zapamiętania. Grafika 1200 na 630 pikseli, poniżej megabajta, w JPG lub PNG, bez przezroczystości i bez tekstu przy krawędzi. Po każdej poprawce wymuś ponowne pobranie w narzędziu podglądu, zanim wyślesz link komukolwiek. Sprawdź trzy różne podstrony, nie tylko stronę główną - tam najczęściej kryje się błąd.

Jeśli masz kwadrans, zacznij od wklejenia adresu swojej strony głównej i jednej podstrony oferty w narzędzie podglądu. To, co zobaczysz, powie Ci, czy potrzebujesz tego kwadransa, czy nie.

Najczęstsze pytania

Czy potrzebuję osobnych znaczników dla LinkedIna i dla Facebooka? Nie. Oba czytają Open Graph. Osobne pola mają sens tylko wtedy, gdy chcesz świadomie pokazać inny tytuł w konkretnym serwisie.

Zmieniłem grafikę, a nadal widać starą. Co robić? Wymuś ponowne pobranie w narzędziu podglądu danej platformy. Jeśli to nie pomaga, sprawdź wagę pliku - powyżej megabajta bywa pomijany - oraz to, czy adres grafiki jest pełny i publicznie dostępny.

Czy Open Graph wpływa na pozycję w wyszukiwarce? Nie bezpośrednio. Wpływa na to, ile osób kliknie w link udostępniony w mediach społecznościowych i w wiadomościach, a więc na ruch, nie na samo pozycjonowanie.

Jaka powinna być grafika, jeśli nie mam zdjęć? Jednolite tło w kolorze marki, nazwa strony ustawiona w środkowej części kadru i logo w rogu. Prosty kafel tekstowy działa wyraźnie lepiej niż zdjęcie z banku, które nic nie mówi o firmie.

Czy trzeba ustawiać znaczniki na każdej podstronie osobno? Tytuł i opis - tak, powinny odpowiadać treści danej podstrony. Grafika może być wspólna dla całego serwisu, z wyjątkiem podstron wysyłanych najczęściej, którym warto dać własną.

Mam sklep. Co ustawić na kartach produktów? Zdjęcie produktu jako grafikę, nazwę produktu w tytule i jedno zdanie z najważniejszym parametrem w opisie. Link do produktu jest najczęściej wysyłanym linkiem w handlu i najbardziej opłaca się go dopracować.