Open Graph - zadbaj o wygląd linków
Jeżeli prowadzisz marketing swojej strony/sklepu internetowej czy też aplikacji na pewno chciałbyś uzyskać jak największą liczbę odbiorców. Udostępnianie linków na portalach społecznościowych może jeszcze efektywniej pomóc Ci uzyskać klientów, jak to zrobić? Wystarczy że zastosujesz Open Graph!
Czym jest Open Graph (OG)?
Mówiąc najprościej jest to protokół stworzony przez Facebooka wykorzystujący odpowiednie znaczniki meta umieszczane w sekcji head strony. Dzięki tym znacznikom udostępniane przez nas treści wyświetlają się w odpowiednim formacie odbiorcom na portalach społecznościowych takich jak: Facebook, Twitter, Google+, Pinterest. Implementacja tego protokołu sprawia, iż nasza strona staje się obiektem grafu społecznego.
Link przed i po implementacji protokołu Open Graph
Przykładowy obraz udostępnionego linku do produktu na sklepie bez implementacji Open Graph:
Przykładowy obraz udostępnionego linku do produktu na sklepie z implementacją Open Graph:
Zastosowanie protokołu Open Graph zwiększa nawet trzykrotnie ruch na stronie
Adres strony, który udostępniamy na portalu społecznościowym, w którym zastosowano Open Graph, zdecydowanie poprawia interakcję z użytkownikiem. Określając tylko podstawowe tagi jak: tytuł, obraz, opis, typ oraz adres strony nasz link do strony staje się zdecydowanie atrakcyjniejszy i bardziej zaufany dla użytkownika. Użytkownicy chętniej klikają w linki, które przedstawiają grafikę oraz opis określający treść strony.
Podstawowe znaczniki
Na oficjalnej stronie protokołu http://ogp.me/ znajdziemy znaczniki, które możemy wykorzystać na naszej stronie. Podstawowe znaczniki przedstawione w dokumentacji to:
og:title - tytuł twojego obiektu, np “Open Graph - zadbaj o wartościowe treści i zwiększ ruch na stronie”
og:type - typ twojego obiektu np “website”, “article”, “news.publishes”, “product.group”, “product.item”
og:image - obraz reprezentujący twój obiekt
og:url - kanoniczny url twojego obiektu
Przykład wykorzystania jednego ze znaczników z wykorzystaniem atrybutów property oraz content:
<meta property="og:title" content="Open Graph - zadbaj o wartościowe treści i zwiększ ruch na stronie" />Na oficjalnej stronie jest przedstawione wiele innych znaczników, które możemy zastosować. Niektóre ze znaczników jak og:image mogą posiadać dodatkowe metadane, które piszemy po znaku “:”. Przykład poniżej:
<meta property="og:image" content="https://rekinysukcesu.pl/image.jpg" />
<meta property="og:image:secure_url" content="https://secure.rekinysukcesu.pl/image.jpg" />
<meta property="og:image:height" content="250" />
<meta property="og:image:width" content="250" />
<meta property="og:image:alt" content="Opis zdjęcia" />
<meta property="og:image:type" content="image/jpeg" />
Testowanie implementacji Open Graph
Istnieje kilka narzędzi, dzięki którym jesteśmy w stanie przetestować naszą stronę i sprawdzić jak będzie wyglądać link, zanim udostępnimy go na portalu społecznościowym.
Przede wszystkim polecamy narzędzie do debugowania oferowane przez Facebooka. Aby z niego skorzystać, należy być zalogowanym na Facebooku. Narzędzie to przedstawia nam wygląd linku oraz to co jest zawarte w uzupełnionych znacznikach meta.
https://developers.facebook.com/tools/debug/Podsumowanie
Zastosowanie protokołu Open Graph nie jest skompikowane, można nawet twierdzić, że jest bardzo proste. Jeżeli chcesz, aby twoje linki zwracały uwagę potencjalnych klientów/odbiorców to warto poświęcić chwilę na implementację meta znaczników Open Graph na własnej stronie i czekać na efekty!
