O co chodzi z tagami OG? Jak poprawić wygląd linków publikowanych w social media? Masz stronę internetową, bloga lub aplikację, którą chcesz podzielić się ze światem? Ten artykuł jest dla Ciebie!
Czym jest Open Graph?
Meta tagi Open Graph (OG) zostały wprowadzone przez Facebooka w 2010 roku, aby dać autorom kontrolę nad wyglądem udostępnianych linków. „Meta” oznacza, że opisują zawartość strony internetowej, czyli są tagami HTML umieszczanymi w sekcji <head> kodu źródłowego.
Portale, które wyświetlają podgląd udostępnianych linków, skanują kod strony w poszukiwaniu tagów OG i wykorzystują zawarte w nich informacje do wyrenderowania widoku. Ma to sens? 🙂
Przykładowe meta tagi
Jak podejrzeć meta tagi istniejących stron? W Google Chrome wystarczy kliknąć prawym przyciskiem myszy w oknie przeglądarki i wybrać opcję Wyświetl źródło strony lub wpisać w pasku adresu np. view-source:https://projektpogodzinach.pl.
W źródle głównej strony mojego bloga znajdziesz całą serię meta tagów. Oczywiście większość z nich nie jest wymagana i nie ustawiałem ich manualnie, ale o tym za chwilę.
<meta property="og:locale" content="pl_PL" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Projekt Po Godzinach - programista na drodze do wolności finansowej" /> <meta property="og:description" content="Łączę pracę na kontraktach z budowaniem i sprzedażą własnych produktów online. Jeśli chcesz zarabiać w IT, pracować i inwestować mądrzej, to jesteś we właściwym miejscu!" /> <meta property="og:url" content="https://projektpogodzinach.pl/" /> <meta property="og:site_name" content="Projekt Po Godzinach" /> <meta property="og:image" content="https://projektpogodzinach.pl/wp-content/uploads/2021/07/og-image.png" /> <meta property="og:image:secure_url" content="https://projektpogodzinach.pl/wp-content/uploads/2021/07/og-image.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="Łączę pracę na kontraktach z budowaniem i sprzedażą własnych produktów online. Jeśli chcesz zarabiać w IT, pracować i inwestować mądrzej, to jesteś we właściwym miejscu!" /> <meta name="twitter:title" content="Projekt Po Godzinach - programista na drodze do wolności finansowej" /> <meta name="twitter:image" content="https://projektpogodzinach.pl/wp-content/uploads/2021/07/og-image.png" />
Warto zauważyć, że nie tylko Facebook ma swój standard – widać również tagi Twittera. Na szczęście nie musisz znać i korzystać ze wszystkich standardów. Jeśli Twitter nie znajdzie w kodzie źródłowych swoich tagów, to do wygenerowania podglądu użyje tagów OG.
Kiedy warto zainteresować się pozostałymi, dedykowanymi dla danej platformy protokołami? Jeśli na każdej z nich chcesz mieć inny podgląd 😉
Wymagane tagi – opcja minimum
Pełną listę tagów znajdziesz na stronie protokołu Open Graph. Przeczytasz tam również, że wymagane są tylko cztery z nich.
og:title– tytuł udostępnianego obiektuog:type– typ obiektu np. website, article, video.movie (lista dostępnych typów)og:image– obrazek reprezentujący obiektog:url– kanoniczny adres URL, pod którym będą zliczane wszystkie udostępnienia
Ale to nie wszystko. Pamiętaj o podstawowych meta tagach, które są używane przez wyszukiwarki, takie jak Google do generowania wyników wyszukiwania. Opcja minimum to tytuł i opis.
<title>Projekt Po Godzinach - programista na drodze do wolności finansowej</title> <meta name="description" content="Łączę pracę na kontraktach z budowaniem i sprzedażą własnych produktów online. Jeśli chcesz zarabiać w IT, pracować i inwestować mądrzej, to jesteś we właściwym miejscu!" />
Jeśli nie ustawisz og:title, to portale społecznościowe wyświetlą zawartość <title></title>, więc według mnie og:title nie jest do końca wymagany.
Gdy nie masz meta description ani og:description, to Google i Facebook wyświetlą (w opisie linku) pierwszy tekst znajdujący się na Twojej stronie. Mimo braku wymagalności warto mieć nad tym kontrolę i ustawić przynajmniej pierwszy z nich.
Zależy Ci tylko na wyglądzie i nie dbasz o SEO? Aby udostępniany adres prezentował się dobrze w wyszukiwarkach i w social media, wystarczą tylko 3 elementy: <title></title>, description, og:image.
Jaki rozmiar og:image?
Zalecany rozmiar zdjęcia reprezentującego udostępniany link to 1200 x 630. Moje grafiki przygotowuję w Sketchu i zapisuję w formacie PNG.
Jeśli umieszczasz na nich tekst, to najlepiej na środku. Portale często przycinają miniatury, więc w niektórych miejscach wyświetli się tylko środkowa część obrazu. TUTAJ znajdziesz przykład poprawnej grafiki og:image.
WordPress i wtyczka Yoast SEO
Gdy mam statyczną stronę lub aplikację SPA w Angularze, to dopisuję w HTML absolutne minimum, o którym pisałem wyżej. Nie ma tutaj magicznych automatyzacji.
Wszystkie strony firmowe, blog i kurs online postawiłem na WordPressie. Dzięki temu mogę wykorzystać tajemną moc wtyczek. Pisałem o nich więcej w artykule 10 wtyczek do WordPressa, które musisz znać.
Znajdziesz tam m.in. wtyczkę Yoast SEO, czyli prawdziwy kombajn do pozycjonowania. Po instalacji warto przejść przez konfigurator, który zapyta o wszystkie meta informacje dotyczące Twojej witryny.
Wersja minimalistyczna to wybranie z menu SEO > Społeczności, włączenie dodawania danych Open Graph i ustawienie obrazka dla strony głównej i domyślnego dla wszystkich stron i postów.
Mit frazy kluczowej (meta keywords)
Po instalacji wtyczki Yoast pod każdym wpisem pojawi się sekcja SEO, gdzie m.in. możesz ustawić frazę kluczową dla poszczególnych podstron.
UWAGA! Jest to wyłącznie focus keyword, czyli fraza dla wtyczki Yoast. Używa jej do określenia, czy strona została dobrze zoptymalizowana. Nie jest to zawartość tagu keywords, którego już dawno nie skanują wyszukiwarki.
Mimo to wiele osób nadal obsesyjnie ustawia meta keywords… Więcej na ten temat znajdziesz w artykule Meta keywords: why we don’t use them – and neither should you.
Dla każdego wpisu możesz ustawić odpowiedni tytuł, adres i opis. Akurat pod moimi postami zostawiam puste opisy. Są zaciągane automatycznie z pierwszego akapitu, w którym zawsze wrzucam zajawkę 🙂
W kolejnej zakładce możesz ustawić dedykowane opisy i obrazki dla portali społecznościowych. Tutaj wybieram tylko obrazek dla Facebooka, który w praktyce wyląduje w HTML jako meta og:image.
Jak widać, można wykupić wersję Yoast SEO Premium, ale jako prawdziwy Polak korzystam z darmowej, która w zupełności mi wystarcza 😀
Jak sprawdzać wygląd linków na Facebooku?
Zanim udostępnisz coś na Fejsie, przejdź do Sharing Debuggera i sprawdź, jak będzie wyglądać udostępniany adres. Wpisujesz adres strony i dostajesz wszystkie informacje, które Facebook zdołał wyciągnąć z kodu źródłowego.
Facebook nie pobiera informacji o stronie za każdym razem, gdy ktoś ją udostępni. Skanuje Twoją stronę raz na jakiś czas i zapamiętuje (cachuje). Aby wymusić przeładowanie danych np. po zmianie obrazka, wystarczy użyć przycisku Scrape Again.
Jak weryfikować wygląd linków na LinkedIn?
Z podobnego narzędzia korzystam w przypadku portalu LinkedIn. Tym razem jest to Post Inspector.
Czasami ponowny scraping wymaga dopisania do adresu nieistotnego parametru np. https://projektpogodzinach.pl/wykrywanie-jezyka-i-tlumaczenie-aplikacji-czyli-internacjonalizacja-oprogramowania?test=1.
Jeśli wygląda przyzwoicie w docelowych socialach, to czas na publikację! To już koniec tego artykułu, więc zabieram się za przygotowanie obrazka 😊
Jak to wygląda u Ciebie? Które meta tagi ustawiasz? Z jakich rozwiązań SEO korzystasz? Napisz w komentarzu!