Czym są metatagi i do czego są potrzebne?

Meta tagi to specjalne tagi HTML, które dostarczają metadanych (informacji o dokumencie) dla przeglądarek i wyszukiwarek. Znajdują się w sekcji <head> dokumentu HTML.

Główne typy meta tagów i ich przeznaczenie:

charset: Określa kodowanie znaków strony, np. UTF-8. Jest ważne dla poprawnego wyświetlania tekstu.
```
<meta charset="UTF-8">
```
name="description": Definiuje krótki opis zawartości strony. Używany przez wyszukiwarki w wynikach.
```
<meta name="description" content="Krótki opis Twojej strony dla wyszukiwarek.">
```
name="keywords": Lista słów kluczowych opisujących zawartość strony. Wpływ na SEO zmalał, ale może być używany przez starsze systemy.
```
<meta name="keywords" content="słowo klucz1, słowo klucz2, słowo klucz3">
```
name="viewport": Kontroluje skalowanie i rozmiary obszaru widoku na urządzeniach mobilnych. Kluczowe dla responsywnego designu.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- width=device-width: Szerokość obszaru widoku jest równa szerokości ekranu urządzenia.
- initial-scale=1.0: Początkowe skalowanie strony przy ładowaniu.

name="robots": Określa reguły indeksowania strony dla robotów wyszukiwarek.

Tabela wartości atrybutu content:

Wartość	Opis
`index`	Zezwala na indeksowanie strony.
`noindex`	Zabrania indeksowania strony.
`follow`	Zezwala na podążanie za linkami na stronie i ich indeksowanie.
`nofollow`	Zabrania podążania za linkami na stronie.
`all`	Równoważne z `index, follow`. (domyślna wartość)
`none`	Równoważne z `noindex, nofollow`.

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

property (Open Graph, Twitter Cards): Używane do określenia, jak będzie wyglądała zawartość strony podczas publikacji w mediach społecznościowych.

<meta property="og:title" content="Tytuł dla mediów społecznościowych">
<meta property="og:description" content="Opis dla mediów społecznościowych">
<meta property="og:image" content="URL obrazu do podglądu">
<meta property="og:url" content="URL strony">
<meta name="twitter:card" content="summary_large_image">

Potrzeba meta tagów sprowadza się do:

SEO (Optymalizacja dla wyszukiwarek): Pomagają wyszukiwarkom zrozumieć tematykę i zawartość strony, co wpływa na pozycjonowanie i wyświetlanie w wynikach wyszukiwania (description, keywords, robots).
UX (Doświadczenie użytkownika): Ulepszają wyświetlanie i interakcję ze stroną na różnych urządzeniach (viewport).
Media społecznościowe: Określają atrakcyjny wygląd linku podczas publikacji, zwiększając klikalność (property - Open Graph, Twitter Cards).
Informacje techniczne: Dostarczają ważne dane techniczne dla przeglądarki (np. kodowanie).

Użycie meta tagów jest obowiązkowe do tworzenia poprawnych, zoptymalizowanych i przyjaznych użytkownikowi stron internetowych.