Wrzucasz link do artykułu z bloga na Facebooka, a tu bang! Wyświetla Ci się inne zdjęcie albo nie wyświetla się wcale. Próbujesz jeszcze raz, Facebook mieli, mieli, w końcu wyświetla znowu inne zdjęcie. Inne, ale nie to, które chcesz. Możesz dodać zdjęcie ręcznie, ale jeśli puszczasz link w świat social mediów, to nad tym nie zapanujesz. Nikt nie będzie się przejmował tym, że zdjęcie jest inne. Możesz mieć nad tym jednak władzę i wystarczy parę kroków, aby to zrobić.

Open Graph, czyli co za tym wszystkim stoi?

Zanim przejdziemy do działania, kilka słów wyjaśnienia. Skąd Facebook wie (albo nie wie), co ma wyświetlać? Google ma swoje roboty – to już pewnie wiesz. Wiesz, że Facebook też ma? 🙂 Po dodaniu linka na Facebooka, a jeszcze przed kliknięciem opublikuj, boty wchodzą na Twojego bloga i próbują się połapać, o co chodzi, co jest czym. Jakie zdjęcie, jaki tytuł, jaki opis mają sobie pobrać, czasem się gubią. Aby było im łatwiej, stworzono właśnie protokół Open Graph, czyli sposób opisu danych. To swego rodzaju instrukcja dla botów Facebooka, jak i co mają wyświetlać, jak strona będzie w tym serwisie widoczna. Uff, mam nadzieję, że nie zagmatwałam. 🙂

Co zrobić, aby Facebook pobierał odpowiedni obrazek z bloga?

To teraz krok po kroku. Ja dopiero niedawno to ujarzmiłam, przy okazji tworzenia mini-ebooka. Pokażę Ci to na tym właśnie przykładzie.

WordPress SEO by Yoast i Open Graph

Z pomocą przychodzi oczywiście, a jakże by inaczej, moja ulubiona wtyczka WordPress SEO by Yoast, której konfiguracji pisałam. W jej ustawieniach jest zakładka Społeczności. W podzakładce Facebook ustaw Włącz dodawani danych Open Graph.

I to powinno wystarczyć – Facebook będzie sobie pobierał zdjęcie oraz tytuł i opis z treści wpisu.

Czasem jednak to nie wystarczy.

Bo masz np. kilka zdjęć w artykule albo chcesz, aby tytuł na Facebooku był inny niż ten na blogu. Tak też da się zrobić! 🙂

Ustawianie Open Graph dla konkretnej strony/wpisu na blogu

  1. Wejdź w dany wpis, daną stronę na blogu. (musisz mieć zainstalowaną wtyczkę WordPress SEO by Yoast). Znajdź panel wtyczki.

 

Zrzut ekranu 2016-04-12 o 17.23.29

 

2. Wybierz trzecią opcję (tę pod kołem zębatym), aby zobaczyć pola do wypełnienia. Będzie to tytuł, który wyświetli się na Facebooku, opis oraz zdjęcie. Wtyczka rekomenduje, aby zdjęcie miało wymiary 1200 x 628 px. Wypełnij je według uznania. Ja zrobiłam to tak, jak poniżej.

 

Zrzut ekranu 2016-04-12 o 17.34.21

 

3. Zapisz i….prawie gotowe!

Sprawdź, jak będzie wyświetlał się post – użyj Facebook Developers Debug

Wyświetlanie poprawnej zawartości na Facebooku – użyj Facebook Developers Debug. To narzędzie sprawdzi, czy wszystko działa poprawnie, pokaże Ci też, jak będzie wyświetlany konkretny post na Facebooku.

Wklej tam adres artykułu i kliknij Debug.
Zrzut ekranu 2016-04-12 o 17.35.46

 

Facebook naśle teraz na Twojego bloga swoje boty i zobaczy, jak sobie radzą z odczytywaniem meta danych. 🙂

Może być tak, że dane te będą różniły się od tych, które przed chwilą wprowadziłeś (będą się np. wyświetlały stare dane, stare zdjęcie, opis). Jeśli tak – wróć na górę strony tego narzędzia i kliknij Fetch new scrape information – dajesz sygnał botom, aby się trochę bardziej wysiliły i znalazły aktualne informacje i…Powinno działać! 🙂

Tak wygląda to w Facebook Debug Developers:

 

Zrzut ekranu 2016-04-12 o 17.40.02

 

A tak na Facebooku 🙂

 

Zrzut ekranu 2016-04-12 o 17.41.24

 

 

[cherry_hr]

[cherry_icon icon=”icon: fa fa-arrow-right” size=”20″ align=”none”][/cherry_icon] A skoro o mini-ebooku mowa, to możesz go mieć! Wystarczy, że zapiszesz się na newsletter Wtorki z blogiem. Jeśli jesteś już zapisany na Wtorki z blogiem, to otrzymasz go za chwilę 🙂

 

ebook

 

Przeczytaj poprzedni wpis:
Share Week 2016

Ja to zawsze wszystko na ostatnią chwilę. 2 dni zostały, aby zgłosić blogi, które się czyta, lubi, szanuje i pewnie,...

Zamknij