Znaczniki <meta> - Kurs HTML

Lekcja 11.1: Znaczniki <meta>

Strona główna > Rozdział 11: Zaawansowane funkcje HTML > Znaczniki <meta>

Definiowanie metadanych strony

Znaczniki <meta> umieszczane są w sekcji <head> dokumentu HTML i służą do dostarczania metadanych o stronie. Metadane to informacje o danych - w tym przypadku, informacje o samej stronie HTML, które nie są bezpośrednio wyświetlane użytkownikowi, ale są wykorzystywane przez przeglądarki, wyszukiwarki internetowe (SEO) i inne serwisy.

Element <meta> jest elementem pustym i zazwyczaj używa atrybutów name i content lub http-equiv i content, albo atrybutu charset.

Określanie kodowania znaków: `charset`

Jest to jeden z najważniejszych i najczęściej używanych znaczników meta. Określa kodowanie znaków używane w dokumencie HTML. Prawidłowe zdefiniowanie kodowania jest kluczowe, aby przeglądarka poprawnie wyświetlała wszystkie znaki, w tym znaki specjalne i diakrytyczne (np. polskie litery ą, ę, ć, ł, ó, ś, ź, ż).

W HTML5 zalecanym i najprostszym sposobem jest użycie:

<meta charset="UTF-8">

UTF-8 jest uniwersalnym standardem kodowania, który obsługuje praktycznie wszystkie znaki używane w różnych językach świata i jest zdecydowanie zalecany dla nowoczesnych stron internetowych.

Ten znacznik powinien być umieszczony jak najwcześniej w sekcji <head>, najlepiej zaraz po otwierającym <head>.

Metadane dla SEO i opisu strony: `name` i `content`

Atrybut name określa rodzaj metadanych, a content zawiera ich wartość. Kilka ważnych typów metadanych używanych głównie przez wyszukiwarki:

description: Krótki opis zawartości strony (zazwyczaj do ok. 150-160 znaków). Wyszukiwarki często wyświetlają ten opis pod tytułem strony w wynikach wyszukiwania. Dobrze napisany opis może zachęcić użytkowników do kliknięcia linku.
```
<meta name="description" content="Kompleksowy kurs HTML dla początkujących i średniozaawansowanych. Naucz się tworzyć strony WWW od podstaw.">
```
keywords: Lista słów kluczowych oddzielonych przecinkami, związanych z tematyką strony. Uwaga: Znaczenie tego tagu dla SEO znacznie spadło w ostatnich latach; główne wyszukiwarki (jak Google) w dużej mierze go ignorują, ale nadal może być używany przez niektóre mniejsze wyszukiwarki lub systemy CMS.
```
<meta name="keywords" content="html, kurs html, nauka html, tworzenie stron, html5, css, web development">
```

author: Nazwa autora strony lub treści.

<meta name="author" content="Jan Kowalski">

robots: Instrukcje dla robotów wyszukiwarek dotyczące indeksowania i śledzenia linków na stronie. Przykładowe wartości content:
- index, follow (domyślne): Indeksuj stronę i podążaj za linkami.
- noindex, nofollow: Nie indeksuj strony i nie podążaj za linkami.
- index, nofollow: Indeksuj stronę, ale nie podążaj za linkami.
- noindex, follow: Nie indeksuj strony, ale podążaj za linkami.
```
<meta name="robots" content="noindex, follow">
```

Konfiguracja widoku na urządzeniach mobilnych: `viewport`

Jest to kluczowy znacznik meta dla responsywnego projektowania stron (RWD - Responsive Web Design). Informuje przeglądarkę mobilną, jak ma kontrolować wymiary i skalowanie strony.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: Ustawia szerokość obszaru widoku (viewport) na szerokość ekranu urządzenia.
initial-scale=1.0: Ustawia początkowy poziom powiększenia na 1 (brak powiększenia).

