sie
8
2012

Miniatury (thumbnails), cache i udostępnianie stron na Facebooku

Miniatury (thumbnails), cache i udostępnianie stron na Facebook W tym artykule opiszę najczęstsze problemy i ich rozwiązania, związane z miniaturami (thumbnails) przy udostępnianiu stron na Facebooku. Przyczyn może być kilka, m.in. cache Facebooka, a o tym poniżej…

  • Brak metatagu og:image w sekcji head

    Bez tego Facebook ciągnie cokolwiek ze strony, niekoniecznie to co chcemy. Dzięki właściwościom Open Graph w meta, możemy mu w tym pomóc.
  • Wielkość miniatury i proporcje – Miniaturka musi być co najmniej 50px na 50px w maksymalnych proporcjach 3:1. Chociaż nowe wytyczne wskazują 200px na 200px. W przeszłości wystarczyło 50px – na dzień dzisiejszy nadal działa. Jeżeli obraz będzie mniejszy lub proporcje będą większe od wskazanych, nic się nie wyświetli mimo poprawnego oznakowania go w meta tagach. Akceptowane formaty: JPG, PNG, GIF.
  • Błędny link – tak, prosty błąd, ale sprawdź w podglądzie źródła strony czy plik w metatagu og:image istnieje na FTP :)
  • Cache Facebooka – to jest najczęstszy problem, doprowadzający wielu do epilepsji ().() Opiszę jego rozwiązanie poniżej.

Facebook po pierwszej próbie udostępnienia strony zapisuje jej elementy w swojej BD, zwyczajnie ją cache’uje, aby mieć szybszy dostęp do jej wybranych fragmentów (np. ikony/obrazy). To powoduje, iż przy np. testowaniu strony, klikaniu “Udostępnij…”, aby sprawdzić jaką miniaturę FB wyświetli, pokazuje się cokolwiek innego niż chciałeś. Naturalnie wrzucasz na serwer nowy obraz pod tą samą nazwą pliku. Odświeżasz stronę, CTRL+F5, klikasz ponownie “Udostępnij…” i nadal widzisz ten sam obraz/thumbnail co był wcześniej, mimo że na FTP jest już nowy plik o_O Tylko nazwa pozostała ta sama. Odświeżasz i nadal nic.
 

Rozwiązanie (dwa sposoby):
1) Wchodzisz na http://developers.facebook.com/tools/debug. Na tej stronie FB pobierze na nowo zawartość strony i aktualizuje swój cache. Podajesz jej link, klikasz Debug. Teraz sprawdzasz ponownie czy Udostępnij pokazuje nowy obraz.
Jeżeli nie, pozostaje…

2) Dodaj parametr do adresu miniaturki lub do adresu strony. Np. ?123. Proste i może mało eleganckie, ale innego patentu na to nie wybadałem. Więc ostatecznie link do thumbnail powinien wyglądać http://www.twojaStrona.pl/twojObrazek.jpg?jakis_parametr.
Wówczas ponownie odpalamy stronę w Narzędziach Facebooka “Debug” i jeszcze raz testujemy przez przycisk “Udostępnij”. Powinno działać. Facebook pobierze nową wersję obrazu/pliku.

Polecam przydatne narzędzie Object Debugger oraz opis obiektów Open Graph dla Facebooka.

PS
Co ciekawe, jeżeli umieścisz link w komentarzu posta na FB do strony z miniaturą mniejszą niż 50px, zostanie ona już pokazana :)

Autor wpisu: Arkadiusz Krakiewicz

Programista i właściciel sklepu jednocześnie, dzięki temu rozumie potrzeby osób prowadzących sprzedaż w internecie. Od 2006 związany z eCommerce. Zaczynał jako freelancer tworząc sklepy oraz strony www. Aktualnie zajmuje się: programowanie w PHP, Symfony 2, Android, PrestaShop, osCommerce, OpenCart, WordPress.

