Miniaturki przy udostępnianiu stron na Facebooku

Logo Facebook

Wpis ten omawia co zrobić jeśli przy udostępnianiu naszej strony www na Facebooku nie wyświetlają się prawidłowe miniaturki. To samo dotyczy wyświetlania miniaturek w linkach udostępnianych przez WhatsApp.

Przyczyny problemu

Istnieją 3 główne powody, przez które obrazy z naszego bloga, strony z ogłoszeniami czy innego portalu nie wyświetlają się prawidłowo w Facebooku, oto one:

  1. Strona nie zawiera tagu og:image lub link do obrazu jest nieprawidłowy lub nie zawiera nazwy domeny
  2. Obrazek jest za mały
  3. Facebook przechowuje w cachu (pamięci podręcznej) wcześniejszą wersję obrazu

Ostatni problem występuje często jeśli dopiero co zmieniliśmy miniaturkę wpisu, zdjęcia w ogłoszeniu na stronie, itd. i chcielibyśmy ją od razu udostępnić na Facebooku.

Rozwiązanie 1: znacznik og:image

Sprawdź czy w źródle strony znajduje się znacznik meta og:image, który informuje Facebook jaką powinien użyć miniaturkę. Powinien on wyglądać podobnie do:

<meta property="og:image" content="https://wyremski.pl/upload/images/logo_facebook.png">

Gdzie w content powinna być ścieżka do zdjęcia koniecznie z nazwą domeny. 
Sprawdź też koniecznie czy ścieżka jest prawidłowa – czy obrazek istnieje na serwerze. Nazwa pliku nie powinna zawierać spacji.

Rozwiązanie 2: rozmiar zdjęcia

Przejrzyj obecne zalecenia Facebooka odnośnie zdjęć na stronie https://developers.facebook.com/docs/sharing/best-practices#images

Zauważ że np. rekomendowany minimalny rozmiar zdjęcia to 1080px x 600px.

Sprawdź czy Twoje zdjęcie spełnia ten i inne warunki.

Rozwiązanie 3: Sharing Debugger

Jeśli dwa powyższe rozwiązanie nie zadziałały a Ty nadal nie widzisz obrazka przy udostępnianiu strony przez Facebook lub WhatsApp to znaczy że to najprawdopodobniej Facebook jeszcze nie przeskanował Twojej strony. Podobnie jeśli wyświetla jeszcze stary obrazek, problem wynika z tego, że Facebook trzyma stary obrazek w swojej pamięci podręcznej.
Na szczęście mamy dostępne narzędzie, które pozwoli podejrzeć jakie dane są cachowane przez Facebooka oraz zmusić go do odświeżenia informacji. To narzędzie to Sharing Debugger, dostępne pod adresem: https://developers.facebook.com/tools/debug/
W pole „Enter a URL to see the information that is used when it is shared on Facebook” należy wkleić adres URL naszego wpisu na blogu/strony z ogłoszeniem, a następnie kliknąć na przycisk „Debug”. Po chwili zobaczymy jak Facebook widzi naszą stronę. Jeśli dane są nieprawidłowe to klikamy na „Scrape Again” – Facebook powinien po tym pobrać nowe dane w tym miniaturkę.

Dla programistów, którzy nie chcą za każdym razem wchodzić do Sharing Debugger polecam zajrzenie do dokumentacji Facebooka odnośnie tego jak automatycznie wywoływać sharing debugger: https://developers.facebook.com/docs/graph-api/reference/v9.0/url

Przy tym rozwiazaniu należy pamiętać że najpierw musimy uzyskać Access Token, musimy do tego mieć dodaną aplikację na swoim koncie Facebook. Access token uzyskujemy w sposób opisany w tym miejscu: https://developers.facebook.com/docs/marketing-apis/overview/authentication/

Podsumowanie

Mam nadzieję, że ten wpis pomoże w rozwiązaniu częstego problemu z miniaturkami przy dodawaniu wpisu na Facebooku z linkiem do naszej strony. Jeśli jednak żadne z trzech rozwiązań nie działa, to prosiłbym o taką informację w komentarzu, spróbujemy poszukać rozwiązania:)