Bez tego znacznika, przeglądarki mobilne często próbują wyświetlić stronę tak, jakby była oglądana na dużym ekranie komputera, a następnie ją pomniejszają, co skutkuje małym, nieczytelnym tekstem i koniecznością powiększania przez użytkownika.

Odświeżanie strony i przekierowania: `http-equiv`

Atrybut http-equiv pozwala symulować nagłówki odpowiedzi HTTP. Chociaż jego użycie jest obecnie mniej powszechne (preferuje się konfigurację po stronie serwera), nadal można go spotkać, np. do automatycznego odświeżania strony lub przekierowania.

Odświeżanie co X sekund:

<meta http-equiv="refresh" content="30"> <!-- Odśwież stronę co 30 sekund -->

Przekierowanie po X sekundach:

<meta http-equiv="refresh" content="5; url=https://nowyadres.com/"> <!-- Przekieruj na nowy adres po 5 sekundach -->

Uwaga: Używanie http-equiv="refresh" do przekierowań jest uważane za złą praktykę SEO i może być mylące dla użytkowników. Lepiej stosować przekierowania po stronie serwera (np. status 301) lub ewentualnie przekierowania JavaScript.

Podsumowanie najważniejszych znaczników <meta>

W typowym nowoczesnym dokumencie HTML w sekcji <head> znajdziemy co najmniej:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Opis strony dla wyszukiwarek...">
  <title>Tytuł Strony</title>
  <!-- ... linki do CSS, itp. ... -->
</head>

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Do pustego dokumentu HTML dodaj w sekcji <head> następujące znaczniki meta:

Określający kodowanie jako UTF-8.
Konfigurujący viewport dla urządzeń mobilnych.
Zawierający opis strony: "Moja pierwsza strona z metadanymi".
Podający autora jako "Uczestnik Kursu HTML".

Dodaj również znacznik <title>.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
  <!-- 1. Kodowanie znaków -->
  <meta charset="UTF-8">
  
  <!-- 2. Konfiguracja viewportu -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 3. Opis strony -->
  <meta name="description" content="Moja pierwsza strona z metadanymi">
  
  <!-- 4. Autor strony -->
  <meta name="author" content="Uczestnik Kursu HTML">
  
  <!-- Tytuł strony -->
  <title>Strona z Metadanymi</title>
</head>
<body>
  <h1>Witaj na stronie!</h1>
  <p>Ta strona zawiera podstawowe znaczniki meta w sekcji head.</p>
</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Dodaj znacznik meta z name="keywords" i wpisz kilka słów kluczowych związanych z Twoimi zainteresowaniami.
Dodaj znacznik meta z name="robots" ustawiony tak, aby strona nie była indeksowana, ale linki na niej były śledzone.
Sprawdź kod źródłowy kilku znanych stron internetowych i zobacz, jakich znaczników meta używają w sekcji <head>.

Najczęściej zadawane pytania

Gdzie umieszcza się znaczniki <meta>?

Znaczniki <meta> umieszcza się zawsze wewnątrz sekcji <head> dokumentu HTML.

Do czego służy <meta charset="UTF-8">?

Określa kodowanie znaków używane na stronie jako UTF-8. Jest to kluczowe dla poprawnego wyświetlania wszystkich znaków, w tym polskich liter.

Jakie znaczniki meta są ważne dla SEO?

Najważniejsze to <meta name="description" content="..."> (opis strony wyświetlany w wynikach wyszukiwania) oraz <meta name="robots" content="..."> (instrukcje dla robotów). Znaczenie <meta name="keywords"> jest obecnie niewielkie.

Co robi <meta name="viewport" ...>?

Instruuje przeglądarki mobilne, jak mają skalować stronę i ustawić szerokość obszaru widoku (viewport). Jest niezbędny dla responsywnego designu (RWD).

Czy mogę użyć <meta> do przekierowania strony?

Tak, za pomocą <meta http-equiv="refresh" content="czas; url=adres">, ale jest to uważane za złą praktykę. Lepiej używać przekierowań serwerowych (301).