Aby ustawić tytuł strony w HTML, należy użyć znacznika <title>, który umieszcza się wyłącznie w sekcji <head> dokumentu. Tytuł ten pojawia się na karcie w przeglądarce oraz w wynikach wyszukiwania, odgrywając kluczową rolę zarówno dla użytkowników, jak i wyszukiwarek.
Krok po kroku – ustawianie tytułu strony
Gdzie umieścić znacznik <title>?
Znacznik <title> umieszcza się zawsze w sekcji nagłówkowej dokumentu HTML, czyli między znacznikami <head> oraz </head>:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Twój unikalny tytuł strony</title>
</head>
<body>
<!-- Zawartość strony -->
</body>
</html>
Uwaga – w każdym dokumencie HTML musi znajdować się dokładnie jeden znacznik <title>; każda podstrona powinna mieć swój własny, unikalny tytuł.
Jak tworzyć dobry tytuł strony?
- Odzwierciedlaj zawartość – tytuł powinien jasno informować użytkownika (i wyszukiwarki) o tym, czego dotyczy dana podstrona;
- Zwięzłość i czytelność – zaleca się, by długość tytułu nie przekraczała 56–60 znaków ze spacjami, czyli zazwyczaj 5–6 słów; za długie tytuły są automatycznie skracane w wynikach wyszukiwania;
- Unikaj ogólnikowych sformułowań – tytuły typu „Strona główna” lub „Bez tytułu” są mało użyteczne i nie wpływają dobrze na pozycjonowanie;
- Używaj fraz kluczowych – jeśli zależy Ci na widoczności w Google, umieść najbardziej istotne słowa kluczowe na początku tytułu, ale nie przesadzaj z ich ilością;
- Unikaj wielkich liter – pełny tytuł napisany z włączonym Caps Lockiem jest mniej czytelny i szybciej się skraca w wynikach wyszukiwania.
Przykłady zastosowań
Przykład 1 – strona główna firmy
<title>Nowoczesne ogrodzenia - Firma Stal-Bud | Warszawa</title>
- Zawiera zarówno frazę kluczową opisującą usługę, jak i nazwę firmy oraz lokalizację.
Przykład 2 – sklep internetowy, karta produktu
<title>Bluza sportowa damska Nike | Sklep sportowy FitZone</title>
- Precyzyjnie określa, jaki produkt jest prezentowany i gdzie się go znajduje.
Przykład 3 – blog z przepisami kulinarnymi
<title>Przepis na szybki sernik bez pieczenia | Blog Kulinarna Przygoda</title>
- Krótko i konkretnie – informuje, czego dotyczy podstrona i wskazuje nazwę bloga.
Przykład 4 – podstrona kontaktowa
<title>Kontakt - Agencja marketingowa Kreatywni</title>
- Od razu wiadomo, do czego służy dana strona i jakiej firmy dotyczy.
Najczęstsze błędy
- Brak znacznika
<title>– każda strona HTML powinna go posiadać; zignorowanie tego to błąd techniczny! - Taki sam tytuł na wszystkich podstronach – sprawia, że trudno je rozróżnić i pogarsza widoczność w wyszukiwarkach;
- Dodawanie znaczników HTML wewnątrz
<title>– tytuł może zawierać tylko tekst, inne znaczniki są zabronione.
Wskazówki dla zaawansowanych
- Możesz dynamicznie zmieniać tytuł strony np. za pomocą JavaScript, jednak domyślnie najlepiej zadbać, by wartość znacznika
<title>odpowiadała zawartości dokumentu już podczas ładowania strony; - Jeśli korzystasz z systemów zarządzania treścią (CMS), takich jak WordPress, szablony i wtyczki często umożliwiają indywidualne ustawienie tytułu dla każdej podstrony.
Podsumowanie – prawidłowe ustawienie tytułu strony za pomocą znacznika <title> w sekcji <head> jest podstawowym wymogiem poprawnej budowy i pozycjonowania witryny. Dzięki dobrze dobranemu tytułowi zwiększasz jej atrakcyjność, widoczność w wyszukiwarkach oraz ułatwiasz użytkownikom poruszanie się po Twoim serwisie.
