Co to są meta tagi?
Co nieco o meta tagach pisałem w poradniku na temat SEO copywritingu i optymalizacji treści, tym razem opiszę temat bardziej szczegółowo!
Meta tagi inaczej zwane znacznikami meta, są elementem umieszczanym w sekcji <head> strony internetowej. Mają format HTML, a ich zadanie, to opisanie robotom i użytkownikom co znajdą na danej podstronie.
Panuje, a właściwie panowało, błędne przekonanie, że znaczniki meta optymalizuje się tylko dla robotów, żeby Google odpowiednio pozycjonował Twoją stronę i umieścił ją wysoko w wynikach wyszukiwania.
W praktyce sprawa wygląda zupełnie inaczej. Dzisiaj tytuł i opis meta ma pomóc robotom, ale przede wszystkim użytkownikom w łatwiejszym podjęciu decyzji i wejściu właśnie na tę, a nie inną stronę www. Naturalnie – user będzie miał problem z kliknięciem w twoje snippety, jeżeli nie wyświetlisz mu się w Google. Moim zdaniem warto wyrobić sobie nawyk pisania dobrych tagów nawet, jeśli strona tych pozycji jeszcze nie osiągnęła z różnych powodów.
Najpierw opiszę krótko każdy ze znaczników, a następnie, pokażę na odpowiednim screenie co jest tytułem, co opisem i gdzie właściwie możesz je zobaczyć.
Meta Title
Meta Title to tytuł danej strony, widoczny w wyszukiwarce. Czynnik rankingowy, warto optymalizować go z użyciem frazy kluczowej lub pochodnych, na których nam zależy.
Meta Description
Meta Description czyli opis strony, umiejscowiony pod tytułem. Od jakiegoś czasu nie jest bezpośrednim czynnikiem rankingowym. Ludzie upychali w nim zbyt wiele słów kluczowych, dobrze jednak wyrobić sobie ten nawyk i zadbać o dobrą optymalizację.
Meta Keywords
Frazy kluczowe podstrony (kiedyś istotny czynnik rankingowy, dziś Google nie zwraca na keywords uwagi). Zdaniem niektórych przydatne w przypadku Google Merchant.
Znaczniki meta w kodzie strony oraz w wyszukiwarce
Za przykład niech posłuży moja strona www. Na początek tagi w kodzie HTML strony:
Na zdjęciu zaznaczyłem miejsce rozpoczęcia sekcji head. Poniżej pokazałem gdzie w kodzie mojej strony umiejscowione są tagi odpowiadające za tytuł i opis strony. Blur kodu, dla ułatwienia. Schemat tagów zawsze wygląda podobnie. Tytuł i opis strony w kodzie HTML:
Okej, umiejscowienie w „bebechach” mamy odhaczone. Co z wyświetlaniem w wyszukiwarce? Screen:
Tak wyglądają tagi meta w praktyce, w wyszukiwarce. W artykule podlinkowanym na górze pokazywałem je w praktyce, ale na nieco innym przykładzie. Teraz małe zadanie. Zobacz tagi w screenie z kodu strony, a potem zerknij na screena z wyszukiwarki. Tagowanie dotyczy tej samej strony i podstrony, a jednak wygląda inaczej. Dlaczego?
Google czasami zmienia treść znaczników META
Zaskakujące? Czasami pomimo ręcznego ustawienia Meta Title i Meta Description, Google wyświetla w wyszukiwarce inną treść. Dlaczego? Zależnie od wpisanego zapytania, Google chce dopasować wyniki do poszukiwań użytkownika. Informacje czerpie z zawartości podstrony, której dotyczy zapytanie. Właśnie z tego powodu, tak istotna będzie zawartość Twojej strony i wartość contentu. W takich działaniach nie ma nic nadzwyczajnego i zapewniam Cię, że wyszukiwarka robi tak z każdym serwisem w internecie. Użytkownik jest najważniejszy. Daj mu to, czego szuka!
Google ma swój poradnik na temat interpretacji rozbudowanych Tagów Meta, rozumienia ich oraz dyrektyw stosowanych w tym elemencie.
Jak tworzyć Meta Tagi title i description?
Ciągłe aktualizacje i dywagacje ekspertów nie pomagają, w ciągu ostatnich kilku lat zmieniały się wytyczne dotyczące tagów, o których mowa. Nie ma jednej recepty i dobrze testować rozwiązania. Jak tworzyć meta tagi? Jakich zasad warto się trzymać? Zapraszam!
Długość tagów Title i Description
Długość tych elementów również wielokrotnie ulegała zmianom w ostatnich latach. Miało to związek z przesunięciem priorytetów na wyświetlanie mobile, lepsze zagospodarowanie przestrzeni na ekranie. Całkiem niedawno mieliśmy przecież aktualizację Mobile First, premiującą wyświetlanie na urządzeniach mobilnych, stąd ważna jest długość w znakach oraz w pikselach. Przy każdym elemencie pokażę i jedno i drugie. Nie przedłużając, jaką długość powinny mieć tagi Title i Description?
Title – powinien mieć długość pomiędzy 50-60 znaków ze spacjami (max. 580px)
Description – powinien mieć długość pomiędzy 155-160 znaków ze spacjami (maksymalnie 920px), w praktyce dobrze, jeżeli ma pomiędzy 50-160 znaków, a już najbardziej optymalne są opisy meta do 120 znaków ze spacjami.
Dlaczego ująłem również wielkość tekst w pikselach? Znak, znakowi nierówny – jedne litery zajmują więcej miejsca na wyświetlenie, niż inne. Długość według znaków to jedno, natomiast wielkość w pikselach jest kolejnym elementem. Warto zawsze zerknąć, czy Twoje tagi nie zostały ucięte. W jaki sposób to sprawdzić? W dalszej części artykułu dostaniesz kilka propozycji, jak przetestować znaczniki na stronie!
Jak pisać Meta Tagi – najważniejsze informacje i sztuczki
Jest kilka powtarzalnych elementów, ułatwiających pracę z tym niezwykle ważnym czynnikiem rankingowym. Tworząc tagi należy pamiętać o istotnych zasadach:
- Twórz unikalne meta tagi dla każdej podstrony – każda podstrona w Twoim serwisie powinna mieć unikalne znaczniki tytułu i opisu meta. Możesz je napisać ręcznie, skorzystać z parametrów dostępnych w systemach CMS, ale nigdy nie lekceważ tego elementu.
- Nie duplikuj tagów – zadbaj o to, żeby na różnych podstronach nie pojawiały się te same tagi. Roboty i użytkownicy zgłupieją. W ogromnym uproszczeniu – Google nie będzie wiedział czego szukać na podstronie. Użytkownik również. Zduplikowane tagi działają negatywnie na pozycjonowanie strony.
- Stosuj długi ogon – czyli związane z tematem, dłuższe frazy kluczowe o mniejszej konkurencji. Więcej na ten temat przeczytasz w moim artykule o długim ogonie w SEO!
- Nie zostawiaj pustych tagów – tak, wiem. Zaraz pewnie podniesie się wrzawa, że bez sensu, bo sklepy mają po kilka tysięcy podstron, nie da się tworzyć unikalnych tagów w każdym przypadku. Za dużo czasu, za dużo pracy. Bla, bla, bla. Od tego w systemach CMS są parametry, żeby móc tworzyć automatyczne reguły tagowania. Zostawiając ten element pusty, sprawiasz, iż Google samo podejmuje decyzję co wyświetli. Tym samym ograniczasz swoje możliwości na pokazanie użytkownikom tego, co dla Ciebie istotne. Jeden z najczęściej powielanych błędów, spotykam w przypadku niemal każdego audytu SEO.
- Pamiętaj o umieszczaniu słów kluczowych – w tytułach i opisach miej na uwadze frazy kluczowe, stosuj odmiany, synonimy. Spróbuj z ich pomocą przekazać najważniejsze treści zawarte na podstronie. Pamiętaj – nie przesadzaj z ich nasyceniem, żeby uniknąć keyword stuffingu, czyli upychania słów kluczowych. Tak! W znacznikach meta też może nastąpić zjawisko upychania fraz!
- Wstawiaj nazwę swojej firmy na końcu – bardziej w tytule niż opisie strony. Spójnie, w miarę możliwości, umieszczaj nazwę firmy na końcu. Scali to strukturę serwisu i powiąże całość. Użytkownik też dostanie sygnał o bardziej uporządkowanej strukturze. Bywa, że nazwa zostanie ucięta, kluczem będzie testowanie najlepszej formy tagów dla siebie.
- Stosuj separatory – punkt powiązany z powyższym, również niezwykle ważny. Chcąc zamieścić nazwę firmy na końcu tytułu, stosuj separatory. Co mam na myśli. Przykład:
Tytuł niech wygląda tak:
Title Twojej strony – (separator) Nazwa firmy
Separatory mogą mieć różną postać. Myślniki, pionowe kreski. Pamiętaj, że separator i tytuł Twojej strony również liczą się do całkowitej długości tagu tytułowego.
- Baw się CTA (Call to Action) – wezwaniem do akcji. Stosuj zwroty zachęcające do kliknięcia i przeczytania treści. Raczej stosowane w opisie. Mile widziane są zwroty typu: Sprawdź! Przeczytaj! Zobacz! Przekonaj się! I tak dalej, i tak dalej! Testuj, sprawdzaj, zobacz co w przypadku Twojego serwisu i grupy docelowej działa najlepiej.
- Może emoji? – ja nie jestem szczególnym fanem, bo social media nie są prywatnie moim ulubionym narzędziem komunikacji i budowy mojego brandu. Jeżeli jednak specyfika Twojego biznesu i Twoje osobiste podejście sprzyja stosowaniu emoji w tagach – próbuj!
- Przekonaj odbiorcę – tytuły i opisy podstron muszą dać Twoim odbiorcom wartość, jaką możesz im przekazać. Komunikat sprawiający, że kliknięcie właśnie w Twoją stronę będzie dobrym wyborem.
- Pamiętaj o tagach przy całkiem świeżych stronach – zawsze, gdy tworzysz nowy serwis, pamiętaj o tagach. Najlepiej niech reguluje to już specyfikacja strony internetowej.
Na koniec coś, o czym nie przeczytałem w żadnym z polskich poradników dotyczących tagów, a uważam ten element za najważniejszy…
Bądź szczery! Doskonale rozumiem jak działa biznes i akceptuję, że wszyscy w internecie chcą zarobić. Nie mam zamiaru z tym walczyć. Tworząc tagi title i description do swoich podstron, bądź szczery. Opisz co faktycznie znajduje się na stronie. Co możesz dać odbiorcy i co faktycznie może zaoferować Twój wpis blogowy albo podstrona.
Za dużo mamy szumnych snippetów opisujących jaka genialna zawartość czeka w środku po kliknięciu, podczas gdy wewnątrz mamy zwykły clickbait. Unikaj tego. Szczerością zbudujesz wiarygodność.
Jak mogę dodać i edytować znaczniki meta?
Sposobów jest wiele. Tagi można dodawać w kodzie strony, ale zajmuje to znacznie więcej czasu, niż w przypadku korzystania z przeznaczonych do tego narzędzi. Prawdopodobnie każdy system CMS posiada własne narzędzia do uzupełniania i edycji tagów META. Moja strona stoi na WordPressie, więc mam nieco ułatwione zadanie. Dlaczego?
WordPress np. ma do tego sporo fajnych narzędzi. Ja meta tagi edytuję przy pomocy darmowej wersji wtyczki Rank Math, chociaż wcześniej przez długi czas korzystałem z również darmowego, Yoast SEO. Jeżeli korzystasz z WordPressa, obie wtyczki bez problemu znajdziesz w zakładce wtyczki, w panelu strony. Skąd zmiana? Rank Math sprawił wrażenie bardziej kompletnego narzędzia.
Darmowa edycja meta tagów wtyczką Rank Math – komputery i mobile!
Po zainstalowaniu wtyczki Rank Math i jej wstępnej konfiguracji (co opiszę w innym wpisie), Twój panel zyska nowy przycisk:
W lewym rogu pojawi się pole ze skalą od 0/100. Po kliknięciu wystarczy wybrać przycisk Edit Snippet i możesz ręcznie edytować Meta tytuł i opis swojego wpisu lub podstrony. Jak?
Całość jest banalnie prosta. Mam dla Ciebie dwa screeny. Na pierwszym pokażę, jak wyglądają tagi na komputery:
Edycja meta tagów na komputery wygląda następująco. Widzisz cztery zaznaczone pola:
- Wygląd tagów w wyszukiwarce – Snippety,
- Pole do edycji Title (razem z paskiem długości, wartościami liczbowymi i wyrażonymi w pikselach),
- Pole do edycji URL (+ pasek długości, liczba i piksele),
- Pole do edycji Description (+ długość, wartość liczbowa i w pikselach).
Możesz w ten sposób ręcznie i „na żywo edytować tagi i zobaczysz ich podgląd w oknie wyszukiwarki. Od razu ocenisz, czy przypadkiem część tekstu nie została ucięta.
Teraz czas na wyświetlanie tagów na urządzeniach mobilnych:
Również cztery pola, ale snippet – czyli element widoczny w wyszukiwarce, ma wygląd mobilny. Analogicznie do poprzedniej sytuacji, tutaj opis będzie podobny.
- Snippet – co to widzimy w wyszukiwarce,
- Edycja Title (+ pasek, znaki i piksele),
- Edycja URL (+ pasek długości, liczba znaków i pikseli),
- Edycja Description (+ pasek, długość w znakach i pikselach).
Swoje narzędzia do tego zadania mają wszystkie, albo niemal wszystkie systemy CMS i z dużym prawdopodobieństwem edycja będzie wyglądać podobnie. Nie ma jednej dobrej i sprawdzonej recepty na poprawne używanie tagów meta, ale są sposoby, żeby choć spróbować sprawdzić ich poprawność.
Ważne! Pisząc meta tagi, tworzysz je jednocześnie na komputery i urządzenia mobilne. Nie da się stworzyć innego tytułu dla mobilek i desktopów. Z opisem jest identycznie.
Zawsze sprawdzaj, czy na obu typach urządzeń wyglądają dobrze! Czasem tagi wyglądają poprawnie na komputerach, a na mobilkach zostają ucięte (przez mniejszą przestrzeń w pikselach). Zawsze sprawdzaj wygląd meta tagów na różne typy urządzeń!
W przypadku mojej edycji tagów, na podglądzie mobile ucięło nazwę firmy po separatorze. Czasem nie ma innego wyjścia, żeby odpowiednio ująć to co chcesz przekazać w tytule. Podgląd snippetów we wtyczce jest tylko umowny i na niektórych urządzeniach tytuł faktycznie będzie ucięty, a na innych, z większym ekranem – niekoniecznie. Warto o tym pamiętać przy ręcznej edycji.
Darmowe narzędzie do sprawdzania znaczników Meta
Mam swoje zdanie na temat tworzenia wartościowych treści, w mojej opinii wpis można uznać za kompletny, tylko wówczas, gdy obok praktycznej wiedzy daje również narzędzia ułatwiające pracę nad danym elementem. O Rank Math napisałem wyżej. Tutaj natomiast, mam dla Ciebie dwa darmowe narzędzie do sprawdzania poprawności meta tagów na Twojej stronie!
Hey Meta – darmowy generator meta tagów online
Strona www, dostępna pod adresem www.heymeta.com. Pozwala zupełnie za darmo sprawdzić poprawność napisanych meta tagów na każdej podstronie. Jak działa? Po wejściu na stronę z linka obok, w polu tekstowym wpisujesz adres strony (zgodnie ze zrzutem powyżej), i po kliknięciu enter, dostajesz wyniki:
Masz preview snippetów. Podgląd wyglądu w wyszukiwarce. Podajesz adres do właściwego zdjęcia danego wpisu. Jedźmy dalej:
Pola tytułu i opisu, zaciągnięte z badanej strony (w moim przypadku strona główna), możesz je edytować w tych polach, odświeżyć widok i wówczas, w podglądzie opisanym wyżej, zobaczysz odświeżoną wersje z naniesionymi poprawkami. To nie wszystko, w kolejnym widoku możesz edytować zdjęcie i adres URL:
W powyższych polach edytujesz zdjęcie główne – podając adres do zdjęcia. Możesz również edytować adres i zająć się inną podstroną. Podobnie, jak w przypadku poprzednich kroków, wszystko możesz odświeżać „na żywo”. Kiedy masz już pewność, że meta tagi wyglądają dobrze, czas na ostatni krok. Generowanie gotowych meta tagów! Optymalizacja tagów skończona:
Wystarczy kliknąć Generate i otrzymujesz gotowy kod HTML z meta title i meta description, a także tagami dla Facebooka i Twittera. Wystarczy skopiować cały kod, a następnie wkleić go do sekcji head na Twojej stronie i gotowe. Świetne, darmowe narzędzie do samodzielnego tworzenia meta tagów w postaci gotowego kodu HTML. Na bieżąco widzisz podgląd i jeżeli znaczniki spełnią Twoje wymagania, po prostu wstawiasz je na stronę.
Wszystko o meta tagach – podsumowanie!
Każdy rozumie i interpretuje działania SEO troszkę inaczej. W mojej opinii dobrze napisane znaczniki powinny pełnić dwie funkcje. Pierwsza z nich – pokazanie użytkownikowi w sposób jasny, co znajdzie na danej podstronie, dopiero w drugiej kolejności – wskazanie robotom najważniejszych elementów strony. Dobrze napisane tagi pomagają w indeksowaniu strony w Google.
Twórz swoje tagi tak, aby dawały robotom sygnały dotyczące strony, ale przy tym były pewną zachętą do kliknięcia. Pisz znaczniki meta, w które sam chciałbyś kliknąć. Ciekawe, intrygujące, opisujące zawartość, ale zawsze zachęcające do kliknięcia.
Pamiętaj – to tytuł i opis Twojej strony (jako snippety), widzi użytkownik przy pierwszym kontakcie w wyszukiwarce. Zadbaj o wrażenia internauty, zachęć go do przejścia na Twoją stronę. Tytuł i opis każdej podstrony może być potężnym narzędziem do pozyskiwania ruchu, zwiększenia konwersji i osiągania założonego celu. Do tego potrzebujesz unikalności i znajomości potrzeb Twoich odbiorców.
Moja opinia pozostaje niezmienna. Zawsze twórz unikalne i zachęcające META tagi dla każdej podstrony. To nigdy nie zaszkodzi, a zawsze może pomóc. Jeżeli nie w poprawie pozycji, to w zainteresowaniu odbiorcy. Nie masz pewności, jak się za to zabrać? Zajrzyj do artykułu: Opieka nad stroną www.
Zajrzyj też na moją stronę główną: Kreacja Marki i zobacz, co mogę dla Ciebie zrobić!
Cześć! Zbudowałem brand kreacjamarki.pl, żeby pomóc firmom, które chcą zaistnieć w internecie. Przez kilka lat prowadziłem redakcję w firmie marketingowej i nadszedł moment, aby zrobić coś dla siebie. Za sobą mam kilkadziesiąt ciekawych projektów. Przed sobą jeszcze więcej. Moje publikacje znajdziesz w miesięcznikach Biznes Hotel i Hotelarz. Prywatnie fan kina niezależnego i obsesyjny fan angielskiego futbolu.