Przewodnik korzystania z tagów Open Graph
Czym są meta tagi Open Graph?
Tagi Open Graph – to krótkie fragmenty kodu, które pomagają poprawnie wyświetlać linki do Twojej witryny w głównych mediach społecznościowych. Ten system znaczników stron internetowych po raz pierwszy został stworzony dla Facebooka, ale od tego czasu został przyjęty przez Twitter i LinkedIn. Jest również obsługiwany przez najpopularniejsze komunikatory, takie jak Viber, WhatsApp i Telegram.
Tagi mediów społecznościowych można znaleźć w sekcji <head> obok zwykłych metadanych wyszukiwarki. Można je rozpoznać po identyfikatorze “og:” na początku. Zazwyczaj takie elementy są dodawane do kodu automatycznie, choć można dodać je ręcznie.
Dlaczego warto używać tagów OGP?
Tagi Open Graph pozwalają wybrać kluczowe elementy wyświetlania linku w mediach społecznościowych. Obejmują one obraz, tytuł i krótki opis – prawie to samo, co udostępniamy robotom indeksującym. Można również określić język, specyfikę regionalną i rodzaj treści, aby zwiększyć skuteczność swojej reklamy. Ponadto masz możliwość podłączenia wewnętrznych narzędzi Facebooka.
Jeśli zignorujesz to ważne narzędzie, większość elementów odtwarzania zostanie wykryta automatycznie. Całkiem możliwe, że system wykona zrzut ekranu części strony, która nie jest najbardziej atrakcyjna, np. przestrzeni między dwoma elementami. Dotyczy to również opisu – będzie on zawierał krótki fragment tekstu wraz z odpowiednim słowem kluczowym.
Czy jesteś gotowy podjąć ryzyko powierzenia sukcesu swojej kampanii marketingowej losowemu doborowi? Jeśli nie, skup się na opanowaniu znaczników Open Graph.
Różne rodzaje znaczników Open Graph
Zacznijmy od składni. Aby dodać metatag OG do swojej witryny, otwórz sekcję <head> jej kodu. Dodaj do niej następującą linię: <meta property=”AAA” content=”BBB” />. AAA – to nazwa tagu, BBB – to zmienna, czyli wartość, którą przekazuje do mediów społecznościowych.
Istnieją cztery obowiązkowe elementy w znacznikach Open Graph i kilka dodatkowych. Te ostatnie są również bardzo ważne, zwłaszcza jeśli często korzystasz z reklam kontekstowych.
og:URL
Link do kanonicznej wersji strony, którą chcesz udostępnić. Tag OG gwarantuje, że użytkownicy mediów społecznościowych zobaczą dokładnie tę treść, którą dla nich przygotowałeś. Jest to szczególnie ważne, jeśli podczas tworzenia, testowania i naprawiania błędów utworzono kilka wersji witryny. Określając prawidłowy adres URL, konsolidujesz również dane dotyczące polubień i innych interakcji, ułatwiając zbieranie statystyk.
Składnia użycia tagu:
<meta property=”og:url” content=”https://example.com/main.html” />
og:Title
Tytuł strony, który będzie wyświetlany w linku. Tworząc go, pamiętaj o zasadach copywritingu: pisz zwięźle, włóż jak najwięcej sensu, staraj się nie powtarzać się i unikaj jawnego clickbaitu. Chociaż nie ma oficjalnych zaleceń dotyczących długości tytułu, zaleca się trzymanie się zakresu od 40 do 60 znaków ze spacjami, podobnie jak w metadanych wyszukiwarek. Kolejnym ważnym zaleceniem jest skupienie się na treści i nieużywanie nazwy marki. Po pierwsze, logo jest zwykle zawarte w obrazie. Po drugie, zaoszczędzi to miejsce i zwiększy zaufanie użytkowników.
Składnia użycia tagu:
<meta property=”og:title” content=”Short instruction how to use Open Graph Protocol” />
og:Description
Krótki opis, który będzie wyświetlany pod tytułem. Zasady pisania tego tagu są takie same jak w przypadku tekstu dla wyszukiwarek. Pisz krótko i na temat – daj użytkownikowi motywację do kliknięcia i podążania za linkiem. Użyj słów wyzwalających i stwórz intrygę. Zapomnij jednak o clickbaitach i oszustwach, w przeciwnym razie prędzej czy później doprowadzą one do zablokowania Twojej witryny przez spam.
Jeśli chodzi o długość tekstu, Facebook zaleca ograniczenie go do 2-4 krótkich zdań. Jednak w celu poprawnego odtworzenia tekstu w innych mediach społecznościowych i komunikatorach warto pamiętać o wskazówkach Google: optymalny rozmiar – do 160 znaków ze spacjami.
Składnia użycia tagu:
<meta property=”og:description” content=”Learn how to use OG tags in your webpage properly” />
og:Image
Najważniejszy znacznik, który stanowi maksymalny procent obszaru wyświetlania linku. Zawiera link do obrazu, który zostanie wyświetlony użytkownikowi. Dodawane są do niego obrazy o proporcjach 1,91:1 lub 2:1,05. Minimalna rozdzielczość dla poprawnego wyświetlania na wszystkich urządzeniach, niezależnie od charakterystyki ekranu – 1200 × 630.
Aby skutecznie promować się w mediach społecznościowych, tag Open Graph image należy dodać do wszystkich ważnych stron – strony głównej, bloga, kontaktów, warunków współpracy itp. Twórz unikalne obrazy pasujące do treści. W przypadku kart produktów i innych sekcji komercyjnych można wybrać standardowy obraz, taki jak logo firmy.
Składnia użycia tagu:
<meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg” />
og:Type
Niewidoczny znacznik. Wpływa na skuteczność wyszukiwania linków i rezultat kampanii marketingowych, ale nie na odtwarzalność w mediach społecznościowych. Następujące zmienne są używane do sortowania według rodzaju treści:
- website – zwykła strona bez zawartości multimedialnej;
- article – artykuł na blogu lub w sekcji wiadomości;
- book – e-book;
- profile – profil w mediach społecznościowych lub innych serwisach;
- muzyka – zawartość audio;
- video – link do filmiku.
Znacznik og:type może być używany do sortowania treści na niższym poziomie. Na przykład według nazwiska artysty lub reżysera filmu. Pełna lista zmiennych jest dostępna w oficjalnym przewodniku Open Graph.
Składnia do używania tagu:
<meta property=”og:type” content=”article” />
og:Locale
Język i regionalne cechy treści. Znacznik jest używany w celu ułatwienia wyszukiwania i poprawnego wyświetlania linku. Jeśli kierujesz reklamę do odbiorców w USA, możesz całkowicie pominąć ten znacznik – domyślnie sieci społecznościowe i komunikatory rozpoznają go jako “en_US”.
Składnia użycia tagu:
<meta property=”og:locale” content=”en_GB” />
FB:app_id
Specjalistyczny metatag Open Graph dla Facebooka. Umożliwia powiązanie niektórych serwisów sieci społecznościowej z linkiem. Jeśli realizujesz cel komercyjny, powinieneś podłączyć statystyki do analizy wydajności. Można również dodać integrację innych platform lub otwarte komentarze. Identyfikatory wszystkich serwisów są wymienione w panelu aplikacji.
Składnia użycia tagu:
<meta property=”fb:app_id” content=”1234567890″ />.
Dodatkowe narzędzia do oznaczania różnych typów treści multimedialnych
Aby zwiększyć skuteczność publikowania linku w mediach społecznościowych, należy uczynić go wyraźnym i atrakcyjnym. Mogą w tym pomóc narzędzia do wizualizacji, takie jak obrazy, filmiki, dane geograficzne i obiekty trójwymiarowe. Przyjrzyjmy się, jak możemy do nich odnosić się za pomocą tagów OG.
Obrazy
Powyżej wyjaśniliśmy już, jak przesyłać obrazy za pomocą tagu og:image. W niektórych przypadkach jednak należy go zmodyfikować:
- og:image:url jest kompletnym odpowiednikiem zwykłego tagu. Lepiej go użyć, jeśli przesyłasz kilka obrazów – będą one zmieniać się po odświeżeniu strony;
- og:image:secure_url – to samo, ale z zastrzeżonym linkiem, takim jak “https://”;
- og:image:type – format pliku. Sieci społecznościowe rozpoznają jpeg, gif i png;
- og:image:width – wymuszone ustawienie szerokości obrazu. Zaleca się go używać, jeśli obraz w linku ma nieoptymalne wymiary;
- og:image:height – to samo, ale dla wysokości.
Wideo
W Open Graph Protocol jest opisywany przez tag og:video. Aby filmik był odtwarzany w kanale mediów społecznościowych, należy podać link z bezpiecznym prefiksem “https://” i użyć jednego z dwóch formatów – MPEG-4 lub Shockwave Flash. Aby poprawnie wyświetlić zawartość, należy pamiętać o następujących modyfikacjach tagów:
- og:video:url – link do publikacji kilku filmików;
- og:video:secure_url – to samo dla zastrzeżonego źródła;
- og:video:type – format wideo. Może przyjmować wartości “application/x-shockwave-flash” lub “video/mp4”. Musi zostać określony do odtwarzania w kanale;
- og:video:width – szerokość okna wideo. Jest używany dla treści o nieoptymalnym rozmiarze;
- og:video:height – to samo dla wysokoś
Obiekty 3D
Zalecamy zapoznać się z wymaganiami dotyczącymi tego typu treści multimedialnych przed dodaniem ich do linku. Krótko mówiąc, jesteś ograniczony do formatów FBX 2015, gITF 2, COLLADA, OBJ i DAE. Jednak dla użytkownika nie są dostępne wszystkie funkcje, które zostały wykorzystane podczas tworzenia tych obiektów.
Aby wstawić obiekt 3D, należy użyć następującej składni:
<meta property=”og:type” content=”threed.asset” />
Link jest zaznaczony w znaczniku:
<meta property=”og:asset” content=”https://example.com/assets/standard.obj” />
Ostatnim elementem jest tytuł, który jest zapisany w standardowym tagu og:title.
Jak zintegrować protokół Opengraph ze swoją stroną internetową?
Większość systemów CMS i ich wtyczek już obsługuje znaczniki dla mediów społecznościowych. Ponadto istnieją aplikacje do automatyzacji, które wstawiają je na wszystkich niezbędnych stronach w ciągu kilku sekund. Nadal jednak można ćwiczyć, pisząc metadane ręcznie.
WordPress
Najlepszym wyborem dla tego CMS jest wtyczka Yoast:
- Zainstaluj ją, otwórz menu i wejdź w tryb edycji strony.
- Przewiń na sam dół tej sekcji, gdzie znajdziesz okno “Yoast SEO”.
- Otwórz zakładkę Społeczności i wybierz Facebook.
- Wypełnij sekcje Tytuł i Opis oraz podaj linki do zdjęć.
Jedną z najlepszych praktyk dla WordPress jest wybranie wspólnego szablonu linków dla całej witryny. Wejdź w ustawienia Yoast, otwórz sekcje Social i Facebook. Przełącz przełącznik pod napisem “Dodaj metadane Open Graph” na pozycję “Włączone”. Następnie link będzie domyślnie używał szablonu. Jeśli chcesz zmienić metodę odtwarzania dla pojedynczej strony, zapoznaj się z powyższymi instrukcjami.
Shopify
Ten system zarządzania contentem nie jest zbyt elastyczny. Automatycznie duplikuje tagi OG z metadanych dla wyszukiwarek. Jedyną rzeczą, którą można zmienić, jest wybranie szablonu obrazu dla wszystkich stron witryny. Aby to zrobić, otwórz rozdziały menu w następującej kolejności:
- Online Store.
- Themes.
- Customize.
- Theme settings.
- Customize.
- Social media.
Po ostatnim kroku wystarczy podać link do przygotowanego obrazu. Wszystkie pozostałe elementy można edytować ręcznie w kodzie strony.
Wix
Znany kreator stron internetowych również automatycznie pobiera tagi z meta robotów wyszukiwarek, a nawet wybiera pierwszy obraz na stronie. Ma jednak możliwość edycji takich informacji na każdej stronie. W tym celu należy wybrać opcję „Social share” w trybie edycji. W podobnej sekcji menu głównego tworzony jest wspólny szablon dla całej witryny. Jest to jeden z najprostszych i najbardziej elastycznych CMS-ów do marketingu w mediach społecznościowych.
Squarespace
Domyślnie kopiuje metadane mediów społecznościowych. Co prawda obraz jest wstawiany na każdej stronie osobno. Otwórz tryb edycji i poszukaj rozdział “Social Image”, który zawiera wiersz do przesyłania obrazu. Aby użyć innych typów tagów OG, przejdź do rozdziału “Advanced” w menu edycji i wybierz narzędzie “Page Header Code Injection” – okno programisty.
Ręczna integracja
Powyżej opisaliśmy wszystkie typy tagów, ale warto zebrać je w jednym miejscu, aby nie pominąć niczego ważnego:
- <meta property=”og:url” content=”https://example.com/main.html” />
- <meta property=”og:title” content=”Short instruction how to use Open Graph Protocol” />
- <meta property=”og:description” content=”Learn how to use OG tags in your webpage properly” />
- <meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg” />
- <meta property=”og:video” content=”https://example.com/blog/wp-content/uploads/2022/11/video.mp4″ />
- <meta property=”og:video:type” content=”video/mp4″ />
- <meta property=”og:type” content=”threed.asset” />
- <meta property=”og:asset” content=” https://example.com/assets/standard.obj” />
- <meta property=”og:type” content=”article” />
- <meta property=”og:locale” content=”en_GB” />
- <meta property=”fb:app_id” content=”1234567890″ />
Wszystkie znaczniki są wpisywane do sekcji <head>. W rzeczywistości ich położenie wobec siebie i innych elementów nie ma większego znaczenia. Jednak dla ułatwienia edycji kodu w przyszłości, warto zebrać wszystkie metadane w jednym miejscu.
Jeśli wolisz pisać tagi ręcznie, po ich dodaniu warto sprawdzić, czy link działa poprawnie i przeprowadzić audyt. Zdecydowanie zalecamy jednak korzystanie z narzędzi do automatyzacji, takich jak Mega Tags lub Web Code Tools. Przyspieszy to proces i zmniejszy liczbę błędów składni.
Jak przetestować tagi Open Graph?
Co ciekawe, ten etap trwa zazwyczaj dłużej niż samo napisanie metadanych. Do tego celu wykorzystywane są trzy narzędzia:
- Facebook Sharing Debugger;
- Twitter Card Validator;
- LinkedIn Post Inspector.
Wszystkie mają taką samą funkcjonalność, a nawet podobny interfejs. Jedyną różnicą jest serwis społecznościowy. Po wprowadzeniu linku w pasku adresu URL zobaczysz, jak będzie on wyglądał w kanale aktualności. Skoncentruj się na wyświetlaniu graficznym, tj. OG image, title i description. Jeśli masz mało czasu, po prostu zignoruj drugorzędne tagi, takie jak type i app_id.
Po wprowadzeniu zmian kliknij przycisk “Scrape Again”, aby crawler mediów społecznościowych ponownie zaindeksował stronę. Jeśli odtwarzanie pozostanie takie samo, użyj narzędzia Batch Invalidator, aby wyczyścić pamięć podręczną. Powtarzaj proces w każdej z trzech aplikacji, aż uzyskasz idealny wynik.
Najlepsze praktyki korzystania z tagów Open Graph
Istnieje kilka sekretów sukcesu, które znacznie przyspieszą integrację znaczników mediów społecznościowych i poprawią jakość wyników:
- Używaj tylko kanonicznych wersji stron w tagu og:URL.
- Ustaw długość title w zakresie 40-60 znaków ze spacjami, a description – od 120 do 160 znaków.
- Twórz unikalne obrazy dla najbardziej popularnych i informacyjnych stron.
- Użyj szablonu znaczników linków dla reszty witryny – może on zostać utworzony automatycznie w większości systemów CMS.
- Dodaj obrazy o rozdzielczości 1200 × 630. Pomoże to przyspieszyć ładowanie i utrzymać wymagany poziom jakości.
I najcenniejsza wskazówka: przeprowadzaj zewnętrzne testy swoich działań. Pokaż link w mediach społecznościowych grupie fokusowej, która składa się z 15-20 osób, i poproś ich o ocenę jego atrakcyjności. Jeśli chodzi o szablon, dobrym pomysłem jest przeprowadzenie rozszerzonych testów A/B z kilkoma wariantami. Wybierając najlepszy z nich, poprawisz współczynnik konwersji całej witryny.
Jakich błędów szukać w metadanych?
Nawet korzystanie z najlepszych narzędzi do automatyzacji nie eliminuje wszystkich zagrożeń. A ręczne kodowanie zwiększa je kilkukrotnie. Dlatego warto skorzystać ze specjalnych serwisów, takich jak SearchAtlas, które sprawdzą stronę po publikacji. Są one w stanie znaleźć takie błędy, jak:
- Nieprawidłowa składnia. Media społecznościowe nie są w stanie rozpoznać błędnych poleceń.
- Brak znaczników Opengraph. O konsekwencjach wspominaliśmy już powyżej – system automatycznie wykryje obraz i opis. Nie daje jednak gwarancji, że będzie to wyglądać atrakcyjnie.
- Zbyt wiele znaków w tytule i opisie. Tekst nie zostanie wyświetlony w całości, więc nie przekażesz użytkownikowi swojej wiadomości.
- Adres URL nie zawiera kanonicznej wersji strony. W kanale może nie być wyświetlana zamierzona zawartość.
- Obraz ma niestandardowy rozmiar. System wyświetli tylko jego część. Jest to zawsze ryzyko, ponieważ kontekst ma znaczenie.
Tagi Open Graph: kiedy i dlaczego ich używać?
Protokół OG jest pomostem łączącym tradycyjne strony internetowe z kanałami mediów społecznościowych. Biorąc pod uwagę, że liczba odbiorców tych ostatnich jest mierzona w miliardach, jego użycie jest obowiązkowe dla każdej strony, niezależnie od jej typu i treści. Aby odnieść sukces, należy postępować zgodnie z jasno określonym protokołem – dodać wszystkie niezbędne tagi z listy, przeprowadzić wewnętrzną diagnostykę i zewnętrzną ocenę. Bardzo skutecznym rozwiązaniem byłoby stworzenie wspólnego szablonu dla całej witryny, a następnie przeprowadzenie testów A/B i wybranie najlepszej opcji.
Często zadawane pytania
Czym są meta tagi Open Graph?
Są to krótkie fragmenty kodu, które programują wyświetlanie linku do Twojej witryny w mediach społecznościowych. Są one obecnie obsługiwane przez Facebook, Twitter, LinkedIn, Viber, Telegram i WhatsApp.
Jakie są rodzaje tagów Open Graph?
URL – link, title – tytuł, description – krótki tekst pod nim, image – obraz, video – krótki filmik do odtwarzania w kanale, type – opis treści do wyszukiwania, locale – język i cechy regionalne, FB:app_id – połączenie modułów Facebooka.
Jak zintegrować tagi Open Graph ze stroną internetową?
Możesz ręcznie dodać kod do sekcji <head> lub skorzystać z narzędzi automatyzacji dostępnych w większości popularnych systemów CMS, w tym WordPress, Wix, Squarespace i Shopify.
