Znacznik HTMLStruktura dokumentu

<meta>

Metadane strony: kodowanie znaków, ustawienia widoku na telefonie, opis dla wyszukiwarek i podgląd linku w serwisach społecznościowych.

Wyświetlanie: none
Znacznik zamykający: Brak, element pusty
Dozwolona zawartość: Brak, element pusty

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kurs JavaScript dla początkujących | CodeWorlds</title>
  <meta name="description" content="Naucz się JavaScriptu od zera: zmienne, funkcje, pętle i DOM w krótkich, interaktywnych lekcjach.">
  <meta property="og:title" content="Kurs JavaScript dla początkujących">
  <meta property="og:image" content="https://www.codeworlds.com/og/kurs-javascript.png">
</head>

Definicja i zastosowanie

Element <meta> przekazuje informacje o dokumencie, których nie da się zapisać innymi elementami nagłówka. Jest pusty (nie ma znacznika zamykającego) i trafia do <head>. To, co oznacza, zależy od użytego atrybutu: charset deklaruje kodowanie znaków, para name i content opisuje nazwane metadane (np. opis strony), a http-equiv działa jak nagłówek wysłany przez serwer.

Dwa znaczniki powinny się znaleźć na każdej stronie. Pierwszy to <meta charset="utf-8">, dzięki któremu polskie litery wyświetlą się poprawnie. Drugi to <meta name="viewport">: bez niego telefon pokaże stronę tak, jakby miał ekran szerokości około 980 pikseli, i pomniejszy ją do nieczytelnych rozmiarów.

Opis (name="description") nie wpływa bezpośrednio na pozycję w Google, ale często trafia pod tytuł w wynikach wyszukiwania i zachęca do kliknięcia. Z kolei znaczniki Open Graph (property="og:…") decydują, jak link wygląda po udostępnieniu na Facebooku, LinkedInie czy w komunikatorach. Atrybut property nie pochodzi ze standardu HTML, tylko z protokołu Open Graph, ale rozumie go większość dużych platform.

Składnia

<meta charset="utf-8">
<meta name="nazwa" content="wartość">

Atrybuty

charset
utf-8
Deklaruje kodowanie znaków dokumentu. W HTML jedyną dozwoloną wartością jest utf-8. Znacznik musi się zmieścić w pierwszych 1024 bajtach pliku, więc wstaw go jako pierwszy element w <head>. Bez niego przeglądarka może źle odgadnąć kodowanie i zamiast „ą” czy „ł” pokaże dziwne znaki.
name="viewport"
width=device-width, initial-scale=1
Mówi przeglądarce na telefonie, jak szeroka ma być strona i w jakim powiększeniu ją pokazać. width=device-width dopasowuje szerokość układu do ekranu urządzenia, a initial-scale=1 wyłącza startowe pomniejszenie. Bez tego zapytania @media w CSS nie zadziałają na telefonach tak, jak zakładasz.
name="description"
tekst
Krótkie streszczenie strony. Wyszukiwarki często pokazują je pod tytułem w wynikach, zwykle do około 150–160 znaków. Pisz konkretnie i zachęcająco, a każdej podstronie daj inny opis.
name="robots"
index | noindex | follow | nofollow | …
Instrukcje dla robotów wyszukiwarek. noindex prosi, żeby strona nie pojawiała się w wynikach, a nofollow, żeby robot nie podążał za jej linkami. Domyślnie roboty indeksują stronę i odwiedzają linki, więc wartości index, follow nie trzeba wpisywać.
name="theme-color"
kolor CSS
Kolor, którym przeglądarka może zabarwić swój interfejs, na przykład pasek adresu na telefonie. Z atrybutem media podasz osobne kolory dla trybu jasnego i ciemnego. Nie wszystkie przeglądarki go obsługują, więc traktuj go jako miły dodatek.
content
tekst
Wartość metadanej. Występuje zawsze w parze z name, http-equiv albo property, a jej format zależy od tego, co opisujesz: dla opisu strony to zwykły tekst, dla viewport lista ustawień rozdzielonych przecinkami.
http-equiv
content-security-policy | refresh | …
Działa jak nagłówek HTTP wysłany przez serwer. refresh przeładowuje stronę lub przekierowuje pod inny adres po podanej liczbie sekund (unikaj tego, bo zaskakuje użytkowników). content-security-policy ogranicza, skąd strona może wczytywać skrypty i inne zasoby. Wpis X-UA-Compatible ze starszych szablonów dotyczył tylko Internet Explorera i dziś jest zbędny.
property
og:title | og:description | og:image | og:url | og:type | …
Znaczniki protokołu Open Graph, z których serwisy społecznościowe budują podgląd udostępnionego linku: tytuł, opis i obrazek. Adres w og:image podaj w pełnej postaci, z https://. Obraz o wymiarach 1200 × 630 pikseli dobrze wygląda na większości platform. X (dawny Twitter) korzysta z tych samych danych, a rodzaj karty ustawisz dodatkowo znacznikiem name="twitter:card".

