Meta znaczniki w SEO — czym są i dlatego nie możesz o nich zapomnieć
Meta znaczniki zwane również tagami html są jednym z podstawowych elementów, o których musimy pamiętać podczas optymalizacji witryny pod kątem SEO.
Musimy jednak mieć świadomość, że stosując odpowiednie meta tagi, wpływamy nie tylko na działanie i zachowanie robotów Google, ale również możemy nimi poprawić współczynnik konwersji (CTR) z wyników wyszukiwania Google.
Jak? Tego właśnie dowiesz się z tego artykułu. Poznasz tu kilka rodzajów meta tagów, ich znaczenie i zastosowanie na stronie internetowej. Zaczynamy!
Znaczniki meta, meta tagi — dobra, ale o co chodzi?!
Zacznijmy od wyjaśnienia sobie, o czym my tu…
Znacznik tytułowy — meta title tag
Znacznik HTML <title> jest używany do określenia tytułu strony internetowej. Jest to jeden z ważniejszych elementów strony internetowej, ponieważ tytuł pojawia się w pasku tytułu przeglądarki oraz jest wykorzystywany w wynikach wyszukiwania w wyszukiwarkach internetowych.
W kodzie HTML, znacznik <title> znajduje się w sekcji nagłówka (head) strony internetowej, pomiędzy znacznikami <head> i </head>. Przykładowo:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
Treść strony...
</body>
</html>
Tekst wprowadzony w znaczniku <title> powinien być krótki, zwięzły i opisywać zawartość strony w sposób jak najbardziej precyzyjny. Warto zadbać o to, aby każda podstrona na stronie internetowej miała unikalny tytuł, który pozwoli łatwiej zlokalizować ją w wynikach wyszukiwania.
Jego długość to kwestia sporna wśród specjalistów SEO. Poznajmy kilka najpopularniejszych teorii:
- maksymalna długość ok. 55 znaków,
- maksymalna długość ok. 120 znaków,
- maksymalna długość 255 znaków,
- maksymalna 900 px.
Branża SEO zawsze cieszyła się unikalnym podejściem i komplikowaniem najprostszych spraw. Jaka jest jednak prawda? Sięgnijmy do źródła:
”Nie umieszczaj w elementach <title> niepotrzebnie długich ani zbyt szczegółowych tekstów. Chociaż nie ma limitu długości elementu <title>, link z tytułem w wynikach wyszukiwania Google jest zazwyczaj skracany do szerokości urządzenia.”
https://developers.google.com/search/docs/appearance/title-link?hl=pl
Wiemy, że nic nie wiemy… A więc co można z tym zrobić? Moja rada jest taka: aby wybrać jeden klucz i trzymać się go. Ale musimy pamiętać o ograniczeniach technicznych, o których również wspomina Google (co do skracania).
Z mojego doświadczenia wynika, że najlepiej sprawdzają się tytuły o długości ok. 55-60 znaków. Są zwięzłe, wymowne i wiem, że nie urwie mi ich w połowie wyrazu. Pewnie ktoś powie, że „…” w połowie urwanego tytułu budują napięcie i zachęcają do kliknięcia jeszcze bardziej, ale nigdy nie znalazłem potwierdzenia tej tezy. Zamiast takich kombinacji znacznie lepiej popracować nad konstrukcją współgrającą z działaniami pozycjonowania strony.
Jak zbudować znacznik meta title?
Co powinien zawierać dobrze zbudowany znacznik title odpowiadający za tytuł? Jest kilka istotnych elementów, o których musimy pamiętać! Pierwszym z nich jest nazwa podstrony, np.:
- O nas.
- Kontakt.
- Nazwa produktu/usługi.
Zatrzymajmy się na chwilkę przy „Nazwie produktu/usługi” tu dobrze uwzględnić słowa kluczowe, jakie mamy wybrane do działań pozycjonerskich / SEO. Ich obecność w tym miejscu ma spore przełożenie na efektywność działań i osiągane pozycje. Oczywiście jest to jeden z wielu elementów — więc nie oczekujmy cudów. Ale na pewno nie możemy o tym zapomnieć.
Dalej dobrą praktyką jest brand. Tu mamy dowolność formy separatora: – /:
Kilka przykładów takiego kompletnego meta tytułu strony:
- Pozycjonowanie stron internetowych Rzeszów — Roxart.pl
- Kampanie reklamowe Rzeszów / Roxart.pl
- Wbijaj na ROXflow w Rzeszowie x Roxart.pl
Mamy tu „słowo kluczowe” opisujące produkt lub usługę oraz brand. Ma to znaczenie w wynikach wyszukiwania, gdzie warto mocniej eksponować brand:
Tag meta title — GoogleBot „wie” lepiej jaki powinien wyświetlić meta tag title
Google jednak nie byłoby sobą gdyby nie starało się utrudnić życia specjalistom SEO. Jak wspomniałem, znaczniki title mają przełożenie na pozycje. SEOwcy o tym wiedzą. A co za tym idzie? Wykorzystują! A Google grozi palcem. Taka praktyka jest nie do wychwycenia przez GoogleBota. Co więc zrobili?
Cofnijmy się nieco w czasie i rozłóżmy to, co widzimy na części:
Idąc od góry, mamy tu:
- domenę,
- adres URL z ładnym podziałem na sekcję „domena > oferta”,
- treści meta tagów <title>*,
- a dalej też description (do tego szerzej jeszcze dojdziemy).
Powyżej przy <title> dałem *. Nie, nie… nie szukaj jej wyjaśnienia na końcu artykułu. Spieszę z odpowiedzią, co ona oznacza. W tym przypadku meta tag title nie został zaczarowany przez Google bota i wygląda 1:1 tak, jak jest dodany w kodzie. Czy jest tak zawsze? Nie. Google wie lepiej, czego chcemy (a przynajmniej tak mu się wydaje). Oznacza to, że jeśli GoogleBot uzna za słuszne, może samodzielnie „lepiej” dopasować tytuł wyświetlany w wynikach wyszukiwania do zapytania użytkownika wyszukiwarki. Są na to sposoby, ale to temat na osobny artykuł. Na tym etapie wystarczy nam sama świadomość, że może tak się zdarzyć i to nie jest błąd systemu.
Opis strony — tagi meta description — niedoceniany, zapomniany, ale wariat!
Znacznik title często jest dodawany w kodzie strony automatycznie za sprawą systemów CMS, które ustawiają go na bazie nazwy strony z systemu, jak mawiają „lepsze coś, niż nic”. Meta tagi Google jednak nie kończą się na samym tytule. Jak już pokazywałem na screenie wyników wyszukiwania. Do dyspozycji mamy również meta opis. Co prawda nie należy do najważniejszych znaczników meta , ale to nie znaczy, że możemy go ignorować.
O ile w przypadku meta title GoogleBot nie jest tak bardzo skory do podmiany treści, tak tu już lubi zaszaleć. Czemu? Jednym z powodów jest fakt, że wiele stron nie posiada go w ogóle uzupełnionego. Ale po kolei. Zacznijmy od teorii.
Znacznik HTML meta description to element, który służy do opisu treści strony internetowej. Znajduje się on w sekcji nagłówka (head) strony HTML i jest wykorzystywany przez wyszukiwarki internetowe, aby wyświetlić krótki opis strony w wynikach wyszukiwania.
Przykładowy kod HTML z meta description:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
<meta name="description" content="Krótki opis strony, zawierający najważniejsze informacje o jej zawartości.">
</head>
<body>
Treść strony...
</body>
</html>
Warto zadbać o to, aby meta description był jak najbardziej precyzyjny i atrakcyjny dla użytkowników, ponieważ może to wpłynąć na decyzję o kliknięciu wyniku wyszukiwania. Warto też pamiętać, że meta description nie wpływa na pozycjonowanie strony w wynikach wyszukiwania, ale może pomóc w poprawie jej klikalności. Jak? Z pewnością nie raz zdarzyło Ci się podczas wyszukiwania informacji zobaczyć, że szukana fraza była pogrubiona właśnie w opisie wyniku wyszukiwania.
Jak widzisz: szukając optymalizacji stron w Rzeszowie, fragment zapytania został pogrubiony w opisie wyniku wyszukiwania. To zwraca uwagę: „o tu jest coś, czego szukam”, a że opis jest zwięzły, to szybko go przeczytam i zobaczę czy kierunek mamy dobry. Jeśli tak? Klikam.
Jak wspomniałem, nie wpływa to na widoczność i pozycje w rozumieniu 1:1. Ale! Wpływa na CTR. Dalej generuje ruch, a to wpływa na czynniki behawioralne… i tak ziarnko do ziarnka, a uzbiera się miarka.
Jest jednak problem. Nie ma (a przynajmniej nie znam) systemu CMS, który opis meta zrobi za nas (w czasach AI, to zapewne kwestia miesięcy/dodania wtyczki). Tak czy siak, 9/10 stron internetowych, których audyty wykonywałem w ostatnim czasie, miała nieuzupełniony meta opis strony i najważniejszych jej podstron — jest to ogromna strata potencjału.
W takich sytuacjach Google bierze sprawy w swoje roboto-ręce i zaciąga samodzielnie fragment treści. Celność i trafność jest często na poziomie słynnego „2/10”. Raz jest to tekst z informacji o cookie, innym razem coś ze stopki… A z pewnością nic co przekona do kliknięcia w wynik wyszukiwania.
Tag robots — drogowskaz dla GoogleBota
Znacznik HTML meta robots jest używany do określenia wskazówek dla robotów wyszukiwarek internetowych, które przeglądają i indeksują strony internetowe. Znajduje się on w sekcji nagłówka (head) strony HTML i może mieć różne wartości, które wpływają na sposób, w jaki roboty wyszukiwarek działają na stronie.
Przykładowy kod HTML z meta robots:
<!DOCTYPE html>
<html>
<head>
<title>Kod meta robots do użycia na stronie</title>
<meta name="robots" content="index,follow">
</head>
<body>
Treść strony...
</body>
</html>
Wartości, jakie może przyjąć meta robots to między innymi:
- „index” — oznacza, że robot powinien zindeksować stronę i wyświetlać ją w wynikach wyszukiwania.
- „noindex” — oznacza, że robot nie powinien zindeksować strony i nie wyświetlać jej w swoich wynikach.
- „follow” — oznacza, że robot powinien śledzić linki na stronie i indeksować je.
- „nofollow” — oznacza, że robot nie powinien śledzić linków na stronie.
- „noarchive” — oznacza, że robot nie powinien przechowywać kopii archiwalnej strony w swoich zasobach.
- „nocache” — oznacza, że robot nie powinien przechowywać kopii podręcznej strony.
Warto zadbać o to, aby znacznik meta robots był poprawnie zdefiniowany na każdej stronie internetowej, aby uniknąć błędów indeksacji lub wyświetlania niechcianych treści w SERPach (Search Engine Results Page).
Czy warto dodawać jeszcze meta keywords? Tag dotyczący słów kluczowych
Nim odpowiemy sobie na pytanie ze śródtytułu. Musisz wiedzieć, czym w ogóle jest meta keywords. Klienci często pytają, czemu ten tag jest nieuzupełniony. Czy słusznie?
Meta keywords był kiedyś wykorzystywany do określenia słów kluczowych związanych z treścią strony. Znajduje się on w sekcji nagłówka (head) strony HTML i miał pomóc robotom wyszukiwarek w określeniu, jakie frazy są związane z daną stroną.
Przykładowy kod HTML z meta keywords:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
<meta name="keywords" content="słowo kluczowe 1, słowo kluczowe 2, słowo kluczowe 3">
</head>
<body>
Treść strony...
</body>
</html>
Jednak obecnie większość wyszukiwarek internetowych nie wykorzystuje znacznika keywords do określania zawartości strony, ponieważ został on nadużywany przez niektórych specjalistów SEO w celu manipulacji wynikami wyszukiwarki. W związku z tym znacznik ten stracił na znaczeniu i nie jest już rekomendowany do stosowania.
Warto jednak pamiętać, że dobre pozycjonowanie strony internetowej wymaga dostarczenia wysokiej jakości treści związanej z danym tematem, które powinny naturalnie zawierać słowa kluczowe. W ten sposób witryna internetowa będzie bardziej atrakcyjna dla użytkowników i robotów wyszukiwarek.
Nowoczesne algorytmy znacznie lepiej radzą sobie też z oceną treści strony. Wyłapywaniu powiązań i semantyki.
Jak dodawać meta znaczniki w WordPress
WordPress to system zarządzania treścią (CMS), który pozwala na łatwe tworzenie i zarządzanie stronami www. WordPress jest jednym z najpopularniejszych CMS-ów na świecie i jest używany przez miliony witryn internetowych, w tym zarówno blogów, jak i stron firmowych czy sklepów internetowych. System ten oferuje wiele funkcjonalności, takich jak edytor treści WYSIWYG, bogaty wybór motywów i wtyczek, obsługę wielu autorów, możliwość tworzenia kategorii i tagów, oraz wiele innych. WordPress jest darmowy i otwartoźródłowy, co oznacza, że każdy może go pobrać, używać, modyfikować i dostosowywać do swoich potrzeb.
Dlatego też to właśnie na przykładzie tego systemu CMS opowiem, w jaki sposób można samodzielnie zarządzać meta tagami bez znajomości html i grzebania w kodzie strony.
Aby dodać meta tagi do poszczególnych podstron w WordPress, możesz skorzystać ze wtyczki SEO, np. Yoast SEO. Ta wtyczka umożliwia łatwe dodawanie meta tagów do każdej strony lub wpisu w WordPress.
- Instalacja wtyczki Yoast SEO:
- Wejdź w zakładkę „Wtyczki” w panelu administracyjnym WordPress.
- Kliknij „Dodaj nową” i wyszukaj wtyczkę Yoast SEO.
- Zainstaluj i aktywuj wtyczkę.
- Dodawanie meta tagów do podstrony:
- Przejdź do strony, do której chcesz dodać meta tagi.
- Na dole strony znajdziesz sekcję „Yoast SEO”, kliknij ikonę „Edit snippet”.
- W polu „SEO title” wpisz tytuł meta tagu „title”.
- W polu „Meta description” wpisz opis meta tagu „meta description”.
- Opcjonalnie, w polu „Focus keyphrase” możesz wpisać frazę kluczową, związana z treścią strony.
- Kliknij przycisk „Close snippet editor” i zaktualizuj lub opublikuj stronę.
Pamiętaj, że przy dodawaniu meta tagów do poszczególnych podstron w WordPress, powinno się stosować do najlepszych praktyk SEO. Meta tag „title” powinien być unikalny dla każdej strony i zawierać frazy kluczowe, a meta tag „meta description” powinien przyciągać uwagę użytkowników i skłonić ich do kliknięcia linku.
Znaczenie meta tagu w SEO — podsumowanie
Trochę już wiesz o znaczeniu poszczególnych meta tagów w optymalizacji dla wyszukiwarek (SEO) oraz jak ich użyć, aby poprawić widoczność strony www w organicznych wynikach wyszukiwarki. Meta tagi, zwane także tagami HTML, wpływają nie tylko na zachowanie robotów Google’a, ale także mogą zwiększyć wskaźnik klikalności (CTR) w wynikach Google. Poznałeś również różne rodzaje meta tagów, ich znaczenie oraz jak zautomatyzować proces dodawania ich na stronę www. Wiesz, że meta tag tytułu jest kluczowym elementem dla każdej stron i jak stworzyć dobrze skonstruowany meta tag tytułu. Optymalna długość meta tagu tytułu jest kwestią dyskusyjną, ale ja sugeruje, aby był zwięzły, opisowy i precyzyjny.
Jeśli potrzebujesz pomocy z SEO — skontaktuj się z nami, a wykonamy za Ciebie te wszystkie elementy, o których pisałem. Zaczniemy oczywiście od przeanalizowania wszystkiego, aby wiedzieć, co jest do poprawy. Czekamy na Twój kontakt!
wróć do listy wpisówCo Cię interesuje?
- Bez kategorii (2)
- case study (6)
- content marketing (32)
- digital marketing (16)
- e-commerce (18)
- fotografia (3)
- GetResponse (2)
- grafika (6)
- influencer marketing (6)
- marketing (100)
- nasza agencja (17)
- pozyskiwanie leadów (5)
- reklama (56)
- reklama w google (14)
- SEO (19)
- social media (50)
- social special (8)
- sprzedaż (56)
- strony internetowe (27)
- sztuczna inteligencja (5)
- wideo (4)
Co Cię interesuje?
- Bez kategorii (2)
- case study (6)
- content marketing (32)
- digital marketing (16)
- e-commerce (18)
- fotografia (3)
- GetResponse (2)
- grafika (6)
- influencer marketing (6)
- marketing (100)
- nasza agencja (17)
- pozyskiwanie leadów (5)
- reklama (56)
- reklama w google (14)
- SEO (19)
- social media (50)
- social special (8)
- sprzedaż (56)
- strony internetowe (27)
- sztuczna inteligencja (5)
- wideo (4)