W artykule przeczytacie o samym protokole Open Graph oraz o jednym z pluginów, Recommendations Bar (tł. pasek rekomendacji), który korzysta z tego protokołu i wspiera ruch na stronie docelowej poprzez publikację linków na profilach użytkowników na Facebooku. Rekomendowanie treści z wykorzystaniem Facebooka jest o wiele bardziej rozwinięte niż rekomendacje w Grafie Wiedzy w Google. Facebook pozwala, wręcz zachęca do integracji stron internetowych, z protokołem który został przez Facebook opracowany – Open Graph Protocol.
Black Friday 2024 - wyprzedaż programów SEO
The Open Graph Protocol – wprowadzenie
Protokół Open Graph pozwala każdej stronie internetowej stać się obiektem rozszerzonym grafie społecznościowym. Facebook używa Open Graph aby umożliwić każdej stronie, stać się takim samym obiektem jakie funkcjonują w sieci Facebook.
W czasie gdy istnieje wiele różnych technologii i schematów i mogą być łączone ze sobą, nie istnieją pojedyncze rozwiązania które dostarczają wystarczających informacji aby prezentować dowolną stronę internetową jako rozszerzony obiekt grafu społecznościowego. Protokół Open Graph korzysta z istniejących technologii i daje twórcom stron internetowych możliwość wdrażania tylko jednego rozwiązania. Łatwość wdrożenia jest kluczowym celem dla jakiego powstał protokół Open Graph.
Podstawy
Przekształcenie strony internetowej w obiekt grafu społecznościowego wymaga dodania podstawowych metaznaczników do strony. Podstawowa wersja protokołu Open Graph bazuje na RDFa, co oznacza, że wszystkie dodatkowe informacje umieszczane są jako znaczniki <meta> w sekcji <head> strony internetowej. Istnieją cztery wymagane właściwości jakie powinna mieć każda strona:
- og:title – to tytuł obiektu, pod jakim powinien występować w grafie, np. „Twierdza”,
- og:type – Typ obiektu, np. „video.movie”. W zależności od zdefiniowanego typu, inne właściwości mogą być wymagane,
- og:image – adres URL do grafiki, która powinna reprezentować obiekt w grafie,
- og:url – bezwzględny adres URL prowadzący do obiektu, który będzie zapisany jako stały numer ID w grafie, np. http://www.imdb.com/title/tt0117500li>
Jako przykład wykorzystania tych czterech podstawowych właściwości można podać film Twierdza znajdujący się w serwisie IMDB.com
<html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
Dodatkowe metaznaczniki
Protokół Open Graph oferuje dodatkowe metaznaczniki, które nie są niezbędne, ale wzbogacają witrynę o dodatkowe informację:
- og:audio – adres URL do pliku który towarzyszy obiektowi,
- og:description – jedno lub dwa zdania opisujące obiekt,
- og:determiner – wyłącznie przydatne w języku angielskim, umożliwia wstawienie przedrostka a, an lub the przed tytułem obiektu,
- og:locale – informuje o lokalizacji geograficznej w postaci język_TERYTORIUM, domyślna wartość en_US,
- og:locale:alternate – zbiór innych lokalizacji w których strona jest dostępna,
- og:site_name – jeśli obiekt jest częścią większej witryny, to ta wartość powinna zawierać nazwę dla całej witryny,
- og:video – adres URL do pliku video, który uzupełnia informacje o obiekcie
Przykład wykorzystania dodatkowych metaznaczników zamieszczony jest poniżej:
<meta property="og:audio" content="http://example.com/bond/theme.mp3" /> <meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /> <meta property="og:determiner" content="the" /> <meta property="og:locale" content="en_GB" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="es_ES" /> <meta property="og:site_name" content="IMDb" /> <meta property="og:video" content="http://example.com/bond/trailer.swf" />
Właściwości ustrukturalizowane
Niektóre właściwości mogą posiadać dodatkowe metadane przypisane do nich. Są one określone w ten sam sposób jak właściwości i zawartość, właściwość posiada dodatkowy : (średnik).
Właściwość og:image ma dodatkowe ustrukturalizowane właściwości:
- og:image:url – identyczne z og:image,
- og:image:secure_url – alternatywny URL wykorzystywany na stronach wymagających połączenia szyfrowanego,
- og:image:type – określa typ MIME dla grafiki,
- og:image:width – szerokość podana w pikselach,
- og:image:height – wysokość podana w pikselach.
Przykład pełnej informacji o obrazie wygląda następująco:
<meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" />
Właściwość og:video ma identyczne dodatkowe ustrukturalizowane znaczniki jak og:image. Przykład poniżej:
<meta property="og:video" content="http://example.com/movie.swf" /> <meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video:width" content="400" /> <meta property="og:video:height" content="300" />
Znacznik og:audio posiada tylko trzy pierwsze wymienione właściwości, ponieważ wymiary nie dotyczą dźwięku. Przykład poniżej:
<meta property="og:audio" content="http://example.com/sound.mp3" /> <meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /> <meta property="og:audio:type" content="audio/mpeg" />
Ciągi właściwości
W momencie gdy znacznik może mieć wiele wartości, zwyczajniej umieszcza się kilka razy ten sam znacznik <meta> na stronie. Pierwszy znacznik, licząc od góry, otrzymuje priorytet, w sytuacji konfliktu.
<meta property="og:image" content="http://example.com/rock.jpg" /> <meta property="og:image" content="http://example.com/rock2.jpg" />
Właściwości ustrukturalizowane należy umieszczać zaraz za znacznikiem głównym. Gdy następny znacznik źródłowe jest przetwarzany, właściwości strukturalizowane są uważane za zakończone i odczyt następnych jest przypisywany kolejnemu znacznikowi głównemu. Na przykład:
<meta property="og:image" content="http://example.com/rock.jpg" /> <meta property="og:image:width" content="300" /> <meta property="og:image:height" content="300" /> <meta property="og:image" content="http://example.com/rock2.jpg" /> <meta property="og:image" content="http://example.com/rock3.jpg" /> <meta property="og:image:height" content="1000" />
oznacza, że na stronie są trzy obrazy graficzne, rozmiar pierwszego wynosi 300×300, drugi nie ma zdefiniowanych parametrów, trzeci posiada wysokość 1000px.
Protokół Open Graph posiada kilka zdefiniowanych typów obiektów, które można nim opisać. Do zdefiniowanych typów należą:
- Muzyka
- Utwór
- Album
- Playlista
- Stacja radiowa
- Wideo
- Film
- Serial telewizyjny
- Program telewizyjny
- Artykuł
- Książka
- Osoba
Jeżeli strona internetowa nie zostanie przypisana do jednego z wyżej wymienionych typów obiektów, to jest traktowana jako typ website. Poniżej jest krótki film instruktażowy, jak rozpocząć pracę z Open Graph.
Pasek rekomendacji (Recommendations Bar)
Od połowy 2012 roku, Facebook uruchomił Pasek rekomendacji (Reacommendations Bar), nowe narzędzie w jego sieci społecznościowej, które pomaga użytkownikom znaleźć artykuły, na podstawie tego co ich znajomi polubili i podzielili się ze strony internetowej.
Gdy osoba czyta artykuł na stronie internetowej, małe okienko na dole ekranu pojawia się i wyświetla rekomendowane artykuły i zachęca do polubienia ich (Rysunek 1). Rekomendacja odbywa się na podstawie tego co znajomi tej osoby wcześniej polubili lub udostępnili w sieci społecznościowej.
Rys. 1. Pasek rekomendacji na stronie silesiasem.pl
Podobnie jak działa przycisk Lubię To, gdy osoba skorzysta z rekomendacji i przejdzie do polecanego artykułu, to informacja o tym jest publikowana w jej profilu społecznościowym oraz w kanale wiadomości znajomych tej osoby (Rysunek 2). Tak udostępniony link do strony, staje się widoczny dla innych osób, które mogą nim podążyć. W tym miejscu trzeba podać najważniejszą informacją z punktu widzenia użytkownika korzystającego z tego paska. Ten użytkownik nie zobaczy tej aktywności w swoim strumieniu.
Rys. 2. Strumień aktywności użytkownika Facebook, który skorzystał z paska rekomendacji
Dodanie Recommendations Bar do strony nie różni się znacząco od dodawania każdego innego elementu rozszerzającego właściwości strony internetowej w oparciu o narzędzie udostępniane przez Facebook. Należy wkleić w kodzie witryny, fragment kodu zdefiniowany przez Facebook w następujący sposób.
<div data-href="https://www.przyklad.pl/artykul" data-read-time="10" data-site="http://www.przyklad.pl"></div>
Recommendations Bar ma kilka parametrów, dzięki którym możemy zmodyfikować jego zachowanie. Do najważniejszych należy parametr trigger, za pomocą którego możemy określić kiedy okienko z rekomendacjami będzie się otwierało. Dostępne są następujące wartości: onvisible – gdy użytkownik przewinie stronę do miejsca, w którym umieściliśmy kod paska; X% – gdy użytkownik przewinie określony procent wysokości naszej strony; manual – gdy użytkownik kliknie przycisk służący do rozwijania paska. Za pomocą parametru read_time możemy również określić czas, po którym pasek automatycznie się rozwinie – minimum to 10 sekund, domyślnie jest to pół minuty. Wartym wspomnienia parametrem jest num_recommendations, za pomocą którego możemy ustalić ilość wyświetlanych rekomendacji (domyślnie 2, maksymalnie 5).
Wdrożenie Facebook Open Graph i paska rekomendacji
Wdrożenie na witrynie internetowej paska rekomendacji, który będzie dobierał treści dla czytelnika zgodnie z tym co wcześniej polubili i udostępnili na tej witrynie, znajomi tego użytkownika wymaga realizacji kilku kroków.
Pierwszy krok to integracja witryny internetowej z protokołem Open Graph. Wcześniej omówione właściwości należy dodać do witryny internetowej, aby mogła stać się obiektem w sieci skocznościowej Facebook. Dla popularnego systemu CMS WordPress powstało, kilka rozwiązań dedykowanych, które automatycznie oznaczają treści wymaganymi znacznikami. Zastosowana wtyczka WP Facebook Open Graph protocol dodaje automatycznie znaczniki do każdej strony zbudowanej przy użyciu CMS WordPress, przy minimum wymaganej konfiguracji (Rysunek 3).
Rys. 3. Panel konfiguracji protokołu Open Graph w CMS WordPress
Drugim krokiem jest utworzenie aplikacji na Facebook (Rysunek 4), która będzie zbierała informacje o liczbie kliknięć w artykuły, które pojawią się jako rekomendowane na witrynie. Ta sama aplikacja, wyświetla też informacje w strumieniu danych pochodzących od użytkownika, o tym że właśnie z tej aplikacji skorzystał i jaki artykuł polubił.
Rys. 4. Aplikacja utworzone z wykorzystaniem Facebook, wyposażona w elementy Open Graph.
Utworzona aplikacja powinna mieć prawo do wyświetlania rekomendacji tylko z obszaru jednej domeny oraz ustawioną co najmniej jedną czynność Read na obiekcie Article. Po wprowadzeniu niezbędnych kluczy API ze strony Facebook do wtyczki obsługującej Open Graph w WordPress i dodaniu do kodu źródłowego strony, znacznika HTML z paskiem rekomendacji, okienko rekomendacji zacznie się wyświetlać na stronie i zachowywać zgodnie ze zdefiniowanymi parametrami.
Zgodność wprowadzone kodu z protokołem Open Graph, można sprawdzić korzystając z zewnętrznych narzędzi testujących. Facebook posiada narzędzie do debuggowania pod adresem http://developers.facebook.com/tools/debug (Rysunek 5).
Wynik testu przeprowadzony przez narzędzie na testowanej stronie jest w 100% pozytywny.
Rys. 5. Narzędzie do testowania poprawności zainstalowanego protokołu
Ten sam protokół Open Graph jest również interpretowany przez Google. Narzędzie do testowania danych strukturalnych jest dostępne pod adresem http://www.google.com/webmasters/tools/richsnippets
Rys. 6. Narzędzie do testowania danych strukturalnych.
Na rysunku 6, w dolnej części widać fragment wyniku zwróconego przez narzędzie do testowania danych strukturalnych. Protokół Open Graph został poprawnie odczytany i zinterpretowany przez wyszukiwarkę Google.
Podsumowanie
Systemy rekomendacji opracowane przez firmy Google i Facebook, są jeszcze w początkowej fazie ich działania. Jako aktywni użytkownicy możemy korzystać w pełni na tą chwilę, jedynie z rekomendacji opartych o sieć społecznościową Facebook. Udane wdrożenia systemów rekomendacji podnoszą częstotliwość odwiedzin na stronie oraz rośnie zaufanie czytelników strony do publikowanych treści.
Istotne znaczenie ma to, że rekomendacje są oparte o rzeczywiste zachowania użytkowników, których posiadamy w swoich bliskich kręgach znajomości, co również podnosi zaufanie jakim jesteśmy skłonni obdarzyć rekomendowaną treść.
Zapisz się do newslettera wypełniając pola poniżej. Będziesz na bieżąco ze wszystkimi wydarzeniami związanymi z Silesia SEM i informacjami o marketingu internetowym w sieci. Nie spamujemy.
Zostanie wysłany do Ciebie e-mail potwierdzający: przeczytaj zawarte w nim instrukcje, aby potwierdzić subskrypcję.
Artur Strzelecki
Ostatnie wpisy Artur Strzelecki (zobacz wszystkie)
- Black Friday i Cyber Monday w SEO – promocje - 29 listopada 2024
- Czy Google staje się coraz gorsze? Nowe badanie rzuca światło na jakość wyników wyszukiwania - 27 listopada 2024
- Jak seo poisoning zagraża małym i średnim firmom – nowe wyzwania i rozwiązania - 19 listopada 2024
Super wpis i bardzo użyteczny. Wypróbuję go dzisiaj wieczorem.
Za niedługo już wszyscy będą wiedzieć wszystko, nawet jak nie udostępniasz tego świadomie:). Dobry artykuł:)
Bardzo fajny i precyzyjny wpis (przynajmniej takie odniosłem pierwsze wrażenie). Od dłuższego czasu zastanawiałem się nad wprowadzeniem tego typu danych do swoich podstron, ale jakoś nie mogłem się zebrać. Dzięki podanym instrukcjom i przykładom (mam nadzieję) będzie to łatwiejsze. Oby więcej takich wpisów! 🙂
Witam, mam problem z OpenGraph. Jak przesyłam link poprzez facebooka to nie ma avataru strony tylko zwykły link… Co może być nie tak?