24 komentarzy + Dodaj komentarz

  • Piekne dzięki. Bardzo sie przydało.

  • Chętnie zastosowałbym podane w nr 2 radę (nr 1 nie wystarczy niestey), ale jak mam “dodać parametr do adresu miniaturki…” Zupełnie nie mogę tego przeskoczyć. Nigdzie po rozszerzeniu nie mogę wpisać znaku zapytania. Dodam, że w joomli redaguję swoją stronę.

  • Dzięki. Twój pomysł zadziałał. Dwa dni mi to zajęło, a tu taki prosty sposób :-)

  • chciałem zapytać o ten pierwszy przykład – o sekcję head jakiego pliku chodzi? i czy to znaczy że będę musiał wstawić link do miniatury za każdym razem osobno kiedy będe chciał opublikowac wpis?

    • zapomniałem dodać że chodzi mi o wordpress oczywiście

  • Witam.

    Proszę zainstalować plugin:
    https://wordpress.org/plugins/seo-ultimate/

    Automatycznie dodaje do sekcji head informacje o zdjęciu posta.
    To zdjęcie jest pobierane z głównego zdjęcia postu, które się dodaje po prawej stronie na dole w widoku edycji postu.

    Oprócz tego ma masę innych przydatnych opcji.

  • Ja się męczę od dłuższego czasu, aby przy próbie udostępnienia bloga na fb wlasnyzakatek.blogspot.com pokazało mi inne zdjęcie niż desek podłogowych. Opcja debudera nic nie dała niestety. A nie wiem jak inaczej się za to zabrać. Mogę prosić o pomoc, ale tak dla laika – krok po kroku?

  • Mam pytanie dotyczące metatagu og:image. Próbuję dodać duży obrazek na fb, udostępniając video z vimeo. Video się udostępnia, miniaturka też, tylko mała. Specjalnie dodałam jako miniaturkę na vimeo jpg. 1200×675. Ale w object debuggerze, jak wrzucam https://vimeo.com/114682460 pojawia się informacja: og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that’s at least 200x200px and is accessible from Facebook. Image ‘http://i.vimeocdn.com/video/500450449_1280x720.jpg’ will be used instead.

    W zrodle strony na vimeo nie moge znalezc metatagu og:image.

    Co w takiej sytuacji powinnam zrobic?

    Z góry dziękuję za pomoc!

  • Tag og:image jest widoczny w źródle Vimeo.
    CTRL+U, potem CTRL+F wpisujesz og:image i widać:
    <meta property=”og:image” content=”http://i.vimeocdn.com/video/500503597_1280x720.jpg”>

  • Jesteś super! Pomogłeś mi nawet nie wiesz jak bardzo :) Dzięki!

  • Czesc, mam sklep presta shop 1.6.0. gdzie w panelu administratora mam szukac zakładki, podstrony, ścieżki w której mogę wpisac adres minatury na facebooka?

    zgodnie z tym co napisacł Pan Arkadiusz- Brak metatagu og:image w sekcji head

  • Jak to zwykle bywa, wujek Google wygrywa… i radzi:
    https://www.prestashop.com/forums/topic/303359-free-module-facebook-open-graph-tags/

    Skrót “og” oznacza Open Graph. Znaczniki Facebook’a.

  • Ja mam za to inny problem z miniaturami i zastanawiam się czy to też kwestia facebooka czy może mojego szablonu. Przy udostępnianiu działa obrazek, ale nie pokazuje żadnego opisu. Jest tytuł wpisu, zdjęcie i to wszystko. Nie mam pojęcia co z tym zrobić ;/

  • Widzę, że używa Pani systemu BlogSpot, który ma zaimplementowane tagi og:description.
    Widzę w źródle HTML na Pani blogu, iż wszystko powinno działać poprawnie. Myślę, że należy skierować pytanie do obsługi BlogSpot.

  • Witam,
    Na jednej z podstron chcę, aby wyświetlał się inny obrazek niż obecnie przy opcji Share na FB.
    Dodałem wszystkie zanaczniki wymagane dla og.
    Niestety pomimo, że widzę nowe znaczniki na stronie (meta dane), to przy udostępnianiu widzę stare zdjęcie.
    Debug nic nie pomógł. Wspomnę, że używam joomla 2.5.
    A strona na której testuję, to http://www.luxlady.pl/analiza-sylwetki/analiza-sylwetki-test.html
    Chcę, żeby wyświetlała się pani z pierwszego zdjęcia, a wyświetla się z drugiego (zdjęcia widoczne na stronie)
    Pozdrawiam
    Robert

  • A ja wciąż mam problem, którego nie potrafię rozwiązać…
    Na moim fanpage’u, który dopiero co założyłam, gdy tylko cokolwiek z bloga udostępniam pojawia się jedynie ramka z tytułem bloga. Dodałam do tekstu zdjęcie, dodałam miniaturkę i i tak jest fatalnie.

    (Dla przykładu fanpage https://www.facebook.com/pages/Klaudia-Lauk/597006983735684)
    Bardzo będę wdzięczna za podsunięcie rozwiązania!

  • witaj mam problem z mojej strony http://www.najlepszepromocje.com.pl udostepniam post na FB i w podgladzie jest ok ale na FB pokazuje juz bez zdjecia prosze o pomoc i dziekuje

  • Witam,
    Mam klika problemów z moją stroną utworzoną na silniku Prestashop.
    1) Wklejam na FB link do mojej strony http://www.ggbutik.pl i pojawia mi się miniatura (zdjecie jednego z produktow) zawsze to samo. Chciałabym wyswietlac inne zdjecie ale nie wiem jak to zmienic ;/
    2) Wklejam link do okreslonego produktu, np do kardigan zebra a wklejony link nie zachowuje sie tak jak ten z glownej strony czyli lewa kolumna to zdjecie a prawa text, tylko zdjecie zostaje pokazane w całej szerokosci a text ponizej. Jesli zdjecie jest szerokie nie ma z tym problemu ale w przypadku wspomnianego kardiganu zebra, ktory jest raczej zdjeciem poziomym, zdjecie to zostaje wysrodkowane i nic na nim nie widac ;/
    Chciałabym wymusic wyswietlenie pelnego zdjecia w zasadzie bez znaczenia czy ono bedzie na calej szerokosci posta czy tylko w lewej kolumnie a w prawej text.

    Jakieś pomysły? ;/

  • Mam pewną ciekawostkę, wykorzystuję sposób 1 z tym że. Dodaję zdjęcie używam debugera i nic, no dobra to teraz zmieniam zdjęcie na inne i znów debugera używam i co ? Widnieje wcześniejsze zdjęcie… Jakiś pomysł dlaczego tak to działa ?

  • Ja również męczyłem się z miniaturą, testowałem różne rozmiary, ale cały czas przycinało mi moje logo w poziomie i nie było widać adresu. Skorzystałem z 2 metody i teraz pięknie działa! Dziękuję, Hades

  • Dzięki za wpis pomógł mi właśnie czegoś takiego potrzebowałem :)

  • Dziękuję!:D
    Nie mogłam sobie poradzić z tym od kilku dni, bo pozmianiałam wszędzie opis na taki jaki chcę mieć ,a mimo wszystko cały czas wysyłając link przez fb pojawiała się informacja :kolejna strona oparda na wordpressie…! Tego szukałam! Dziękuję bardzo i pozdrawiam!!! :)

  • Dzień dobry, na mojej stronie brak metatagu og:image w sekcji head. Gdzie, a raczej jak mam go dodać w joomla, w artykule czy w plikach html strony??

Dodaj komentarz

Anti-Spam

O mnie

Arkadiusz Krakiewicz
Programista aplikacji webowych dla branży eCommerce. Jednocześnie jako właściciel sklepu zna od "podszewki" potrzeby osób prowadzących sprzedaż w internecie.
W swoich rozwiązaniach stawia na funkcjonalność i wydajność aplikacji pod kątem obsługi klienta.
[X]
Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Plików cookies.
Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.
Więcej w Integracje, Tips & Tricks
Rich Snippets sklep internetowy
Rich Snippets w sklepie internetowym cz.1- Opis ogólny

Na wielu stronach znajdziesz pełne opisy odnośnie rich snippets, ale niewiele z nich podaje konkretne przykłady wraz z kodem HTML...

Zamknij