Powrót do bloga
Zastanawiałeś się kiedyś, dlaczego linki udostępniane na Facebooku lub Twitterze czasem wyglądają dziwnie? Czy wiesz, jak wpłynąć na wygląd Twoich postów blogowych udostępnianych w tych mediach społecznościowych?
Jeśli nie masz pewności, czy zrobiłeś wszystko, co możliwe, aby zoptymalizować informacje o swoim wpisie na blogu lub stronie wyświetlanej na Facebooku i Twitterze, czytaj dalej. Pokażemy Ci, jak używanie odpowiednich tagów social media może pomóc poprawić wygląd podglądu Twoich postów.
Udostępniając link do artykułu, chcesz, aby Twój post wyglądał atrakcyjnie po opublikowaniu w mediach społecznościowych. Chciałbyś, aby zawierał wysokiej jakości obraz, poprawną nazwę, opis i URL. Facebook, Twitter i inne platformy social media pobierają te parametry z Twojej strony internetowej.
Możesz kontrolować, co pobierają z posta, umieszczając meta tagi społecznościowe (na przykład tagi open graph) w kodzie HTML swoich postów.
Jeśli meta tagi Facebooka (=Open Graph meta tags) są obecne, Ty decydujesz, co wyświetla się w poście na Facebooku. Jeśli nie uwzględnisz tych meta właściwości Open Graph (og), Facebook nadal wyświetli informacje o Twoim wpisie na blogu, ale prawdopodobnie nie tak, jakbyś tego chciał. Działa to analogicznie również z meta tagami Twittera. Pokażmy to na przykładzie użycia meta tagów i udostępniania linków na Facebooku.
Udostępnianie treści internetowych na Facebooku
Facebook to świetna platforma social media do dzielenia się nowymi treściami. Utworzenie nowego posta z artykułu na Twojej stronie jest tak proste, jak wklejenie linku w pole nowego posta na Facebooku.
Przyjrzyjmy się temu procesowi. Jako przykładu użyjemy naszego posta o Strategii marketingowej na Facebooku.
Po wstawieniu adresu URL do pola nowego posta, Facebook pobiera dane z docelowego adresu URL i tworzy dla nas ładnie sformatowany post. Format jest natychmiast pokazywany w podglądzie – zarówno dla ustawień desktopowych, jak i mobilnych. Jeśli używasz Kontentino do zarządzania treściami w mediach społecznościowych, podgląd jest dostępny natychmiast w Kalendarzu Kontentino.
Zrozumienie meta tagów w kodzie HTML strony
Meta właściwości dla wyszukiwarek
Na samej górze widzimy kilka właściwości definiujących parametry tego artykułu, zwane również meta tagami lub meta właściwościami. Niektóre z nich są wykorzystywane przez wyszukiwarki do zrozumienia, czym jest treść strony, poprzez dostarczenie dodatkowych informacji, które nie są wyświetlane bezpośrednio na stronie posta. Obejmują one na przykład meta tagi takie jak:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
Poniższy obrazek pokazuje kod HTML dla tego posta Kontentino. Możesz zobaczyć te meta tagi zaznaczone kolorem zielonym.
Identyfikacja meta tagów w kodzie HTML posta Facebook Ads Target Audiences 101: The Ultimate Guide
Szybka wskazówka: Nie jesteś pewien, jak wyświetlić kod HTML swojej strony? Po prostu wciśnij CTRL+U w przeglądarce na Windowsie lub Option + Command + U na Macu
Dzięki tym meta tagom wyszukiwarki wiedzą, że indeksowanie tej strony internetowej (posta) i jej parametry są ustawione na śledzenie (dofollow). Wprowadzony meta tytuł oraz meta opis są używane przez wyszukiwarki do wyświetlania linku do tego posta w wynikach wyszukiwania (na stronie wyników wyszukiwania – SERP). Jak widać, właściwości meta title i meta description są ustawione na:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description: ‘Find out how to reach the right people with Facebook Ads target audiences.’
Wiemy, że te meta tagi nie mają optymalnej długości, ale nie jesteśmy tu po to, by rozmawiać o SEO czy Google. Przejdźmy więc od razu do meta tagów poniżej, które zawierają tekst ‘og:’.
Te meta tagi lub meta właściwości są czasami określane jako tagi społecznościowe, meta tagi social media lub po prostu właściwości meta og.
Jak widać, w kodzie HTML naszego wpisu na blogu znajduje się 7 różnych meta właściwości og. Są to:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Dodatkowo, istnieje jeszcze kilka meta tagów Facebooka – właściwości og: powiązane z tagiem og:image, które obejmują:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Meta tagi Twittera
Oprócz powyższych, w kodzie HTML znajdziesz również specjalne meta tagi społecznościowe dla Twittera, takie jak:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Wróćmy do naszego przykładu udostępniania posta na Facebooku. Musimy zrozumieć, rozszyfrować i edytować zawartość meta właściwości ‘og:’, aby wpłynąć na wygląd naszego nowego posta FB z osadzonym linkiem.
Czytaj dalej i dowiedz się więcej o: i) Dekodowaniu właściwości meta og:; ii) Wytycznych dotyczących pisania treści dla meta tagów społecznościowych; oraz iii) Edycji zawartości tych właściwości w CMS Twojej strony.
Publikowanie na Facebooku i Twitterze z Kontentino
Zarejestruj się na 14-dniowy okres próbny Kontentino i opanuj meta tagi w social mediach razem z nami. Zobacz podgląd posta w Kontentino, zanim go opublikujesz.
Skrót ‘og:’ w kodzie HTML Twojej strony oznacza ‘Open Graph’. Jest to akronim protokołu Open Graph, który umożliwia poinformowanie Facebooka, jak powinna być wyświetlana udostępniana treść. Jak już wspomnieliśmy (a Facebook zaznacza to w swoich instrukcjach dla deweloperów), „bez tych tagów Open Graph, robot indeksujący Facebooka wykorzystuje wewnętrzną heurystykę, aby najlepiej odgadnąć tytuł, opis i obraz podglądu dla Twoich treści”. Jawne zdefiniowanie tych informacji za pomocą tagów Open Graph pomaga zapewnić najwyższą jakość postów na Facebooku.
Jak widać, te meta tagi og są niezwykle ważne dla Facebooka. Jeśli jeszcze o nich nie słyszałeś lub myślisz, że są całkiem nowe, zdziwisz się dowiadując się, że protokół Open Graph został uruchomiony przez Facebooka już ponad 10 lat temu (w 2010 roku). Dziś jednak pieczę nad nim sprawuje Open Web Foundation.
Protokół Open Graph opiera się na różnych istniejących technologiach i schematach, aby pomagać deweloperom w bogatym reprezentowaniu dowolnej strony internetowej w ramach wykresu społecznościowego (social graph). Dość historii i definicji; przejdźmy do szczegółów dotyczących różnych meta tagów og. Przyjrzymy się szczegółowo tylko 4 z nich – tym, które odpowiadają za wygląd naszego osadzonego posta na Facebooku: og:title, og:image, og:url i og:description.
Właściwość meta og:title
Ta meta właściwość jest jedną z czterech podstawowych metadanych w protokole Open Graph (są to: og:title, og:type, og:image, og:url). Określając og:title, ustawiamy tytuł naszego obiektu (w tym przypadku – wpisu na blogu), tak jak powinien on wyglądać w social graph. Facebook pobierze ten og:title i wyświetli go jako tytuł posta (tuż pod adresem URL na naszej pierwszej grafice).
Właściwość meta og:image
Wstawiamy tutaj adres URL obrazu, który powinien reprezentować nasz obiekt (artykuł) w social graph. W tym przypadku w tej właściwości powinien znaleźć się link do obrazka wyróżniającego. Określając og:image, upewniamy się, że to właśnie ten obraz zostanie wyświetlony na Facebooku.
W przeciwnym razie Facebook może wybrać inny obraz z naszego posta; może to być główne zdjęcie wyświetlane na liście postów i na górze naszego artykułu lub dowolny inny obraz pojawiający się we wpisie na blogu.
Właściwość meta og:url
Ten meta tag zawiera kanoniczny adres URL naszego obiektu, który będzie używany jako jego stały identyfikator w social graph. W naszym przypadku adres URL w og:url to https://www.kontentino.com/blog/facebook-ads-target-audiences/.
Właściwość meta og:description
Wreszcie, określenie meta tagu og:description powinno pomóc nam w wyświetleniu opisu podczas udostępniania tego posta. Teraz, jak widać na obrazku z kodem HTML, jest to ‘Find out how to reach the right people with Facebook Ads target audiences.’
Meta tagi Twittera
Meta tagi Twittera działają analogicznie do meta tagów Open Graph i określają treść, którą Twitter pobierze podczas udostępniania strony internetowej na tej platformie społecznościowej.
Opanowanie meta tagów og
Facebook i Twitter oferują wytyczne, jak wykorzystywać wspomniane wyżej meta tagi. W naszej tabeli poniżej podsumowujemy podstawowe informacje na ich temat wraz z odpowiednimi rekomendacjami.
Teraz, gdy rozumiemy różne rodzaje meta tagów społecznościowych i ich implikacje, czas przejść do CMS naszej strony internetowej i dowiedzieć się, gdzie i jak je edytować. Pokażemy przykłady z systemu WordPress, będącego zdecydowanie CMS-em nr 1 na świecie.
Jeśli korzystasz z wtyczki SEO, takiej jak Yoast SEO, Rank Math, All in One SEO lub podobnej, przydadzą się one podczas edycji tych metadanych społecznościowych. Prawie wszystkie dobre wtyczki SEO umożliwią zmianę meta tagów dla Facebooka i Twittera niezależnie. W dalszej części pokażemy, jak ustawić je w Rank Math.
Zaczynamy od edycji posta i kliknięcia zakładki SEO. Tam należy otworzyć zakładkę ‘Social’ (Społecznościowe).
Znalezienie miejsca do edycji meta tagów social media w Twoim CMS
Rank Math zawiera podgląd na żywo, umożliwiający sprawdzenie, jak wprowadzone zmiany wpłyną na osadzenie Twojego posta na Facebooku lub Twitterze. Kliknij przycisk „Preview & Edit Social Media” (Podgląd i edycja mediów społecznościowych).
Edycja meta tagów Facebooka
Najpierw zobaczymy podgląd posta na Facebooku, a pod nim meta tagi społecznościowe, które można dostosować.
Podgląd udostępniania linku posta wygenerowany przez Twój CMS – w tym przypadku wtyczkę RankMath
W naszym przypadku właściwości og:image, og:title i og:description nie zostały jeszcze określone. Jak widać, symulator (edytor podglądu snipeta) pokazuje wartości z podstawowych metadanych używanych dla wyszukiwarek.
Edycja meta tagów w social mediach: tagi og:title i og:description Twojego wpisu blogowego
Na naszym pierwszym zdjęciu w tym artykule widzimy, że brakujący tytuł jest najbardziej problematyczny. Uzupełnimy jednak zarówno tytuł, jak i opis.
Następnie, po zapisaniu zmian, powinniśmy sprawdzić, jak zaktualizowany post będzie wyglądał po udostępnieniu na Facebooku.
Nowe meta tagi social media uzupełnione dla posta
Chociaż Facebook zaleca używanie od 2 do 4 zdań w meta tagu og:description, w tej demonstracji pozostaniemy przy jednym zdaniu. Chcemy sprawdzić, czy Facebook w ogóle je wyświetli, dzięki stworzeniu pewnej przestrzeni na karcie poprzez skrócenie długości parametru og:title.
Zanim sprawdzimy wynik, powinniśmy wspomnieć o innych rozwiązaniach umożliwiających edycję parametrów Open Graph w WordPressie. Jeśli nie używasz wtyczki SEO, możesz skorzystać z dedykowanej wtyczki Open Graph, takiej jak OG, lub ręcznie wstawić społecznościowe metadane do kodu HTML swojej strony. To drugie rozwiązanie przyda się również w innych systemach CMS. WIX posiada wbudowane rozwiązanie do wstawiania meta właściwości og, podobnie jak inne główne systemy zarządzania treścią.
Gdy skończysz edytować meta tagi dla Facebooka lub Twittera, czas wypróbować udostępnianie posta na tych platformach. Sprawdźmy, jak nasz post wygląda teraz na Facebooku. Możemy skorzystać z Facebook Debuggera (oficjalnie zwanego Facebook Sharing Debugger, czasem określanego jako narzędzie podglądu FB), aby przyjrzeć się zmodyfikowanym postom na Facebooku. Przed zrobieniem tego, nie zapomnij wyczyścić pamięci podręcznej (cache) lub usunąć pliki tymczasowe Safari (jeśli używasz tej przeglądarki), jeśli nie zostały wyczyszczone automatycznie po zapisaniu posta.
Meta tagi Open Graph w narzędziu Facebook Link Sharing Debugger
Podgląd linku w Facebook Sharing Debugger pokazujący Twoje meta tagi social media w akcji
Jak widać powyżej, wszystko wygląda dobrze, a zmiany w meta tagach Facebooka zaczęły obowiązywać.
Powszechne błędne przekonania na temat meta tagów w social mediach
Mit 1: Meta tagi w social mediach służą tylko celom SEO.
Meta tagi nie są przeznaczone tylko dla wyszukiwarek — odgrywają kluczową rolę w tym, jak Twoje treści są wyświetlane w sieciach społecznościowych. Meta tagi social media, takie jak og:image i og:title, specjalnie optymalizują Twoje posty dla platform takich jak Facebook i Twitter, poprawiając zaangażowanie (engagement).
Mit 2: Wszystkie obrazy będą wyświetlać się idealnie w mediach społecznościowych.
Nie każdy obraz z Twojego posta wyświetli się poprawnie po udostępnieniu. Bez określenia og:image lub użycia karty Twittera (Twitter card), platformy społecznościowe mogą wybrać ogólny obraz lub nieprawidłowo sformatować grafikę, wpływając na wygląd Twojego posta.
Mit 3: Meta tagi są ważne tylko dla stron typu one-page.
Meta tagi są niezbędne dla serwisów składających się z wielu stron. Niezależnie od tego, czy Twoja witryna zawiera blogi, czy listy produktów, używanie og:type i innych meta tagów zapewnia spójne i zoptymalizowane wyświetlanie na wielu platformach społecznościowych.
Mit 4: Możesz polegać na platformach social media w kwestii poprawnego wyświetlania treści.
Poleganie na Facebooku lub Twitterze w kwestii automatycznego formatowania posta jest ryzykowne – delikatnie mówiąc. Bez ręcznego ustawienia kluczowych meta tagów, takich jak og:url i og:description, platformy społecznościowe mogą pobierać błędne lub niekompletne dane, wpływając na atrakcyjność wizualną Twoich treści.
Mit 5: Społecznościowe meta tagi są trudne do wdrożenia bez umiejętności kodowania.
Wtyczki WordPress i narzędzia takie jak Rank Math upraszczają proces dodawania i zarządzania meta tagami social media. Nie musisz być deweloperem, aby upewnić się, że Twoje posty są zoptymalizowane pod kątem udostępniania w mediach społecznościowych.
Mit 6: Karty Twittera działają tylko ze statycznymi obrazami.
Karty Twittera obsługują różne formaty mediów, w tym formaty GIF i wideo. Możesz dołączyć zdjęcia lub inne media do swojej karty podsumowania, sprawiając, że Twoje posty będą bardziej dynamiczne i angażujące w tej sieci społecznościowej.
Mit 7: Meta tagi dotyczą tylko Twoich własnych treści.
Meta tagi nie dotyczą tylko Twojej własnej strony internetowej; pomagają również, gdy Twoje treści są udostępniane na innych stronach. Prawidłowe ustawienie meta property=”og:image” i meta property=”og:title” zapewnia, że Twoje treści wyglądają profesjonalnie niezależnie od tego, gdzie są udostępniane.
Podsumowanie
Mamy nadzieję, że ten artykuł pomógł Ci zrozumieć meta właściwości og i ich znaczenie dla udostępniania linków na Facebooku i Twitterze. Jeśli chciałbyś wznieść swój marketing w mediach społecznościowych na wyższy poziom, koniecznie wypróbuj Kontentino (jeśli jeszcze tego nie zrobiłeś). Jest to łatwe w użyciu narzędzie do tworzenia treści w mediach społecznościowych, wspierające efektywną współpracę zespołową i akceptację treści.
Nasz Kalendarz Treści integruje funkcję podglądu, więc nie musisz iść nigdzie indziej, aby zobaczyć, jak będzie wyglądał Twój nowy post z linkiem, oszczędzając Twój cenny czas na sprawdzanie i optymalizację meta tagów social media.
A co może być lepszego niż ustawienie tagów UTM do śledzenia wyników posta w analityce internetowej, ustawienie daty przyszłej publikacji lub przypisanie budżetu na promowanie posta, aby osiągnąć szerszy zasięg?
FAQ
Czym jest meta tag w social mediach?
Meta tag w social mediach dostarcza kluczowych danych, takich jak tytuły, obrazy i opisy dla platform społecznościowych podczas udostępniania stron internetowych. Jest niezbędny do zwiększania zaangażowania użytkowników na głównych platformach społecznościowych.
Jakie są przykłady meta tagów?
Przykłady obejmują zawartość meta property=”og:title”, meta property=”og:image” i meta property=”og:url”, które optymalizują udostępnianie społecznościowe na platformach takich jak Facebook i Twitter, zapewniając odpowiednią reprezentację Twoich treści.
Czym są metadane w social mediach?
Metadane w social mediach obejmują dane open graph, takie jak zwięzły tytuł, opis i wysokiej jakości obrazy, które poprawiają wygląd postów w mediach społecznościowych na platformach takich jak Twitter i Facebook.
Czym są tagi social media?
Tagi social media to identyfikatory, takie jak tagi twitter card lub tagi og osadzone w pliku HTML, które wpływają na sposób wyświetlania stron internetowych po udostępnieniu na platformach społecznościowych, zwiększając ekspozycję w social mediach.
Jak tworzyć meta tagi?
Aby utworzyć meta tagi, programista wstawia kilka linii kodu do pliku HTML strony internetowej, w tym parametry takie jak tag tytułu, tag opisu i unikalny obraz reprezentujący treść.
Jakie media społecznościowe używają meta danych?
Meta tagi są używane przez główne platformy społecznościowe, takie jak Facebook, Twitter i LinkedIn, do optymalizacji wyglądu stron internetowych i postów po udostępnieniu w sieciach, zwiększając zaangażowanie użytkowników.
Czy meta tag jest konieczny?
Tak, meta tagi są kluczowe dla marketingu online, ponieważ kontrolują wygląd Twoich treści na platformach społecznościowych, zapewniając wyświetlanie właściwego obrazu i tytułu, co zwiększa liczbę udostępnień i zaangażowanie.
Jak znaleźć meta tagi?
Możesz sprawdzić plik HTML strony internetowej, aby znaleźć meta tagi. Narzędzia takie jak Facebook Debugger i ogólne serwisy online również pomagają przeglądać konkretne właściwości meta, takie jak og:image lub og:type.
Ilu meta tagów powinienem używać?
Używaj niezbędnych meta tagów, takich jak og:title, og:image, og:url i tagów twitter card, aby zoptymalizować swoją ekspozycję w social mediach. Postaw na jakość, a nie ilość, koncentrując się na tagach o dużym wpływie na udostępnianie.
Czym jest meta tag Facebooka?
Meta tag Facebooka, taki jak meta property=”og:title”, jest częścią protokołu Open Graph. Pomaga określić, jak Twoje strony internetowe lub posty w mediach społecznościowych wyglądają na Facebooku, zapewniając lepsze zaangażowanie użytkowników.
Co to jest zawartość meta property og:title?
Zawartość meta property og:title definiuje tytuł Twojej strony internetowej w formie, w jakiej pojawia się po udostępnieniu na platformach społecznościowych, takich jak Facebook.
Co to jest zawartość meta property og:image?
Zawartość meta property og:image określa adres URL obrazu, który pojawi się, gdy Twoja treść zostanie udostępniona na platformach społecznościowych.
Co to jest zawartość meta property og:type?
Zawartość meta property og:type definiuje typ udostępnianej treści (np. artykuł, strona internetowa), pomagając platformom społecznościowym odpowiednio ją kategoryzować i wyświetlać.
Czym są metadane? 3 przykłady?
Przykłady metadanych to tag opisu (description tag), zmienne sesji dla parametrów identyfikujących użytkownika oraz tag meta property=”og:image”, który pomaga platformom wybrać odpowiedni obraz do udostępniania w social mediach.
