Social media to istotny kanał, który może pozyskiwać sporo ruchu na Twoją stronę internetową. Dlatego warto zadbać między innymi o to, jak w mediach społecznościowych prezentują się udostępniane treści i linki. Kontrolę nad nimi zapewnia protokół open graph. Dowiedz się więcej na jego temat z tego artykułu i bądź o krok przed konkurencją.
Co to jest open graph i jaka jest jego historia? Najważniejsze informacje
Zdarzyło Ci się pewnie nie raz widzieć post w social mediach, w którym udostępniany jest link do strony, na której open graph nie został wdrożony. Cóż, takie posty nie wyglądają najlepiej... Zdecydowanie nie zachęcają do kliknięcia linku, ponieważ podgląd wyświetla przypadkowy fragment strony. Wszystko może zmienić kilka linijek kodu. Przedstawiam Ci open graph!
Meta tagi open graph to protokół internetowy, który został pierwotnie stworzony i wprowadzony przez Facebooka w 2010 roku w celu ujednolicenia wykorzystania metadanych na stronie internetowej do reprezentowania zawartości strony (Facebook Open Graph). Wkrótce w ślad za Facebookiem poszły inne media społecznościowe.
Najprościej mówiąc, stosując open graph, możesz powiedzieć portalom społecznościowym, takim jak Facebook, Twitter, Pinterest, LinkedIn i Google+, jakie informacje mają być wyświetlane, gdy Ty lub ktokolwiek inny udostępni link z Twojej witryny.
Wiesz już, co robi open graph. Pora mu się przyjrzeć od strony technicznej. Z tego punktu widzenia jest to po prostu kawałek kodu, znajdujący się w sekcji <head> danej strony internetowej. Poprzedzony jest właściwością „og:”.
W przeciwieństwie do innych meta tagów „og:” nie umieszcza się dla robotów wyszukiwarek. Celem tagu jest poinformowanie portalu społecznościowego, co ma zostać wyświetlone podczas dodawania linka do portalu. Podobnie jak wyszukiwarki odwiedzają Twoją witrynę i szukają danych potrzebnych do wyświetlenia witryny w wynikach wyszukiwania, portale społecznościowe robią to samo, szukając własnych tagów.
Podstawowe (obowiązkowe) tagi open graph
Wiesz już, czym są tagi open graph, pora poznać ich dostępne rodzaje! Spośród wszystkich, tylko cztery są wymagane, aby portal społecznościowy „zrozumiał” Twoją stronę, ale jest też kilka dodatkowych, które bywają pomocne. Przyjrzyjmy się tym najważniejszym.
og:title
Podobnie jak metatag title, w którym informujesz wyszukiwarki o tytule SEO swojej strony, og:title to jej tytuł, który powinien wyświetlać się w mediach społecznościowych.
Twój og:tytuł powinien być jasny, bez oznaczenia marki ani wzmianki o samej domenie. Najlepiej, aby jego długość nie przekraczała 60 znaków.
Przykład użycia:
<meta property="og:title" content="Po co wdrażać open graph na stronie" />
og:url
Ten tag informuje o tym, na jaką stronę zostanie odesłany użytkownik po kliknięciu danego postu. Użyj kanonicznego adresu URL, to pomoże zliczać wszystkie udostępnienia, polubienia itd.
Przykład użycia:
<meta property="og:url" content="adres URL strony" />
Czytaj również: Link kanoniczny - czym jest i kiedy go stosować?
og:image
Ten tag odpowiada za to, jaki obrazek będzie powiązany z publikowanym contentem. Zauważ, że jest to prawdopodobnie najbardziej istotny tag open graph, ponieważ zajmuje najwięcej miejsca w kanale społecznościowym. Pamiętaj, aby o niego zadbać, bo w przeciwnym wypadku portal sam wybierze losowe zdjęcie z adresu URL, a może to być baner reklamowy, czy inna niezrozumiała, nieistotna dla przeglądających social media grafika.
Przykład użycia:
<meta property="og:image" content="adres URL grafiki" />
og:type
Ten tag określa typ udostępnianego obiektu (np. artykuł, strona internetowa, wideo). Pełną listę typów obiektów znajdziesz TUTAJ.
Przykład użycia:
<meta property="og:type" content="article" />
og:description
To tag podobny do meta description, czyli opisu, jaki tworzysz dla wyszukiwarek. Możesz stworzyć oryginalny tekst lub użyć tego, którego używasz w meta description, aby wyświetlał się w mediach społecznościowych. Facebook zaleca, aby opis miał 2-4 zdania, ale lepiej pisać krótsze opisy, aby nie zostawały przycinane.
Przykład użycia:
<meta property="og:description" content="Przeczytaj, czym są tagi open graph, jak za ich pomocą wyróżnisz się w social mediach i zwiększysz ruch na stronie" />
Szczegóły na temat wszystkich rodzajów tagów open graph możesz znaleźć np. w oficjalnej dokumentacji Facebooka.
Dlaczego warto wykorzystywać tagi open graph? Co da Ci ich implementacja?
Pomimo tego, że stosowanie tagów open graph nie jest traktowane jako czynnik rankingowy i nie wpływa bezpośrednio na poprawę pozycji strony w wyszukiwarce, warto z nich korzystać. Dlaczego? Ponieważ odpowiednio zoptymalizowane wpisy na mediach społecznościowych na pewno będą chętniej klikane przez użytkowników. To z kolei przełoży się na większy ruch na stronie. Pamiętaj też, że zaangażowanie w social media powiązane z Twoimi działaniami, to dobry sygnał dla Google.
Jak dodaje się tagi Open Graph?
Znajdują się one w sekcji <head> strony internetowej i można je wprowadzać ręcznie. Jeżeli jednak Twoja witryna oparta jest na jednym z popularnych systemów zarządzania treścią, jest prostsza droga. Utworzono sporo wtyczek, które znacznie ułatwiają ten proces.
Oto one:
Magento 2 - Social Meta Tags
Joomla - JFB Connect
PrestaShop - Prestashop Facebook Open Graph Tags
Jak wygląda ustawianie Open Graph na WP przez Yoast?
- Zainstaluj wtyczkę (wyżej podlinkowałem miejsce, skąd możesz ją pobrać. Możesz zrobić to też bezpośrednio z kokpitu strony, wchodząc w sekcję „wtyczki”)
- Wejdź w edycję danego wpisu
- Na dole, w sekcji Yoast wybierz zakładkę dotyczącą social mediów
- Dla każdego wpisu utwórz odpowiedni tytuł, opis i obrazek
Chcesz sprawdzić, czy udostępniany przez Ciebie link na Facebooku będzie wyglądał przyzwoicie? Użyj Sharing Debuggera! Wklej odnośnik i dostaniesz wszystkie informacje, które Facebook zdołał wyciągnąć z kodu źródłowego.
Social media to bardzo ważny kanał, który może pozyskiwać Ci sporo ruchu na stronę internetową. Pamiętaj też, że jeżeli Twoje treści będą atrakcyjnie prezentować się w mediach społecznościowych, to jest szansa, że więcej osób je polubi czy poda dalej.
Polish 
English 
German