Podgląd linku na Facebooku i LinkedIn: znaczniki Open Graph
Podgląd linku, czyli karta z obrazkiem, tytułem i opisem, powstaje ze znaczników Open Graph w kodzie strony: og:title, og:description, og:image i og:url. Facebook zaleca obrazek co najmniej 1200 × 630 px w proporcji około 1,91:1, a LinkedIn co najmniej 1200 × 627 px i plik do 5 MB.
- Protokół Open Graph wymaga czterech znaczników: og:title, og:type, og:image i og:url; og:description jest opcjonalny, ale LinkedIn go wymaga.
- Facebook zaleca obrazki podglądu co najmniej 1200 × 630 px, minimum 600 × 315 px dla dużej karty, i plik nie większy niż 8 MB.
- LinkedIn wymaga obrazka podglądu co najmniej 1200 × 627 px w proporcji 1,91:1 i pliku nie większego niż 5 MB.
- Facebook zapamiętuje obrazek pod jego adresem, więc po zmianie grafiki trzeba podać nowy adres pliku albo odświeżyć podgląd w narzędziu Sharing Debugger.
Co to jest Open Graph
Gdy wklejasz link w poście albo wiadomości, serwis odwiedza stronę i szuka w jej kodzie kilku znaczników. Z nich składa kartę: obrazek, tytuł, opis i adres. Te znaczniki opisuje protokół Open Graph, stworzony przez Facebooka i opublikowany na stronie ogp.me.
Bez nich serwis zgaduje. Bierze tytuł strony, pierwszy lepszy obrazek albo żaden. Wtedy link do oferty wygląda jak szary prostokąt z adresem. Klient, który dostał go od znajomego, ma mniej powodów, żeby kliknąć.
Z tych samych znaczników korzystają też inne serwisy i komunikatory. Ten przewodnik opiera się na dokumentacji Facebooka i LinkedIn, bo to one podają dokładne wymagania.
Jakie znaczniki dodać
Znaczniki wpisuje się w sekcji <head>, czyli w niewidocznej części strony. Każda podstrona powinna mieć własne wartości: inny tytuł i opis dla strony usługi, inny dla kontaktu. W WordPressie robi to zwykle wtyczka SEO, w kreatorach stron pole jest w ustawieniach udostępniania podstrony.
- Przykład w kodzie:
<meta property="og:image" content="https://twojafirma.pl/og/ksiegowosc.jpg">. - Facebook radzi dodać og:image:width i og:image:height. Dzięki nim obrazek pokazuje się od razu, także przy pierwszym udostępnieniu.
| Znacznik | Co w nim wpisać | Przykład |
|---|---|---|
| og:title | Tytuł karty, krótki i konkretny | Księgowość dla jednoosobowych firm |
| og:description | Jedno lub dwa zdania o tym, co klient znajdzie | Pełna księgowość i kadry. Sprawdź cennik i zakres usług. |
| og:image | Pełny adres obrazka z https:// | https://twojafirma.pl/og/ksiegowosc.jpg |
| og:url | Pełny adres tej podstrony, najlepiej taki jak w canonical | https://twojafirma.pl/ksiegowosc/ |
| og:type | Rodzaj treści; dla zwykłej strony website, dla wpisu article | website |
Jaki obrazek: wymiary, waga, proporcje
Najbezpieczniej przygotować jedną grafikę 1200 × 630 px. Spełnia zalecenie Facebooka i minimum LinkedIn, a proporcja około 1,91:1 pasuje do obu. Facebook pisze, że przy proporcji bliskiej 1,91:1 pokazuje cały obrazek bez przycinania.
- Ważne treści trzymaj bliżej środka grafiki. Różne ekrany przycinają brzegi inaczej.
- Napis na grafice ma być duży. Na telefonie karta jest mała.
- Obrazek musi być publicznie dostępny. LinkedIn pisze, że obrazek z katalogu chronionego hasłem albo zablokowany dla jego robota się nie pokaże.
| Serwis | Wymiary | Waga pliku | Uwagi |
|---|---|---|---|
| Zalecane co najmniej 1200 × 630 px; minimum dla dużej karty 600 × 315 px; absolutne minimum 200 × 200 px | Do 8 MB | Proporcja jak najbliżej 1,91:1 | |
| Co najmniej 1200 × 627 px | Do 5 MB | Zalecana proporcja 1,91:1; obrazek węższy niż 401 px pokaże się jako miniatura |
Dlaczego stary podgląd nie znika
Serwisy zapamiętują podgląd. Facebook pisze, że obrazki zapamiętuje według adresu pliku i nie odświeży ich, dopóki adres się nie zmieni. Jeśli podmienisz grafikę pod tą samą nazwą, ludzie dalej zobaczą starą.
Są dwa sposoby. Pierwszy: zapisz nową grafikę pod nowym adresem, na przykład ksiegowosc-2.jpg, i wpisz go w og:image. Drugi: wklej adres strony do narzędzia Sharing Debugger Facebooka i kliknij ponowne pobranie danych. LinkedIn ma podobne narzędzie, Post Inspector.
Jak sprawdzić to samemu
- Otwórz stronę, naciśnij Ctrl+U (na Macu Cmd+Option+U) i wyszukaj og:. Sprawdź, czy są og:title, og:description, og:image i og:url.
- Skopiuj adres z og:image i otwórz go w nowej karcie. Obrazek musi się wczytać bez logowania.
- Wklej adres strony do Sharing Debugger Facebooka (https://developers.facebook.com/tools/debug) po zalogowaniu. Zobaczysz podgląd i listę ostrzeżeń.
- Wklej adres do LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/) po zalogowaniu. Narzędzie pokaże, jak LinkedIn widzi stronę.
- Wyślij link sam sobie w komunikatorze i zobacz kartę na telefonie.
Co sprawdza bezpłatny skan
- Odczytuje ze strony głównej znaczniki og:title, og:description i og:image.
- Zgłasza ostrzeżenie, gdy nie ma og:image, bo wtedy link w wiadomościach i postach pokaże się bez grafiki.
- Zgłasza uwagę, gdy brakuje jednocześnie og:title i og:description.
- Wymiary, wagę i wygląd grafiki oraz znaczniki na wszystkich podstronach sprawdza człowiek w pełnym audycie.
Skan sprawdza stronę główną i do 3 podstron. Wynik dostajesz w około minutę.
Kiedy zlecić to komuś: Gdy strona ma wiele podstron albo produktów, grafiki podglądu warto generować automatycznie z szablonu, a nie robić ręcznie. JFlow Labs może to wdrożyć razem z poprawnymi znacznikami na każdej podstronie, w wycenie osobnej od audytu. Zobacz pełny audyt.
Pytania i odpowiedzi
Czy znaczniki Open Graph wpływają na pozycję w Google?
To znaczniki dla serwisów, w których ludzie udostępniają linki, takich jak Facebook i LinkedIn. Na wygląd wyniku w Google wpływają tytuł strony i opis meta description. Open Graph wpływa na to, czy ktoś kliknie link w poście albo wiadomości.
Dlaczego Facebook pokazuje stary obrazek?
Bo zapamiętuje obrazki według adresu pliku. Zapisz nową grafikę pod nowym adresem albo odśwież dane strony w Sharing Debugger.
Czy każda podstrona potrzebuje osobnej grafiki?
Nie musi, ale pomaga. Minimum to jedna dobra grafika dla całej strony. Osobne grafiki warto mieć dla najczęściej udostępnianych podstron: głównych usług, cennika i wpisów w blogu.
Jaki format pliku wybrać?
JPG albo PNG działa wszędzie. LinkedIn w specyfikacji obrazków reklamowych wymienia JPG, PNG i GIF. Pilnuj też wagi: do 5 MB, jeśli link ma działać także na LinkedIn.