Atrybut	Wartości	Opis
charset	utf-8	Deklaruje kodowanie znaków dokumentu. W HTML jedyną dozwoloną wartością jest `utf-8`. Znacznik musi się zmieścić w pierwszych 1024 bajtach pliku, więc wstaw go jako pierwszy element w `<head>`. Bez niego przeglądarka może źle odgadnąć kodowanie i zamiast „ą” czy „ł” pokaże dziwne znaki.
name="viewport"	width=device-width, initial-scale=1	Mówi przeglądarce na telefonie, jak szeroka ma być strona i w jakim powiększeniu ją pokazać. `width=device-width` dopasowuje szerokość układu do ekranu urządzenia, a `initial-scale=1` wyłącza startowe pomniejszenie. Bez tego zapytania `@media` w CSS nie zadziałają na telefonach tak, jak zakładasz.
name="description"	tekst	Krótkie streszczenie strony. Wyszukiwarki często pokazują je pod tytułem w wynikach, zwykle do około 150–160 znaków. Pisz konkretnie i zachęcająco, a każdej podstronie daj inny opis.
name="robots"	index \| noindex \| follow \| nofollow \| …	Instrukcje dla robotów wyszukiwarek. `noindex` prosi, żeby strona nie pojawiała się w wynikach, a `nofollow`, żeby robot nie podążał za jej linkami. Domyślnie roboty indeksują stronę i odwiedzają linki, więc wartości `index, follow` nie trzeba wpisywać.
name="theme-color"	kolor CSS	Kolor, którym przeglądarka może zabarwić swój interfejs, na przykład pasek adresu na telefonie. Z atrybutem `media` podasz osobne kolory dla trybu jasnego i ciemnego. Nie wszystkie przeglądarki go obsługują, więc traktuj go jako miły dodatek.
content	tekst	Wartość metadanej. Występuje zawsze w parze z `name`, `http-equiv` albo `property`, a jej format zależy od tego, co opisujesz: dla opisu strony to zwykły tekst, dla viewport lista ustawień rozdzielonych przecinkami.
http-equiv	content-security-policy \| refresh \| …	Działa jak nagłówek HTTP wysłany przez serwer. `refresh` przeładowuje stronę lub przekierowuje pod inny adres po podanej liczbie sekund (unikaj tego, bo zaskakuje użytkowników). `content-security-policy` ogranicza, skąd strona może wczytywać skrypty i inne zasoby. Wpis `X-UA-Compatible` ze starszych szablonów dotyczył tylko Internet Explorera i dziś jest zbędny.
property	og:title \| og:description \| og:image \| og:url \| og:type \| …	Znaczniki protokołu Open Graph, z których serwisy społecznościowe budują podgląd udostępnionego linku: tytuł, opis i obrazek. Adres w `og:image` podaj w pełnej postaci, z `https://`. Obraz o wymiarach 1200 × 630 pikseli dobrze wygląda na większości platform. X (dawny Twitter) korzysta z tych samych danych, a rodzaj karty ustawisz dodatkowo znacznikiem `name="twitter:card"`.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

charset

utf-8

Deklaruje kodowanie znaków dokumentu. W HTML jedyną dozwoloną wartością jest utf-8. Znacznik musi się zmieścić w pierwszych 1024 bajtach pliku, więc wstaw go jako pierwszy element w <head>. Bez niego przeglądarka może źle odgadnąć kodowanie i zamiast „ą” czy „ł” pokaże dziwne znaki.

