0Pricing
HTML Academy · Lekcja

title i jego rola w SEO

Pisanie skutecznych tytułów stron, które dobrze pozycjonują się w wyszukiwarkach

title i jego rola w SEO to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Element title

Element <title> ustawia tytuł dokumentu — jeden z najważniejszych elementów HTML:

  • Jest wyświetlany na karcie przeglądarki
  • Jest wyświetlany w wynikach wyszukiwarek (SERP)
  • Jest używany jako domyślna nazwa zakładki
  • Jest odczytywany przez czytniki ekranu podczas wczytywania strony

Gdzie umieszczać title

Element title należy umieścić wewnątrz <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Learn HTML5 — CoddyKit</title>
  </head>
  <body>...</body>
</html>

Najlepsze praktyki SEO dla title

Tworzenie tytułów skutecznych pod względem SEO:

  • Należy ograniczyć tytuł do mniej niż 60 znaków (Google skraca dłuższe tytuły)
  • Należy umieścić główne słowo kluczowe blisko początku
  • Należy uwzględnić nazwę witryny (zwykle na końcu)
  • Każda strona witryny powinna mieć unikatowy tytuł
  • Tytuł powinien być opisowy i zachęcający — to pierwsza rzecz, którą czytają osoby wyszukujące

Schemat tytułu: strona — witryna

Typowe schematy tytułów:

<!-- Page name first, site name last -->
<title>HTML Forms — CoddyKit</title>
<title>Contact Us — My Company</title>
<title>Search Results for "html" — CoddyKit</title>

<!-- For the homepage: site name first -->
<title>CoddyKit — Learn to Code</title>

<!-- Avoid: -->
<title>Untitled Document</title>  <!-- terrible -->
<title>Page 1</title>             <!-- not descriptive -->

Dynamiczne tytuły w SPA

Aplikacje jednostronicowe muszą aktualizować tytuł podczas nawigacji:

// React / Next.js:
// <title> is set in document.head or via framework

// Vanilla JavaScript:
function navigateTo(page) {
  const titles = {
    home: 'Home — MyApp',
    about: 'About Us — MyApp',
    blog: 'Blog — MyApp',
  };
  document.title = titles[page] || 'MyApp';
  history.pushState({}, '', '/' + page);
}

title i Open Graph

Element title jest uzupełniany przez Open Graph na potrzeby udostępniania w mediach społecznościowych:

<head>
  <title>HTML5 Semantic Elements Guide — CoddyKit</title>

  <!-- Override title for social sharing: -->
  <meta property="og:title" content="Master HTML5 Semantic Elements">
</head>
<!-- If og:title is absent, social networks may fall back to <title> -->

Testowanie długości title

Jak sprawdzić długość title w DevTools:

  • Należy otworzyć Chrome DevTools → panel Elements
  • Należy znaleźć <head> → <title>
  • Należy policzyć znaki, w tym spacje
  • Można też użyć: audyt Lighthouse → SEO → Document has a title

Nazwa Schema.org a title

Tytuł strony a nazwa Schema.org:

<!-- HTML title: shown in tabs and search results -->
<title>Widget Pro Review — Best Widgets 2025</title>

<!-- Schema.org: machine-readable name for structured data -->
<script type="application/ld+json">
{
  "@type": "Product",
  "name": "Widget Pro"
}
</script>

Dostępność title

Tytuł jest pierwszą informacją, którą użytkownicy czytników ekranu słyszą po otwarciu nowej strony:

  • Każda strona powinna mieć znaczący tytuł
  • W przypadku stron modalnych, dialogów lub SPA należy aktualizować tytuł, aby opisywał bieżący stan
  • Czytniki ekranu odczytują tytuł podczas wczytywania strony i przy każdej zmianie trasy
  • Tytuł powinien mieć sens także wtedy, gdy zostanie odczytany bez kontekstu strony

Tytuły umiędzynarodowione

W witrynach wielojęzycznych należy ustawiać tytuły w języku strony:

<!-- French page: -->
<html lang="fr">
  <head>
    <title>Apprendre HTML5 — CoddyKit</title>
  </head>

<!-- Hreflang tells Google about language variants: -->
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="fr" href="https://example.com/fr">

title w elementach iframe

Jeśli strona jest wczytywana w elemencie iframe, znaczenie ma jego title:

<!-- The iframe should have a descriptive title attribute: -->
<iframe src="/map" title="Interactive store locator map"></iframe>
<!-- The page inside the iframe also has its own <title> element -->
<!-- Screen readers read the iframe's title attribute, not the inner title -->

Pomiar wpływu title na SEO

Narzędzia do sprawdzania optymalizacji title:

  • Lighthouse → audyt SEO
  • Google Search Console → Performance (sprawdzenie rzeczywistych tytułów w wynikach wyszukiwania)
  • SEMrush / Ahrefs → sprawdzanie podglądu fragmentu SERP
  • Rozszerzenia Chrome: MozBar, SEO Meta in 1 Click

Szybkie sprawdzenie

Jaka jest zalecana maksymalna liczba znaków w tytule strony HTML?

Powtórzenie: title i SEO

Najważniejsze informacje o title:

  • Znajduje się w <head>, jest unikatowy dla każdej strony i wymagany
  • Powinien mieć mniej niż 60 znaków; słowo kluczowe powinno znajdować się blisko początku, a nazwa witryny na końcu
  • W SPA należy go aktualizować przy każdej nawigacji
  • Uzupełnia og:title podczas udostępniania w mediach społecznościowych
  • Czytniki ekranu odczytują tytuł podczas wczytywania strony

Często zadawane pytania

Czy lekcja „title i jego rola w SEO” jest bezpłatna?

Tak — pełny tekst „title i jego rola w SEO” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „title i jego rola w SEO”?

Pisanie skutecznych tytułów stron, które dobrze pozycjonują się w wyszukiwarkach Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „title i jego rola w SEO”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. title i jego rola w SEO
  2. meta charset viewport author i description
  3. Kanoniczne adresy URL i meta robots
  4. Favicon i ikona Apple Touch
← Powrót do HTML Academy