Czynników rankingowych, wpływających na pozycje Twojej strony w wyszukiwarce mamy mnóstwo. Znaczniki meta są jednymi z najważniejszych. Co to są meta tagi? Jaki mają wpływ na pozycjonowanie? Jak samodzielnie pisać meta tytuł i meta opis? Wreszcie, jakie mają znaczenie dla użytkownika, a jakie dla robotów Google? Na te i więcej pytań odpowiem w moim poradniku!
Czym są meta tagi HTML?
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.
Google we wpisie dedykowanym meta tagom wypowiada się o nich następująco:
„Tagi meta to tagi HTML służące do udostępniania wyszukiwarkom i innym klientom dodatkowych informacji o stronie. Klienty przetwarzają tagi meta i ignorują te, których nie obsługują. Tagi meta są dodawane do sekcji <head> strony HTML” – Centrum wyszukiwarki Google
W sekcji <head> w HTML wyglądają one następująco:
Tagi meta w sekcji <head> w HTML. Źródło: developers.google.com/search/docs/crawling-indexing/special-tags?hl=pl
O meta tagach pisałem w poradniku na temat SEO copywritingu i optymalizacji treści, tym razem opiszę temat bardziej szczegółowo!
Jeśli chcesz jeszcze bardziej zgłębić temat meta tagów, koniecznie obejrzyj dedykowane temu segmentowi SEO wideo od Google:
O meta tagach słów kilka
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.
Rodzaje najważniejszych meta tagów w SEO – title tag i meta description
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ć.
Title tag
Przykład title tag.
Title tag 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. Powinien mieć długość pomiędzy 50-60 znaków ze spacjami (max. 580px).
Meta description
Przykład 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ę. 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.
Rekomendowana długość title i description.
Jakie rodzaje meta tagów występują w Google oprócz podstawowych znaczników title tag i meta description?
Poza podstawowymi znacznikami title i meta description, istnieje wiele innych, które pomagają sterować zachowaniem robotów Google, udostępnianiem w mediach społecznościowych czy indeksowaniem treści.
Tabela wszystkich meta tagów używanych przez Google:
| Meta tag | Opis / Funkcja |
| <title> | Tytuł strony wyświetlany w wynikach wyszukiwania i zakładce przeglądarki. |
| <meta name=”description”> | Opis strony, często pojawia się jako zajawka w wynikach wyszukiwania. |
| <meta name=”robots”> | Instrukcja dla robotów Google: np. noindex, nofollow, noarchive. |
| <meta name=”googlebot”> | Specyficzne instrukcje tylko dla robota Google (działa jak robots, ale tylko dla Googlebota). |
| <meta name=”viewport”> | Ustawia skalowanie na urządzeniach mobilnych – istotne pod kątem mobile-friendly SEO. |
| <meta name=”keywords”> | Historyczny tag – obecnie ignorowany przez Google. |
| <meta name=”author”> | Informacja o autorze strony – rzadko wykorzystywana przez Google. |
| <meta name=”theme-color”> | Ustawia kolor przeglądarki mobilnej na Androidzie – wpływa na UX, nie na SEO. |
| <meta http-equiv=”refresh”> | Przekierowanie czasowe lub automatyczne odświeżanie – ostrożnie, może być nadużywane. |
| <meta name=”google-site-verification”> | Służy do weryfikacji własności domeny w Google Search Console. |
| <meta property=”og:*”> (Open Graph) | Meta tagi używane głównie przez Facebooka, ale także interpretowane przez Google w kontekście udostępnień. |
| <meta name=”twitter:*”> | Podobnie jak Open Graph, ale dla Twittera – wpływ na wygląd linków w social media. |
Znaczniki meta HTML w kodzie strony oraz w wyszukiwarce
Za przykład niech posłuży moja strona www. Na początek tagi w kodzie HTML strony:
Tagi w kodzie HTML strony – interpretacja.
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:
Tagi meta w wyszukiwarce.
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!
Tworzenie title tag i meta description – na co zwrócić uwagę? 12 dobrych praktyk [Lista]
Jest kilka powtarzalnych elementów, ułatwiających pracę z tym niezwykle ważnym czynnikiem rankingowym.
Przygotowując tagi title i meta description należy pamiętać o istotnych zasadach:
Praktyka 1: 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.
O unikalności meta tagów wypowiada się również Google we wpisie na temat projektowania tych znaczników:
„Identyczne lub podobne opisy każdej strony witryny nie są pomocne w przypadku, gdy w wynikach wyszukiwania pojawiają się tylko niektóre strony. Postaraj się tworzyć opisy rzetelnie podsumowujące zawartość każdej strony zawsze, gdy jest to możliwe. Na stronie głównej lub innych stronach gromadzących informacje używaj opisów dotyczących całej witryny, a w innych miejscach – opisów na poziomie strony. Jeśli nie masz czasu na tworzenie opisów wszystkich stron, spróbuj ustalić priorytety: utwórz przynajmniej opisy najważniejszych adresów URL, takich jak strona główna i inne popularne strony”. – Centrum wyszukiwarki Google
Praktyka 2: 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.
Praktyka 3: 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!
Praktyka 4: 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.
Praktyka 5: 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!
Praktyka 6: 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.
Praktyka 7: 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.
Praktyka 8: 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.
Praktyka 9: Dodaj emoji (jeśli uważasz to za słuszne)
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!
Praktyka 10: 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.
Praktyka 11: 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…
Praktyka 12: 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ść.
I pamiętaj o rekomendacjach Google w zakresie ulepszeń meta opisów:
Rekomendacje Google w zakresie ulepszeń meta opisów. Źródło: developers.google.com/search/docs/appearance/snippet?hl=pl
Jak dodać i edytować znaczniki meta w HTML?
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:
Edycja title i meta w WordPress.
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:
Tagi meta na komputerach.
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:
Tagi meta 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 – Hey Meta w praktyce [musisz je wypróbować]
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
Darmowy generator meta tagów online – Hey Meta.
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:
Preview snippetów.
Masz preview snippetów. Podgląd wyglądu w wyszukiwarce. Podajesz adres do właściwego zdjęcia danego wpisu. Jedźmy dalej:
Podgląd wyglądu w wyszukiwarce.
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:
Edycja zdjęcia i adresu 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:
Generowanie meta tagów.
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.