Meta tagi Open Graph – Co musisz wiedzieć

Chcesz, aby ludzie zauważali Twoje posty w mediach społecznościowych?

Codziennie powstaje ponad 4 miliony wpisów na blogach, dlatego udostępnianie swojej pracy w sieciach społecznościowych jest kluczowe. Open Graph to jeden z najważniejszych elementów, aby dotrzeć do szerszej publiczności.

Nie wszyscy wiedzą o znaczeniu Open Graph. Czym to właściwie jest? Jak może pomóc Ci zostać zauważonym?

Czym jest Open Graph?

„Open Graph meta tagi, podobnie jak meta opisy i tytuły, określają sposób wyświetlania adresów URL po udostępnieniu ich w mediach społecznościowych.”

Łatwiej jest zdefiniować zawartość strony w serwisach społecznościowych dzięki projektowi Open Graph Facebooka, który ma na celu standaryzację informacji społecznościowych na stronach internetowych.

Te tagi dostarczają serwisom społecznościowym informacji, takich jak tytuł strony, opis i wyróżniony obraz, w sekcji head strony internetowej. Ten proces zachowuje spójność i autentyczność wyświetlanych informacji.

Dlaczego używać Open Graph?

Open Graph jest obsługiwany w różnych sieciach społecznościowych, takich jak:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

Według Google, protokół poprawia „Bloki Rekomendowanych Treści”.

Co się stanie, jeśli Open Graph nie zostanie użyty?

Ponieważ Facebook nie jest pewien, co wyświetlić w podglądzie, może użyć dowolnego znalezionego obrazu (może nawet wziąć baner reklamowy lub coś z nagłówka).

W rezultacie Facebook nie jest w stanie określić, które sekcje podglądu wyświetlić.

• Open Graph tworzy podglądy dla stron internetowych związanych z mediami społecznościowymi.
• Tagi Open Graph pomagają użytkownikom znaleźć materiały w kanałach społecznościowych, co prowadzi do zwiększonej liczby odwiedzin.

Im wyżej Twoje materiały pojawiają się, gdy odwiedzający przewijają stronę Twojej witryny, tym więcej uwagi otrzymują. Umożliwia to użytkownikom uzyskanie podglądu przed kliknięciem.

Użyj tagów OG, aby pomóc ludziom znaleźć Twoje materiały na Facebooku i innych platformach mediów społecznościowych.

Elementy meta OG są używane do tworzenia fragmentów, gdy adresy URL są udostępniane w prywatnych rozmowach na stronach korzystających z protokołu.

Znaczenie protokołu Open Graph dla Twojej firmy

Ten rodzaj interakcji jest uproszczony dzięki protokołowi Open Graph Facebooka. Znaczniki Open Graph to metoda organizowania i śledzenia danych podglądu. Daje Ci pełną kontrolę nad tym, jak Twoje materiały są wyświetlane w sieciach społecznościowych innych niż Twoje własne.

Aby ułatwić integrację, stworzono bogate obiekty graficzne, które współdzielą standardowy zestaw cech Facebooka. Facebook kontroluje przepływ informacji z zewnętrznych źródeł (lub polubionych itp.). Informacje te są dostarczane przez meta tagi Open Graph, gdy przechodzą przez nagłówek strony internetowej.

Ponieważ wiele osób uzyskuje dostęp do strony za pośrednictwem mediów społecznościowych, tagi Open Graph są ważniejsze niż kiedykolwiek. CTR może wzrosnąć, gdy wyszukiwanie zostanie ulepszone. Open Graph ułatwia proces udostępniania w mediach społecznościowych. Open Graph jest szeroko obsługiwany w serwisach społecznościowych. Tagi Open Graph Twitter/X są dobrym przykładem; Twitter/X obsługuje Open Graph.

Co to dokładnie oznacza?

Dlaczego warto oznaczać treści po stronie serwera za pomocą Open Graph? Czy istnieje potencjał, że dodatkowe tagi poprawią wydajność Twojej witryny i przyciągną więcej odwiedzających? Oto kilka powodów, dla których uważamy, że Open Graph może zrobić ogromną różnicę.