HTML

<head>
  <meta charset="utf-8">
  <title>Zażółć gęślą jaźń</title>
</head>

name="viewport"

width=device-width, initial-scale=1

Mówi przeglądarce na telefonie, jak szeroka ma być strona i w jakim powiększeniu ją pokazać. width=device-width dopasowuje szerokość układu do ekranu urządzenia, a initial-scale=1 wyłącza startowe pomniejszenie. Bez tego zapytania @media w CSS nie zadziałają na telefonach tak, jak zakładasz.

HTML

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

name="description"

tekst

Krótkie streszczenie strony. Wyszukiwarki często pokazują je pod tytułem w wynikach, zwykle do około 150–160 znaków. Pisz konkretnie i zachęcająco, a każdej podstronie daj inny opis.

HTML

<meta name="description" content="Darmowy kurs HTML dla początkujących: 24 lekcje, zadania z podglądem na żywo i certyfikat na koniec.">

name="robots"

index | noindex | follow | nofollow | …

Instrukcje dla robotów wyszukiwarek. noindex prosi, żeby strona nie pojawiała się w wynikach, a nofollow, żeby robot nie podążał za jej linkami. Domyślnie roboty indeksują stronę i odwiedzają linki, więc wartości index, follow nie trzeba wpisywać.

HTML

<meta name="robots" content="noindex, follow">

Typowe zastosowanie: strona koszyka albo wyników wyszukiwania w serwisie, która nie powinna trafić do Google.

name="theme-color"

kolor CSS

Kolor, którym przeglądarka może zabarwić swój interfejs, na przykład pasek adresu na telefonie. Z atrybutem media podasz osobne kolory dla trybu jasnego i ciemnego. Nie wszystkie przeglądarki go obsługują, więc traktuj go jako miły dodatek.

HTML

<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

http-equiv

content-security-policy | refresh | …

Działa jak nagłówek HTTP wysłany przez serwer. refresh przeładowuje stronę lub przekierowuje pod inny adres po podanej liczbie sekund (unikaj tego, bo zaskakuje użytkowników). content-security-policy ogranicza, skąd strona może wczytywać skrypty i inne zasoby. Wpis X-UA-Compatible ze starszych szablonów dotyczył tylko Internet Explorera i dziś jest zbędny.

HTML

<meta http-equiv="content-security-policy" content="default-src 'self'">
<meta http-equiv="refresh" content="5; url=/kursy">

Pierwszy znacznik pozwala wczytywać skrypty, style i obrazy tylko z własnej domeny. Drugi po 5 sekundach przenosi na stronę /kursy.

property

Znaczniki protokołu Open Graph, z których serwisy społecznościowe budują podgląd udostępnionego linku: tytuł, opis i obrazek. Adres w og:image podaj w pełnej postaci, z https://. Obraz o wymiarach 1200 × 630 pikseli dobrze wygląda na większości platform. X (dawny Twitter) korzysta z tych samych danych, a rodzaj karty ustawisz dodatkowo znacznikiem name="twitter:card".

HTML

<meta property="og:type" content="website">
<meta property="og:url" content="https://www.codeworlds.com/kurs-javascript">
<meta property="og:title" content="Kurs JavaScript dla początkujących">
<meta property="og:description" content="Zmienne, funkcje i pętle w krótkich lekcjach z podglądem na żywo.">
<meta property="og:image" content="https://www.codeworlds.com/og/kurs-javascript.png">
<meta name="twitter:card" content="summary_large_image">

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

meta {
  display: none;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

<meta charset="utf-8"> wstaw jako pierwszy element w <head>, jeszcze przed <title>.
Nie blokuj powiększania strony wartościami maximum-scale=1 czy user-scalable=no. Osoby słabowidzące muszą móc przybliżyć tekst.
Po dodaniu znaczników Open Graph sprawdź podgląd linku w narzędziach platform, np. w Sharing Debugger od Facebooka. Serwisy zapamiętują podgląd, więc po zmianach trzeba go tam odświeżyć.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs