#2 Nagłówek i treść HTML
Twórz profesjonalne strony WWW! Kompleksowy przewodnik po strukturze HTML, znaczeniu metatagów, SEO i RWD. Opanuj robots, canonical, viewport i obowiązkowe UTF-8, aby osiągnąć optymalne wyniki w Google.
Informacje nagłówkowe (metadane)
W kontekście tworzenia stron WWW, niezwykle istotne jest zrozumienie struktury dokumentu HTML, w tym różnicy między nagłówkiem (<head>) a ciałem (<body>). Nagłówek zawiera metainformacje, które nie wpływają bezpośrednio na wygląd dokumentu, ale są równie ważne.
Metainformacje i ich znaczenie
Metainformacje, definiowane za pomocą znacznika <meta>, pozwalają określić ogólne wiadomości dotyczące dokumentu, takie jak sposób kodowania znaków, opis zawartości czy język. Zastosowanie metainformacji może pomóc w odszukaniu strony przez wyszukiwarki sieciowe.
- Deklaracja strony kodowej: zawsze należy stosować <meta charset="utf-8">, zwłaszcza pisząc po polsku, aby uniknąć błędnego wyświetlania polskich liter.
- Opis zawartości: <meta name="description"> zachęca internautów do odwiedzenia strony, wyświetlając opis w wyszukiwarkach (np. Google).
- Język strony: atrybut lang w znaczniku
<html>(np.lang="pl"dla języka polskiego) jest nieobowiązkowy, ale ułatwia pracę automatycznym tłumaczom. - Roboty: znacznik <meta name="robots"> steruje zachowaniem robotów-indekserów, określając, czy strona ma być indeksowana ("index") czy nie ("noindex") oraz czy roboty mają podążać za odsyłaczami ("follow" lub "nofollow").
Dodatkowe funkcje i linki
W nagłówku dokumentu można także umieścić inne elementy <link> lub <meta>, które dodają specjalne funkcje lub wskazują na powiązane dokumenty.
- Strona Kanoniczna: w celu usunięcia zduplikowanych stron z wyników wyszukiwania (powielona treść pod różnymi URL), stosuje się znacznik <link rel="canonical">. Wyszukiwarka zazwyczaj wyświetli tylko wskazaną wersję kanoniczną.
- Wersje językowe: do wskazania alternatywnych wersji językowych używa się <link rel="alternate" hreflang>. Jest to wykorzystywane przez Google do dopasowania wersji strony do ustawień przeglądarki użytkownika.
- Automatyczne odświeżanie/przekierowanie: możliwe jest automatyczne odświeżanie strony co określony czas (np. 60 sekund) za pomocą <meta http-equiv="refresh"> lub przekierowanie użytkownika na inny adres, np. natychmiastowo, za pomocą
content="0; url=...".
Pamiętajmy, że polecenie BODY powinno wchodzić w skład każdego dokumentu HTML i zawierać wszystkie widoczne elementy. Wszystkie znaczniki <meta> i <title> muszą znajdować się wewnątrz nagłówka strony (<head>...</head>).