Większość prominentnych sieci społecznościowych wykorzystuje tagi Open Graph

Jeśli nie masz czasu na naukę HTML, możesz zamiast tego użyć tagów Open Graph Facebooka. Możesz użyć tych etykiet, aby spersonalizować nazwy, opisy i zdjęcia, które pojawiają się na wszystkich głównych serwisach społecznościowych.

Tagi Open Graph są rzeczywiście dla mediów społecznościowych

Open Graph został zaprojektowany do wyświetlania próbek informacji w sieci społecznościowej. Organizuje informacje w sposób wykraczający poza samo udostępnianie strony internetowej.

Wyróżnij zoptymalizowany obraz

Możesz użyć tagów Open Graph, aby określić, który obraz powinien pojawić się w Twoim podglądzie społecznościowym. Nie trzeba wybierać opcji domyślnej. Ludzie są bardziej skłonni klikać linki do Twojego wpisu na blogu lub strony internetowej, jeśli wyglądają one atrakcyjnie.

Chodzi o podglądy społecznościowe, a nie podglądy wyszukiwania

Zarówno optymalizacja pod kątem wyszukiwarek (SEO), jak i marketing w mediach społecznościowych są kluczowe, ale mają odrębne wymagania. Komponenty Open Graph rozwiązały stary problem SEO: fakt, że podglądy postów w sieciach społecznościowych miały nieatrakcyjne tytuły i opisy.

Tytuł strony, meta opisy oraz tytuł, opis, URL i tagi obrazu Open Graph muszą być unikalne, aby treści były zoptymalizowane pod kątem wyszukiwarek i sieci społecznościowych.

Masz kontrolę nad swoimi materiałami

Niezależnie od tego, czy publikujesz swoje materiały samodzielnie, czy robi to ktoś inny, masz pełną kontrolę nad tym, jak będą one wyglądać w mediach społecznościowych.

Nawet jeśli spersonalizujesz każdy post w mediach społecznościowych, większość Twoich klientów zignoruje podgląd. Odwiedzający, którzy zdecydują się udostępnić Twoje materiały, zrobią to z dobrze dobranym obrazem, tytułem i opisem, jeśli Twoje tagi Open Graph będą tak doskonałe, jak to tylko możliwe. Jest to bardzo ważne, ponieważ masz pełną kontrolę nad informacjami, które są rozpowszechniane o Twojej firmie.

Rodzaje tagów Open Graph

Tagi Open Graph, takie jak og:title, og:image, og:type i og:url, umożliwiają platformom społecznościowym wyświetlanie Twoich informacji. Musisz użyć tych kluczowych tagów, ale możesz również użyć innych.

Zrzut ekranu z Facebooka zawierający połączenia do komponentów og:image, og:url, og:title i og:description.

og:site_name

Tag og:site_name powinien zawierać domenę, w której można znaleźć Twoje treści. W rezultacie zastępuje on nazwę marki, która znajdowałaby się w meta tytule (i dlatego byłaby niedozwolona w og:tag tytułu).

Tag og:site_name powinien zawierać nazwę Twojej witryny lub marki, natomiast tag og:title powinien zawierać tytuł Twojego artykułu.

Kod og:site_name <meta property="og:site_name" content="Your Site Name" />

Użyj tego samego tagu nazwy witryny na całej swojej stronie internetowej.

og:title

Tag og:title jest sugerowany do ustawiania tytułu strony. Jest to podobne do sposobu używania meta tytułów w SEO. Używając istniejącego meta tytułu, upewnij się, że pole og:title jest wolne od treści specyficznych dla Twojej marki lub witryny.

Kod og:title <meta property="og:title" content="Title" />

Ten tag powinien pojawić się na każdej stronie Twojej witryny, którą użytkownik może chcieć udostępnić na Facebooku, Twitterze/X lub innej stronie społecznościowej.

Zachowaj długość tytułu między 40 a 50 znaków; w przeciwnym razie zostanie on obcięty.

