Podstawowe meta tagi w kodzie strony

12 lipca 2025
narzędzia SEO, optymalizacja strony, tworzenie stron

spis treści

Do czego służą meta tagi w kodzie strony
Najczęściej stosowane meta tagi
Meta tagi wspierające wydajność i bezpieczeństwo
Gdzie wstawić meta tagi w kodzie HTML

Do czego służą meta tagi w kodzie strony

Meta tagi to niewidoczne dla użytkownika znaczniki HTML, które przekazują przeglądarkom i wyszukiwarkom dodatkowe informacje o stronie internetowej. Umieszczane są w sekcji head kodu źródłowego i nie wpływają bezpośrednio na wygląd witryny.

Mają ogromne znaczenie dla indeksowania, SEO, bezpieczeństwa i kompatybilności. Część z nich ma charakter informacyjny, inne sterują zachowaniem robotów lub definiują zasady wyświetlania.

Najczęściej stosowane meta tagi

Krok 1: Meta charset

Definiuje kodowanie znaków na stronie. Dzięki niemu przeglądarka poprawnie wyświetla polskie litery i symbole. Przykład:
<meta charset=”UTF-8″>

Krok 2: Meta viewport

Niezbędny w stronach responsywnych – steruje dopasowaniem do ekranów mobilnych:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Krok 3: Meta description

Opis strony, który często pojawia się w wynikach wyszukiwania Google. Powinien być unikalny dla każdej podstrony:
<meta name=”description” content=”Opis zawartości strony do 160 znaków”>

Krok 4: Meta robots

Steruje indeksowaniem strony przez roboty Google. Przykłady:

<meta name=”robots” content=”index, follow”> – indeksuj stronę i podążaj za linkami,
<meta name=”robots” content=”noindex, nofollow”> – nie indeksuj i nie śledź linków,
<meta name=”robots” content=”noarchive”> – nie pokazuj wersji archiwalnej.

Krok 5: Meta title

Choć formalnie nie jest to meta tag, znacznik title to podstawowy element SEO, który wyświetla się w wynikach wyszukiwania i zakładce przeglądarki:
<title>Tytuł podstrony – unikalny i opisowy</title>

Krok 6: Open Graph (meta og:title, og:image)

Meta tagi Open Graph służą do definiowania, jak strona ma wyglądać po udostępnieniu w mediach społecznościowych:

<meta property=”og:title” content=”Tytuł posta”>
<meta property=”og:description” content=”Opis posta”>
<meta property=”og:image” content=”https://example.pl/obrazek.jpg”>

Krok 7: Meta keywords

Dawniej używany do umieszczania słów kluczowych, dziś ignorowany przez Google. Przykład:
<meta name=”keywords” content=”przykład, słowo, frazy”>

Meta tagi wspierające wydajność i bezpieczeństwo

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> – tryb zgodności z najnowszym silnikiem IE,
<meta http-equiv=”Content-Security-Policy” content=”default-src 'self'”> – blokuje ładowanie z zewnętrznych źródeł,
<meta name=”theme-color” content=”#ffffff”> – kolor paska przeglądarki na urządzeniach mobilnych.

Gdzie wstawić meta tagi w kodzie HTML

Wszystkie meta tagi należy umieszczać w sekcji head dokumentu HTML. Przykład poprawnego fragmentu kodu:

<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Przykład strony – Warszawa</title>
<meta name=”description” content=”Opis podstrony”>
<meta name=”robots” content=”index, follow”>
<meta property=”og:title” content=”Udostępniany tytuł”>
<meta property=”og:image” content=”https://example.pl/img.jpg”>
</head>
<body>
…
</body>
</html>

Stosowanie poprawnie skonstruowanych meta tagów ułatwia pozycjonowanie, udostępnianie w social mediach i poprawia odbiór strony przez użytkownika.

5/5 - (głosy: 1)

zaufali nam m.in.:

pytania?

jeżeli zainteresował Ciebie artykuł, poradnik, zapraszamy do kontaktu z nami - omówimy temat, znajdziemy razem rozwiązania i plan dla Twojej strony www.

skontaktuj się

wybrane artykuły

zobacz wszystkie artykuły