Żyjemy w czasach, w których praktycznie każdy właściciel sklepu internetowego musi działać z nim również w mediach społecznościowych. Te stanowią furtkę do dodatkowych zasięgów, rozpoznawalności i oczywiście zwiększania sprzedaży. Jak jednak zadbać o to, by pojawiające się w nich treści były dokładnie takie, jakie chce się z nich uczynić? Jak w ogóle je zmienić, skoro duża ich część pobierana jest automatycznie? Z odpowiedzią przychodzi tak zwany Open Graph – świetne narzędzie, o którym nie każdy wie, a które wydaje się być jednym z najbardziej podstawowych w kontekście działań w social mediach.
Open Graph to coś, co pozwoli Ci zachować elastyczność w kontekście obecności w mediach społecznościowych i tworzenia postów w ich obrębie. Dzięki niemu sam zadecydujesz o ostatecznym kształcie publikowanych przez Ciebie treści. To sprawi, że idealnie dopasujesz je do własnych planów marketingowych. Jak jednak działa Open Graph i czy w ogóle warto zawracać sobie nim głowę? Co trzeba wiedzieć na jego temat? O tym wszystkim – w naszym dzisiejszym wpisie.
1. Meta tagi – czym tak właściwie są?
Zanim tak właściwie zajmiesz się tematem Open Graphu, powinieneś przede wszystkim zrozumieć, czym są meta tagi, mocno z nim spokrewnione. Pozwoli Ci być w pełni świadomym tego, co będziesz wdrażać we własnym sklepie internetowym (lub co ktoś wdroży za Ciebie).
Mianem meta tagów określa się specjalne znaczniki (fragmenty kodu), które trafiają do sekcji <head> kodu sklepu internetowego, a które w dużej mierze decydują o – na pierwszy rzut oka – niewidocznych dla klienta aspektach. Chodzi tutaj między innymi o meta title, które decyduje o tytule strony w wyszukiwarce i na pasku przeglądarki, meta description, a zatem opisie wyświetlanym w wynikach wyszukiwania czy viewport, które decyduje o tym, w jaki sposób strona sklepu skaluje się na urządzeniach o różnej przekątnej ekranu.
Choć nie każdy o tym wie, meta tagi są obecne w praktycznie każdym sklepie internetowym i na każdej stronie www. Porządkują ich strukturę i potrafią być pomocne w wielu aspektach.
2. Open Graph – meta tagi dla mediów społecznościowych
Open Graph można śmiało nazwać meta tagiem. Również i on trafia (w różnych formach) do sekcji <head> strony i sklepu internetowego i nie wpływa na ich wygląd i zachowanie z punktu widzenia klienta. Zamiast jednak oddziaływać przede wszystkim na wyniki wyszukiwania w Google (i innych wyszukiwarkach), ma wpływ na prezentację sklepu lub strony w treściach w mediach społecznościowych. Jest powiązany z protokołem początkowo stworzonym z myślą o Facebooku, a obecnie wykorzystywanym również przez inne serwisy społecznościowe (w tym Twitter, LinkedIn oraz Pinterest).
Publikując link w poście na mediach społecznościowych szybko zauważysz, że podstawowe dane na jego temat są pobierane automatycznie. Nie masz więc wpływu na miniaturkę, tytuł strony czy opis (te są zaciągane przez algorytmy). To samo tyczy się linków wrzucanych przez użytkowników, a odsyłających do Twojego sklepu – ich prezentacja tworzona jest automatycznie. Dzięki tagom Open Graph jesteś w stanie ujarzmić ten automatyzm i określić, jak ma wyglądać Twój sklep w mediach społecznościowych. W prosty i szybki sposób, bez większych problemów. Tagi te są więc bardzo istotne z punktu widzenia właściciela sklepu chcącego prężnie działać w social mediach i tam właśnie budować swoją markę. Profesjonalnie i z konsekwencją pod względem stylu.
2.1. W jaki sposób korzystać z tagów Open Graph?
Tagi typu Open Graph działają dokładnie tak, jak wspomniane już przez nas wyżej meta tagi. Oznacza to, że musisz umieścić je w sekcji <head> swojego sklepu internetowego. O ile w przypadku stron statycznych nie powinno to stanowić problemu, o tyle w przypadku tych dynamicznych może generować kilka. Wymaga odpowiedniego rozwiązania, które pozwoli Ci dobierać kolejne parametry względem konkretnych treści – kart wybranych produktów, kategorii czy postów na blogu.
Jeśli prowadzisz sklep internetowy i chcesz czerpać pełnię z tagów Open Graph, musisz zainwestować w rozwiązanie, które umożliwi Ci określanie parametrów tagów z poziomu panelu administracyjnego. O ile bowiem samo ich ręczne wstawianie jest proste, w przypadku rozbudowanego systemu jest też niemożliwe. Trzeba je rozwiązać systemowo, wdrażając odpowiednią modyfikację.
Pamiętaj: nasza firma jest w stanie wykonać taką modyfikację dla Ciebie. Z chęcią pozwolimy Ci szybko i wygodnie dodawać tagi Open Graph do każdej z tworzonych przez Ciebie treści, zapewniając Cię przy okazji, że będą one działały poprawnie.
3. Czy warto korzystać z tagów Open Graph?
Jak zachowuje się współczesny Internauta? Dość przewidywalnie. Jeśli więc widzi wartościową treść lub wzbudzający jego zachwyt produkt w sklepie internetowym, będzie chciał jak najszybciej się nim podzielić. Ty zaś, tworząc tę treść lub budując kartę produktu, również będziesz chciał, by trafiły one do jak najszerszego grona odbiorców, celując przy tym w platformy społecznościowe. W obu tych przypadkach Open Graph będzie Twoim największym sprzymierzeńcem. Pozwoli Ci zadbać o to, by link prowadzący do Twojego sklepu był atrakcyjny i po prostu generował więcej konwersji. Jeśli poprawnie wdrożysz system, będziesz mógł liczyć na:
- większą czytelność i lepszą prezentację linków prowadzących do Twojego sklepu z mediów społecznościowych,
- lepsze zrozumienie Twojego sklepu ze strony mediów społecznościowych, które pozwoli im na propagowanie Twoich treści w trafniejszy sposób,
- możliwość skuteczniejszego zwracania na siebie uwagi (na przykład przez chwytliwe tytuły, obecne w social mediach, ale niekoniecznie na łamach Twojego sklepu),
- lepszą analitykę ruchu pochodzącego z mediów społecznościowych,
- idące w parze z tym wszystkim zwiększone konwersje z social mediów.
Pamiętaj, że bez stosowania Open Graph Facebook, Twitter czy inne media społecznościowe automatycznie pobiorą interesujące ich materiały z Twojego sklepu. Nie będzie to wyglądało tragicznie. Pomyśl jednak, czy człowiek chętniej kliknie w link opatrzony losowym obrazkiem, czy też taki z indywidualnie stworzoną miniaturką zachęcającą do kliknięcia w niego? No właśnie. To samo tyczy się i innych tagów – całe rozwiązanie to zatem bardzo szerokie możliwości marketingowe i wiele potencjalnych korzyści.
3.1. Open Graph a ruch w Twoim sklepie internetowym
Czytając na temat tagów Open Graph z pewnością zastanawiasz się, czy tak właściwie są one w stanie przyczynić się do większej popularności Twojego sklepu internetowego. Odpowiedź jest prosta: zdecydowanie tak. Pod warunkiem, że wykorzystasz je we właściwy sposób. Dzięki nim samodzielnie wykreujesz wizerunek własnego sklepu w mediach społecznościowych. Przez to zaś uczynisz swoje treści atrakcyjniejszymi w ich obrębie. Co więcej, będą też one wzbudzały zaufanie – to z kolei wpłynie nie tylko na ilość kliknięć (a zatem bezpośrednich konwersji), ale też na dalsze udostępnienia. To efekt domino, który jest w stanie świetnie działać i napędzać ruch.
Pamiętaj, że Open Graph nie wpływa bezpośrednio na pozycjonowanie sklepów internetowych. Dodatkowy ruch jednak i owszem – sugeruje bowiem Google, że witryna jest wartościowa i godna lepszego promowania. Wszystko jest zatem powiązane. Warto więc działać na wielu polach – zwłaszcza że zastosowanie tagów Open Graph wiąże się z samymi korzyściami.
4. Podstawowe tagi Open Graph
Choć tagi Open Graph – po przeczytaniu powyższych definicji – mogą Ci się kojarzyć tylko z kilkoma ułatwiającymi życie rozwiązaniami, tak naprawdę istnieje ich naprawdę sporo i pozwalają kontrolować również te rzeczy, o których wcześniej mogłeś nie mieć pojęcia. Poniżej przedstawiamy te tagi, które są najchętniej stosowane i uważane za absolutnie podstawowe. Wszystkie możliwe do wykorzystania tagi można znaleźć na oficjalnej stronie internetowej protokołu.
og:title
Najistotniejszy znacznik Open Graph, który wskazuje na tytuł strony (lub podstrony) Twojego sklepu internetowego. Działa dokładnie tak, jak meta title z głównych meta tagów – z tym jednak, że wskazuje na tytuł wyświetlany wyłącznie w mediach społecznościowych. Nie musi on więc być tożsamy z tytułem podstrony. Pamiętaj, że jeśli nie podasz tego tagu, Facebook (i inne media społecznościowe) będzie pobierał tytuł właśnie z meta title.
Tag og:title powinien oddawać zawartość strony, ale i zachęcać do kliknięcia. Zadbaj o to, by nie był zbyt długi, mając na myśli również to, że będzie wyświetlany na urządzeniach mobilnych. W ich przypadku długość 40 znaków uważana jest za najbardziej optymalną.
- Przykład zastosowania: <meta property=”og:title” content=”Tytuł strony” />
og:url
Ten parametr pozwala Ci określić, jaki adres URL będzie prowadził do konkretnej podstrony. Pozwoli Ci to na przykład tworzyć nieco zmienione treści (lub funkcjonalności czy promocje) z myślą o osobach, które przyszły do Ciebie z mediów społecznościowych. Pamiętaj, że ten adres URL nie zostanie w całości wyświetlony na Facebooku. Ten bowiem skraca adresy w taki sposób, by w poście była wyświetlana wyłącznie domena. Mimo wszystko jednak, przekierowanie będzie wykonywane pod wskazany tutaj URL.
- Przykład zastosowania: <meta property=”og:url” content=”Adres URL” />
og:description
Ten znacznik do złudzenia przypomina meta description. Wyświetla opis konkretnej podstrony. Nie robi tego jednak w wyszukiwarce, a w medium społecznościowym pokroju Facebooka. Pamiętaj, że jeśli ten nie wychwyci tego tagu, będzie się starał posiłkować właśnie meta description.
Warto podawać odrębny opis dla mediów społecznościowych – na przykład taki, który w krótki i zwięzły sposób zachęca do kliknięcia w odnośnik.
- Przykład zastosowania: <meta property=”og:description” content=opis strony” />
og:image
Tag, który przez wielu jest uważany za najistotniejszy – i jest w tym trochę racji. Ludzie przeglądający media społecznościowe są w głównej mierze wzrokowcami. Przygotowując dla nich odpowiednią grafikę, będziesz w stanie zdobyć ich uwagę i przekonać ich do kliknięcia. Miniaturkę możesz stworzyć specjalnie pod media społecznościowe, a jej adres podać właśnie w tym tagu. Jeśli tego nie zrobisz, Facebook (lub inne medium) pobierze automatycznie obraz z podstrony, który uzna za najlepszy. Jeśli nie będzie w stanie tego zrobić, po prostu nie zamieści żadnej grafiki.
- Przykład zastosowania: <meta property=”og:image” content=”adres URL zdjęcia” />
og:type
Za pośrednictwem tego tagu jesteś w stanie przekazać Facebookowi (ale nie tylko), do jakich treści prowadzi link udostępniany z konkretnej podstrony. Zazwyczaj będzie nim po prostu strona internetowa (website), ale możesz chcieć wskazać na artykuł, książkę, grę, film, jedzenie, miasto czy firmę. Zwłaszcza jeśli prowadzisz u siebie bloga i to właśnie tych tematów on dotyka. Co istotne, jeśli chcesz wskazać typ treści na stronę internetową, nie będziesz musiał zamieszczać u siebie tego właśnie tagu. Facebook automatycznie i domyślnie oznacza wszystkie odnośniki jako takie kierujące do strony internetowej.
- Przykład zastosowania: <meta property=”og:type” content=”wybrany przez Ciebie typ” />
5. Zaawansowane tagi Open Graph
Jeżeli podchodzisz do prowadzenia własnych kanałów social media na poważnie, powinieneś również wziąć pod uwagę zastosowanie bardziej zaawansowanych tagów OG. Większość z nich nie znajduje swojego bezpośredniego odzwierciedlenia w wyglądzie publikowanych przez Ciebie postów. Ich stosowanie odczujesz jednak wyraźnie – na przykład w momencie, gdy swoje treści będziesz chciał skutecznie promować. Poniżej przedstawiamy kilka z tych tagów, które zdecydowanie Ci się przydadzą.
fb:app_id
Jest to tag ekskluzywny dla platformy społecznościowej Facebook. Pozwala Ci połączy się z jego aplikacją i odblokować sobie dostęp do statystyk dotyczących konkretnego adresu URL (sobie, ale i wszystkim innym administratorom tej aplikacji). Co więcej, może też dostarczyć dodatkowych danych dla dodatkowych wtyczek, z których możesz korzystać.
- Przykład zastosowania: <meta property=”fb:app_id” content=”” />
og:audio oraz og:video
Te tagi są przydatne, jednak w pełni opcjonalne. Dzięki nim jesteś w stanie dodać do danego linku dodatkowe elementy wideo lub audio. Sposób ich wyświetlania zależy od konkretnej platformy społecznościowej i nie zawsze są one wykorzystywane. Jeżeli jednak je podasz, zyskasz dodatkowe opcje promowania, ale też zwiększysz widoczność Twoich postów w niektórych miejscach, w których są one wyświetlane. W tagu tym zawrzyj adres URL do pliku multimedialnego.
- Przykłady zastosowania: <meta property=”og:audio” content=”” />, <meta property=”og:video” content=”” />
og:locale
Ten tag pozwala wskazać, w jakim języku przygotowana jest konkretna podstrona sklepu internetowego. Jako że Facebook jako domyślny uważa język angielski, zdecydowanie powinieneś tutaj wyprowadzić go z błędu. Jeśli swój sklep prowadzisz w kilku wersjach językowych, zadbaj o to, by ten tag odzwierciedlał zawartość konkretnej podstrony.
- Przykład zastosowania: <meta property=”og:locale” content=”pl_PL” />
og:site_name
W tym tagu jesteś w stanie określić nazwę sklepu internetowego. Pamiętaj jednak, że nie chodzi tutaj o tytuł konkretnej podstrony. Do określania go służy inny tag. Przyda Ci się to, jeśli będziesz chciał ją promować w ramach mediów społecznościowych.
- Przykład zastosowania: <meta property=”og:site_name” content=”Twoja nazwa” />
6. Jak sprawdzić poprawność wdrożenia tagów Open Graph?
Jeśli już wdrożyłeś tagi Open Graph w obrębie swojego sklepu internetowego, powinieneś upewnić się, że działają one zgodnie z założeniami. Dopiero wtedy będziesz miał pewność, że tworzone przez Ciebie treści będą przedstawiane w social mediach w atrakcyjny sposób. Zgodnie z Twoimi oczekiwaniami. Jak sprawdzić więc poprawność Twojego rozwiązania?
Po pierwsze – możesz to zrobić czysto empirycznie. Postaraj się więc udostępnić post z odnośnikiem prowadzącym do Twojego sklepu. Czy to z własnego prywatnego profilu, czy też z oficjalnej strony w portalu społecznościowym. Już na etapie jego tworzenia powinien pojawić się podgląd pokazujący, jak ten odsyłacz finalnie będzie wyglądał.
Powyższe rozwiązanie nie zawsze się sprawdza. Może bowiem pobierać stare dane – zwłaszcza w przypadku podstron, którymi ktoś już wcześniej się dzielił w ramach sieci społecznościowej. Dlatego też warto sięgnąć tutaj po narzędzia dodatkowe, stworzone typowo z myślą o sprawdzaniu poprawności tagów Open Graph.
Open Graph Facebook
W przypadku Facebooka idealnym narzędziem tego typu jest Facebook Sharing Debugger. Jest to oficjalna aplikacja webowa, która nie tylko sprawdzi, jak będzie wyglądał post z odnośnikiem do Twojego sklepu, ale też podpowie Ci, w jaki sposób poprawić ewentualne błędy w jego wyświetlaniu. Co ciekawe, umożliwi Ci też manualne ponownie przewertowowanie podstrony, odświeżając jej wygląd w tym właśnie medium społecznościowym.
Podobne rozwiązania służące walidacji linków posiadają również inne platformy social media. Możemy więc skorzystać z Validatora od Twittera, URL Debuggera od Pinteresta oraz Post Inspectora od LinkedIn. Każde z tych narzędzi działa w podobny sposób – wystarczy więc wkleić adres URL, by szybko zobaczyć, jak będzie się on finalnie wyświetlał w konkretnym medium społecznościowym.
Jeśli żadne z powyższych narzędzi nie wydaje się dla Ciebie być tym wygodnym, zawsze możesz również sięgnąć po specjalną wtyczkę do przeglądarki Google Chrome. Nosi ona nazwę Open Graph Preview. Pozwala spojrzeć, jak w mediach społecznościowych będzie się prezentować strona, na której aktualnie przebywasz.
7. Podsumowanie
Tagi Open Graph stanowią jedną z podstaw kontrolowanej działalności sklepu internetowego w zakresie mediów społecznościowych. Choć zdają się być czymś minimalistycznym (i z technicznego punktu widzenia takie właśnie są), drzemie w nich duża moc. Powinieneś wykorzystać ją na własną korzyść. Dzięki zastosowaniu ich będziesz samodzielnie kontrolował wizerunek własnego sklepu w social media. To z kolei wpłynie na generowaną przez niego sprzedaż, zainteresowanie marką oraz to, w jaki sposób będą postrzegać ją odbiorcy. Im wcześniej więc zdecydujesz się na ich zastosowanie, tym szybciej zaczniesz czerpać z nich korzyści.
Kompleksowe rozwiązanie
Nasza firma jest w stanie zaimplementować w Twoim sklepie rozwiązanie pozwalające w pełni wykorzystać moc tagów Open Graph. Dzięki niemu będziesz mógł zarządzać nimi z poziomu panelu administracyjnego – w kontekście każdego rodzaju treści, jakie stworzysz. Nasz moduł jest prosty, ale i skuteczny oraz dokładnie przetestowany. Jeśli zaś wciąż nie masz sklepu internetowego, z chęcią zajmiemy się jego przygotowaniem. Już na start będzie on wyposażony we wsparcie dla Open Graph, ale i szereg innych funkcjonalności dobranych idealnie pod Ciebie i Twój biznes. Zainteresowany? Koniecznie przeczytaj case studies naszych dotychczasowych klientów, zapoznaj się z pełną naszą ofertą i poznaj nas bliżej. Później zaś skontaktuj się z nami – z chęcią rozwiejemy Twoje wątpliwości, wyjaśnimy nieścisłości, podpowiemy rozwiązania idealne dla Ciebie i wycenimy Twój sklep. Całkowicie za darmo. Możesz też sięgnąć po nasz konfigurator po szybszą wycenę. Dołącz do grona osób prowadzących świetnie zoptymalizowany pod sprzedaż sklep internetowy już teraz!
Open Graph to specjalne meta tagi w kodzie strony, przeznaczone dla mediów społecznościowych. Szczególnie potrzebne są dla (Facebooka, Twittera, LinkedIna i Pinteresta). Pomagają spersonalizować wygląd treści udostępnianych na tych portalach.
Open Graph zostały specjalnie stworzone dla portali społecznościowych. Dzięki nimi nasze artykuły będą częściej udostępniane. Co za tym idzie, pozyskamy wartościowe linki zwrotne a to jeden z najważniejszych czynników rankingowych Google.