Jeśli chcesz, aby więcej osób odwiedziło Twoją witrynę, tytuł musi robić więcej niż tylko ją opisywać.

W przeciwieństwie do meta tytułów wyszukiwarek, nie powinieneś umieszczać nazwy swojej domeny ani żadnych innych informacji, które mogłyby Cię zidentyfikować.

og:type

Użyj tagu og:type, aby określić typ przesyłanego materiału. Informuje to serwis społecznościowy o rodzaju udostępnianej treści, takiej jak wpis na blogu, strona internetowa, wideo lub plik audio.

Kod og:type <meta property="og:type" content="article" />

Użyj typu obiektu „article” dla informacji wymagających wyjaśnienia, takich jak wpisy na blogach.

Dodaj typ „website” do innych stron witryny.

Musisz użyć prawidłowego formatu pliku, jeśli chcesz przesłać plik zawierający zarówno tekst, jak i audio lub wideo. Ta strona zawiera listę wszystkich kategorii obiektów.

og:locale

Tag og:locale dostarcza informacji o języku, w którym napisany jest przesyłany materiał. Użytkownicy serwisów społecznościowych powinni być świadomi, że treści publikowane na stronach internetowych mogą być wyświetlane w wielu językach.

Kod og:locale <meta property="og:locale" content="en_GB" />

Ponieważ Facebook zakłada, że wszystko, co nie ma tagu og:locale, jest napisane w amerykańskim angielskim, jeśli prowadzisz witrynę w Stanach Zjednoczonych, która składa się wyłącznie z materiałów angielskich, możesz zignorować ten tag (en_US).

Jeśli dostarczane treści są napisane w innym języku niż amerykański angielski, upewnij się, że używasz prawidłowego tagu OG.

og:url

Po prostu użyj tagu og:url, aby określić, gdzie chcesz opublikować treść.

Kod og:url <meta property="og:url" content="https://www.yourdomain.com/title.html" />

Ten tag musi zawierać kanoniczny URL strony.

og:description

Oświadczenie zawarte w tagu og:description musi być zwięzłe, nieskomplikowane i jak najbardziej angażujące, aby zachęcić czytelników do odwiedzenia strony internetowej.

Możesz swobodnie ponownie wykorzystać informacje, o ile są one istotne, ze względu na fakt, że ten tag jest podobny do tego, który jest wykorzystywany przez wyszukiwarki.

Kod og:description <meta property="og:description" content="Your description." />

Pomocne byłoby, gdybyś mógł zachować długość opisu między 50 a 100 znaków. Posty na Facebooku powinny mieć maksymalnie od dwóch do czterech słów; posty dłuższe niż cztery słowa są bardziej narażone na usunięcie.

Aby uzyskać jak najwięcej kliknięć i uwagi poświęconej dostarczanym materiałom, opis, który podajesz, powinien być jak najbardziej szczegółowy i przekonujący.

og:image

Podaj URL obrazu, który ma być użyty w fragmencie społecznościowym, za pomocą elementu og:image. Użyj obrazu, który jest zarówno intrygujący, jak i bezpośrednio związany z treścią artykułu, aby zwiększyć prawdopodobieństwo kliknięć na Twoją stronę internetową.

Ten element OG działa podobnie do znaczniki schema, które są wykorzystywane przez wyszukiwarki do dostarczania rozszerzonych wyników.

Kod og:image <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Jeśli chcesz, aby udostępniane strony Twojej witryny zajmowały wyższe pozycje w optymalizacji wyszukiwarek obrazów, używaj innowacyjnych zdjęć, które pasują do Twojej marki. Nawet jeśli strona prawdopodobnie nie będzie często udostępniana, oznaczenie jej logo jest dobrym pomysłem na wypadek, gdyby ktoś udostępnił ją w przyszłości.

Aby uniknąć pikselizacji lub niskiej jakości, Twoja oryginalna grafika powinna mieć proporcje 1.91:1 i rozdzielczość co najmniej 1200 na 630 pikseli.

