Rola meta tagów w strukturze strony internetowej
Meta tagi to niewidoczne dla użytkownika znaczniki HTML, które przekazują przeglądarkom i wyszukiwarkom dodatkowe informacje o stronie internetowej. Umieszcza się je w sekcji head kodu źródłowego, więc nie zmieniają wyglądu podstrony. W dokumentacji Search Central lista obsługiwanych metatagów ma 9 pozycji: description, robots z wariantem dla Googlebota, notranslate, nopagereadaloud, google-site-verification, Content-Type z charset, refresh, viewport oraz rating.
Od tych znaczników zależy indeksowanie, optymalizacja pod wyszukiwarki, bezpieczeństwo i poprawne wyświetlanie w przeglądarce. Część ma charakter informacyjny, inne sterują zachowaniem robotów albo wyglądem linku w mediach społecznościowych. Tagów spoza swojej listy Google nie bierze pod uwagę, bo jak pisze w dokumentacji, "zignoruje tagi meta, których nie obsługuje".
Najczęściej stosowane meta tagi
Najczęściej stosowane meta tagi to charset, viewport, description i robots, a obok nich element title, znaczniki Open Graph i dawny tag keywords. Przy każdym podajemy przykład kodu do skopiowania.
Meta charset, czyli kodowanie znaków
Meta charset określa zestaw znaków, w którym zapisano plik. Dzięki niemu przeglądarka poprawnie wyświetla polskie litery i symbole z innych alfabetów. Google radzi: "W miarę możliwości zalecamy używanie kodowania Unicode/UTF-8". Przykład:
<meta charset="UTF-8">
Gdy brakuje tej deklaracji albo podaje inne kodowanie niż plik, w miejscu "ą" czy "ż" pojawiają się nieczytelne symbole, a czytelnik szybko opuszcza taką stronę.
Meta viewport, czyli wyświetlanie na telefonach
Meta viewport określa, jak dopasować układ do ekranu smartfona albo tabletu. Dokumentacja Google opisuje go tak: "Ten tag informuje przeglądarkę, jak renderować stronę na urządzeniu mobilnym." W kolejnym zdaniu dodaje, że jego obecność to dla wyszukiwarki sygnał dostosowania do telefonów. Bez niego smartfon pokazuje pomniejszoną wersję na komputer:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Parametr width=device-width dopasowuje szerokość układu do ekranu, a initial-scale=1.0 ustawia początkowe powiększenie na 100%.
Meta description, czyli opis strony w wynikach wyszukiwania
Meta description to streszczenie podstrony, którego Google czasem używa pod linkiem zamiast fragmentu treści. Dokumentacja mówi wprost: "Metaopis nie ma limitu długości, ale krótkie opisy w wynikach wyszukiwania zwykle są przycinane do szerokości ekranu". Liczbę 160 znaków traktuj więc jako orientacyjną miarę, a nie wymóg:
<meta name="description" content="Krótkie podsumowanie treści tej podstrony">
Dobrze napisany metaopis może zwiększyć współczynnik klikalności (CTR) w bezpłatnej części Google. Według dokumentacji identyczne albo bardzo podobne teksty na wielu podstronach nie pomagają, a przy braku czasu radzi ona zacząć od strony głównej oraz najpopularniejszych adresów. Jak go przygotować krok po kroku, pokazujemy we wpisie o tym, co to jest meta description i jakie znaczenie mają meta opisy dla SEO.
Meta robots, czyli kontrola indeksowania przez wyszukiwarki
Meta robots decyduje, czy wyszukiwarki mają pokazywać stronę w wynikach i podążać za umieszczonymi na niej linkami. Przykłady najczęściej stosowanych reguł:
- <meta name="robots" content="index, follow">: zachowanie domyślne, czyli adres może trafić do wyników, a odnośniki służą do odkrywania kolejnych stron; wpisanie tego niczego nie zmienia,
- <meta name="robots" content="noindex, nofollow">: nie pokazuj strony w wynikach i nie używaj jej linków do szukania innych adresów,
- <meta name="robots" content="noarchive">: dawniej ukrywał link do kopii z pamięci podręcznej, ale Google pisze, że "nie używa już reguły noarchive", bo ta funkcja przestała istnieć,
- <meta name="robots" content="nosnippet">: blokuje fragment treści pod linkiem w Google; łagodniejsza wersja to max-snippet:50, czyli opis najwyżej 50 znaków.
Noindex dodaje się na stronach technicznych, formularzach i podstronach z powieloną treścią. Takiej strony nie wolno blokować w pliku robots.txt, bo Googlebot nie odczyta wtedy reguły, a przy dwóch sprzecznych (np. max-snippet:50 i nosnippet) Google wybiera bardziej restrykcyjną.
Title, czyli tytuł wyświetlany w wynikach wyszukiwania
Element title formalnie nie jest meta tagiem, ale to podstawa optymalizacji SEO: jego tekst widać w zakładce przeglądarki i najczęściej w niebieskim linku w Google:
<title>Tytuł podstrony, unikalny i opisowy</title>
Google zaznacza, że "nie ma limitu długości elementu <title>", lecz link w wynikach jest zwykle skracany do szerokości urządzenia, dlatego około 60 znaków traktuj jako orientacyjną miarę. Treść ma być zwięzła i opisowa, a najważniejszą frazę wystarczy użyć raz. Dokumentacja ostrzega: "Nie upychaj słów kluczowych". Unikaj też schematów: napis "Tanie produkty na sprzedaż" przy każdej karcie w sklepie nie pozwala odróżnić stron.
Open Graph, czyli wygląd linku w mediach społecznościowych
Meta tagi Open Graph określają, jak link do strony wygląda po udostępnieniu na Facebooku, LinkedIn czy innych platformach społecznościowych. Mają atrybut property zamiast name, a og:title jest dla Google jednym ze źródeł nagłówka wyniku w wyszukiwarce:
- <meta property="og:title" content="Tytuł posta">: nagłówek widoczny w podglądzie,
- <meta property="og:description" content="Opis posta">: krótkie streszczenie, według poradnika web.dev najwyżej 3 zdania,
- <meta property="og:image" content="https://example.pl/obrazek.jpg">: bezwzględny adres grafiki razem z protokołem, pokazywanej jako miniatura,
- <meta property="og:type" content="website">: rodzaj treści (website, article, product),
- <meta property="og:url" content="https://example.pl/strona">: kanoniczny adres podstrony.
Bez tych znaczników platforma sama pobiera nazwę i opis ze zwykłego metatagu description, ale nie zawsze trafia z grafiką, więc podgląd wpisu bywa przypadkowy.
Meta keywords, czyli przestarzały tag bez znaczenia
Meta keywords służył dawniej do wypisywania słów kluczowych, a dziś Google pomija go przy indeksowaniu i ustalaniu pozycji. Przykład:
<meta name="keywords" content="przykład, słowo, frazy">
Google potwierdził to na swoim blogu dla webmasterów 21 września 2009 roku. Aktualna dokumentacja nadal stwierdza: "Metatag słowa kluczowego nie jest wykorzystywany przez wyszukiwarkę Google i nie ma żadnego wpływu na indeksowanie i ranking". Wpisywanie go nie daje więc korzyści SEO.
Meta tagi wspierające wydajność i bezpieczeństwo
Do tej grupy należą 4 znaczniki, które zmieniają działanie przeglądarki, a nie wynik w Google:
- <meta http-equiv="Content-Security-Policy" content="default-src 'self'">: określa, z jakich źródeł wolno ładować skrypty i inne zasoby, co według web.dev "pomaga chronić przed atakami typu cross-site scripting" (XSS),
- <meta name="theme-color" content="#ffffff">: podaje barwę paska tytułu albo kart w programach, które obsługują kolorowanie interfejsu,
- <meta http-equiv="refresh" content="30">: przeładowuje stronę po 30 sekundach; Google zamiast takiego przekierowania poleca odesłanie 301 na serwerze, bo metaodświeżanie "może dezorientować użytkowników",
- <meta name="referrer" content="no-referrer">: decyduje, czy przy przejściu do innej domeny wysyłany jest adres strony źródłowej; bez tej deklaracji Chrome, Firefox i Edge stosują wartość domyślną strict-origin-when-cross-origin.
Znaczniki te wpływają na optymalizację techniczną strony, bezpieczeństwo i komfort użytkownika. Content-Security-Policy w kodzie HTML przydaje się wtedy, gdy nie możesz zmienić konfiguracji serwera, bo dyrektywy http-equiv zastępują właśnie odpowiedzi HTTP.
Gdzie umieścić meta tagi w kodzie HTML
Wszystkie meta tagi umieszcza się w sekcji head dokumentu HTML, przed zamykającym znacznikiem </head>. Przykład poprawnie zbudowanego fragmentu kodu:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hydraulik Katowice, naprawy i montaż | Firma X</title>
<meta name="description" content="Naprawy instalacji wodnych w Katowicach, sprawdź zakres usług i skontaktuj się z nami">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Hydraulik Katowice, Firma X">
<meta property="og:description" content="Opis dla mediów społecznościowych">
<meta property="og:image" content="https://example.pl/img.jpg">
<meta property="og:url" content="https://example.pl/">
<meta name="theme-color" content="#1a73e8">
<link rel="canonical" href="https://example.pl/">
</head>
<body>
...
</body>
</html>
Deklarację charset stawia się jak najbliżej początku sekcji head, przed innymi znacznikami, aby przeglądarka od razu rozpoznała kodowanie. Kod w tej części musi być poprawnym HTML, a Google odradza wstawianie i zmienianie metatagów skryptem JavaScript; gdy nie da się tego uniknąć, zaleca dokładne przetestowanie. W WordPressie, Wix czy Bloggerze system CMS może mieć, jak pisze Google, "stronę ustawień wyszukiwarki" albo inny sposób na dodanie tagów meta, więc ręczna edycja plików nie jest potrzebna.
Testowanie i walidacja meta tagów
Po dodaniu metatagów sprawdź je w co najmniej jednym z 4 miejsc:
- Google Search Console: narzędzie do sprawdzania adresów URL pokazuje, jak Google odczytał tagi meta i atrybuty danej podstrony, w tym regułę noindex,
- Facebook Sharing Debugger: wyświetla podgląd znaczników Open Graph przed publikacją wpisu,
- Walidator W3C: wykrywa błędy składniowe w kodzie HTML, w tym nieprawidłowe metatagi,
- Narzędzia SEO (Screaming Frog, Ahrefs): hurtowo kontrolują deklaracje na wszystkich adresach w obrębie domeny.
Regularny przegląd wykrywa powielone opisy, brak deklaracji viewport i błędnie ustawione dyrektywy robots, które mogą blokować indeksowanie podstron potrzebnych w Google. Crawler w rodzaju Screaming Frog zestawia metaopisy wszystkich adresów w jednej tabeli, więc duplikat widać od razu po posortowaniu kolumny.