Tagi og:image:width i og:image:height zapewniają, że wcześniej udostępnione obrazy wyświetlają się prawidłowo. Zainstaluj Yoast na swojej stronie WordPress, jeśli jeszcze tego nie zrobiłeś, aby zostały dodane automatycznie. Jeśli jeszcze tego nie zrobiłeś, oto kod:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Dodaj Open Graph do WordPressa

Dodawanie tagów OG do WordPressa jest najłatwiejszym, najczęstszym i najprostszym sposobem na osiągnięcie tego za pomocą wtyczki Yoast SEO. Ta wtyczka powinna być już zainstalowana, jeśli Twoja witryna jest skonfigurowana tak, aby wyszukiwarki mogły ją łatwo znaleźć.

Zaktualizuj stronę lub artykuł, w którym Open Graph ma zostać wstawiony, używając opcji „społecznościowe” w Yoast SEO.

Wypełnij pola og:image, og:title i og:description w akordeonie Facebooka.

Yoast skonfiguruje dla Ciebie tag og:url, kartę Twitter/X i rozmiary obrazów. Jeśli nie poinstruujesz Yoast, aby użył konkretnego obrazu, użyje on głównego obrazu z posta.

Gdy Twoja witryna jest udostępniana, domyślnie nie wyświetla się żaden obraz. Możesz to zmienić, dostarczając zrzut ekranu całej witryny. Ten błąd występuje, gdy URL obrazu brakuje tagu og:image.

Na głównej stronie ustawień Yoast możesz wybrać og:image dla całej witryny.

Dodawanie tagów OG na Twoim blogu WordPress jest naprawdę łatwe. Wystarczy, że przejdziesz do:

Panel boczny WordPressa : Yoast>Społecznościowe>Facebook.

Przełącz przełącznik, a następnie zapisz istniejący obraz. Uważamy, że powinieneś wybrać logo. Możesz zrobić to samo dla Twittera/X i Pinteresta.

Dodaj Open Graph ręcznie

Jeśli wiesz, jak kodować i nie korzystasz z jednego z poprzednich systemów, tagi OG są proste do zainstalowania.

Możesz skopiować i wkleić poniższą treść na swoją stronę internetową, ale proszę zmodyfikuj ją, aby odpowiadała Twoim potrzebom.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Testowanie Twoich meta tagów Open Graph

Załóżmy, że zrozumiałeś, jak włączyć Open Graph na swoją stronę internetową.

Jeśli Twoja witryna jest prawidłowo sklasyfikowana, powinna wyglądać doskonale po udostępnieniu w mediach społecznościowych. Zawsze testuj swoją pracę przed udostępnieniem jej publicznie.

Zanim udostępnisz URL, dokładnie sprawdź, czy Twoje tagi OG są prawidłowo pobierane i wyświetlane.

Te narzędzia mogą być przydatne do testowania Twoich tagów OG:

• Walidator Rich Pins Pinterest
• Walidator Kart Twitter/X
• Debugger Udostępniania Facebooka
• Inspektor Postów LinkedIn

Po prostu wprowadź URL do dowolnej z tych usług, aby uzyskać oryginalne meta tagi. Gdy go udostępnisz, uzyskasz wyobrażenie o tym, jak będzie wyglądał dla innych.

Przed kontynuowaniem sprawdź obraz, tytuł i opis podglądu. Możesz otrzymywać powiadomienia o tagach, których nie potrzebujesz, które możesz dodać lub zignorować.

Jeśli test URL się nie powiedzie, spróbuj ponownie z innym tagiem. Sprawdź, czy każde narzędzie działa, odwiedzając jego URL. Możesz o tym porozmawiać, gdy będzie gotowe.

Werdykt

Kluczowe jest utrzymanie kontroli nad tym, co udostępniasz w mediach społecznościowych. Ruch i współczynniki konwersji wzrastają, gdy bogate elementy są wyświetlane w Open Graph. Zacznij od jednego wpisu na blogu. Gdy zobaczysz rezultat, znacznie łatwiej będzie zastosować tagi Open Graph w Twoich kolejnych postach w przyszłości.

Często zadawane pytania