Ach te internety…

Wpisywanie protokołów sieciowych online Tworzenie nowego programu zapory Struktura połączenia internetowego Proces obsługi witryny Techniki programowania Metody

Zmieniający się tytuł zakładki – jak zmienić title strony w JavaScript

Wiktor Sadecki 9 min. czytania

Zmienić tytuł strony w JavaScript jest bardzo prosto – wystarczy przypisać nowy tekst do właściwości document.title albo zaktualizować zawartość znacznika <title> w DOM.

To wystarczy, aby tworzyć zarówno proste, jak i rozbudowane efekty „zmieniającej się zakładki” – od liczników powiadomień po subtelne przypomnienia po przełączeniu karty.

Dlaczego tytuł zakładki jest ważny?

Tytuł strony (tekst w znaczniku <title>) to nie tylko kosmetyczny detal:

  • jest wyświetlany jako tekst zakładki w przeglądarce,
  • pojawia się w wynikach wyszukiwania jako główny nagłówek linku,
  • jest pierwszą informacją, którą odczytuje wiele czytników ekranu,
  • trafia do historii przeglądania i listy „Ulubionych”.

Dlatego manipulowanie tytułem z JavaScript nie jest tylko „bajerem”, ale może realnie wpływać na:

  • użyteczność – np. pokazanie liczby nieprzeczytanych wiadomości w tytule;
  • dostępność – jasne informowanie o aktualnym stanie aplikacji;
  • SEO – choć współczesne wyszukiwarki radzą sobie z JS, wciąż warto zachować umiar i logikę.

Jak przeglądarka „zna” tytuł strony?

Podstawowy tytuł ustawiasz w HTML:


<head>
<title>Moja pierwsza strona</title>
</head>

JavaScript ma do niego dostęp przez obiekt document – to reprezentacja bieżącej strony w modelu DOM.

Najważniejsza właściwość w tym kontekście to document.title — zawiera aktualny tytuł dokumentu i pozwala go zmieniać.

Aby odczytać bieżący tytuł, użyj:


console.log(document.title); // np. "Moja pierwsza strona"

Aby zmienić tytuł, przypisz do właściwości nową wartość:


document.title = 'Nowy tytuł strony';

Takie przypisanie aktualizuje zarówno document.title, jak i zawartość znacznika <title> w DOM.

Podstawy – zmiana tytułu strony w czystym JavaScript

Najprostszy przykład

Jedna linia wystarczy:


document.title = 'Witamy na naszej stronie!';

To wszystko – po wykonaniu tego kodu tekst zakładki w przeglądarce zostanie zaktualizowany.

Możesz też użyć zmiennej:


const newTitle = 'Panel administracyjny';
document.title = newTitle;

Ten sposób jest zalecany, gdy tytuł zależy od danych z serwera lub od języka interfejsu.

Zmiana tytułu po załadowaniu strony

Aby mieć pewność, że DOM jest gotowy, poczekaj na załadowanie strony:


window.addEventListener('load', () => {
document.title = 'Strona gotowa do użycia';
});

Alternatywa: manipulacja znacznikiem <title>

Zamiast document.title możesz bezpośrednio sięgnąć do elementu <title> i zmienić jego zawartość:


const newPageTitle = 'Tytuł ustawiony przez DOM';
document.querySelector('title').textContent = newPageTitle;

Różnice pomiędzy podejściami przedstawia tabela:

Sposób Zalety Kiedy używać
document.title = '...' krótki, prosty, wspierany w każdym normalnym środowisku JS 99% przypadków, kod produkcyjny
document.querySelector('title')… spójny z inną manipulacją DOM gdy i tak pracujesz bezpośrednio na DOM

W praktyce do zmiany tytułu po prostu używaj document.title – jest bardziej czytelne i idiomatyczne.

Zmiana tytułu w reakcji na zdarzenia użytkownika

Dynamiczny tytuł ma sens głównie wtedy, gdy reaguje na konkretne zdarzenia – kliknięcia, wysłanie formularza, zmianę zakładki itd.

Przykład – przycisk zmieniający tytuł

Poniżej prosty przykład bez alert, bardziej przyjazny dla UX:


<button id="btn-hello">Ustaw tytuł: Hello World!</button>
<button id="btn-test">Ustaw tytuł: Test</button>

<script>
function changeTitle(newTitle) {
document.title = newTitle; // zmieniamy tytuł zakładki
}

document.getElementById('btn-hello')
.addEventListener('click', () => changeTitle('Hello World!'));

document.getElementById('btn-test')
.addEventListener('click', () => changeTitle('Test'));
</script>

Powiązanie tytułu z danymi (np. liczba powiadomień)

Przykład (bez backendu) symulujący liczbę nowych wiadomości:


let unreadCount = 0;
const baseTitle = 'Skrzynka odbiorcza';

function updateTitle() {
if (unreadCount > 0) {
document.title = `(${unreadCount}) ${baseTitle}`;
} else {
document.title = baseTitle;
}
}

// Symulacja nadejścia nowych wiadomości
setInterval(() => {
unreadCount++;
updateTitle();
}, 5000);

Taki schemat – liczba w nawiasie na początku tytułu – stosuje wiele serwisów pocztowych i komunikatorów.

Zmiana tytułu, gdy użytkownik przełącza zakładki

Częsty „bajer” (ale też praktyczne rozwiązanie) to zmiana tytułu, gdy użytkownik opuści naszą kartę. Można go zrealizować dzięki Page Visibility API, które udostępnia zdarzenie visibilitychange i właściwość document.hidden.

Wykrywanie aktywności zakładki

Najprostszy sposób wykrycia, czy karta jest aktywna, wygląda tak:


document.addEventListener('visibilitychange', function () {
console.log(document.hidden); // true/false
});

Drugi tytuł, gdy użytkownik jest „poza kartą”

Na bazie tego zdarzenia możesz zmieniać tytuł oraz – jeśli chcesz – faviconę. Prosty przykład bez jQuery:


const originalTitle = document.title;
const awayTitle = 'Hej, wróć do nas!';

document.addEventListener('visibilitychange', () => {
const isPageHidden = document.hidden;
if (isPageHidden) {
document.title = awayTitle;
} else {
document.title = originalTitle;
}
});

Opcjonalnie – „tytuł powitalny” tylko na chwilę

Możesz dodać powitalny komunikat tylko na kilka sekund po powrocie użytkownika:


const originalTitle = document.title;
const awayTitle = 'Wciąż tu jesteśmy 🙂';
const welcomeBackTitle = 'Miło, że wróciłeś!';

document.addEventListener('visibilitychange', () => {
if (document.hidden) {
document.title = awayTitle;
} else {
document.title = welcomeBackTitle;
setTimeout(() => {
document.title = originalTitle;
}, 2000); // po 2 sekundach wróć do normalnego tytułu
}
});

„Zmieniający się tytuł zakładki” – animacje i efekty

Starsze przykłady w sieci pokazują tzw. „biegający” tytuł, w którym tekst przesuwa się jak na pasku informacyjnym. Technicznie to tylko pętla setTimeout zmieniająca fragment tekstu w document.title.

Przykład inspirowany takim podejściem:


const fullTitle = 'Witamy na naszym portalu! ';
let position = 0;

function scrollTitle() {
document.title = fullTitle.substring(position) + fullTitle.substring(0, position);
position = (position + 1) % fullTitle.length;
setTimeout(scrollTitle, 200); // zmiana co 200 ms
}

scrollTitle();

Uwaga – ryzyko dla dostępności i UX

Choć efekt może wyglądać efektownie:

  • migający / animowany tytuł może drażnić użytkowników,
  • częste zmiany tytułu są uciążliwe dla osób korzystających z czytników ekranu,
  • zbyt szybkie animacje mogą być problemem dla osób z nadwrażliwością na ruch.

Z perspektywy dostępności (WCAG) wszelkie ruchome elementy powinny mieć możliwość zatrzymania i nie powinny rozpraszać przesadnie uwagi. Tytuł zakładki to element wyjątkowo istotny – nadużywanie animacji jest kiepską praktyką.

Jeśli chcesz użyć takich efektów:

  • stosuj je bardzo oszczędnie,
  • poważnie rozważ, czy korzyść przewyższa koszt dla użytkownika,
  • nie wykorzystuj animacji tytułu do przekazywania kluczowych informacji – te powinny znaleźć się w treści strony (np. w regionie aria-live).

Zmiana tytułu w aplikacjach SPA i frameworkach

W prostych stronach statycznych wystarczy pojedynczy skrypt. W aplikacjach z routerem (SPA) tytuł powinien zmieniać się przy zmianie widoku / trasy.

React – document.title lub React Helmet

W React możesz ustawić stały tytuł w głównym index.html albo dynamicznie aktualizować document.title w komponentach. W komponentach funkcyjnych najprościej zrobić to w useEffect (aby nie zmieniać tytułu przy każdym renderze):


import { useEffect } from 'react';

function ProfilePage() {
useEffect(() => {
document.title = 'Profil użytkownika';
}, []);

return <h1>Profil</h1>;
}

W większych projektach warto sięgnąć po React Helmet (lub nowsze odpowiedniki), aby deklaratywnie definiować tytuł i metadane w JSX.

Inne SPA (Vue, Angular, własny router)

Typowy schemat jest podobny: nasłuchujesz zmiany trasy w routerze, a następnie – na podstawie konfiguracji – ustawiasz document.title.

Prosty przykład w formie pseudo-kodu:


router.onRouteChange((route) => {
document.title = route.meta.title || 'Aplikacja';
});

W wielu projektach meta-informacje o tytule przypisuje się do definicji trasy (np. meta: { title: 'Koszyk' }).

Dobre praktyki – dostępność i projektowanie tytułów

Tytuł strony jest kluczowy dla orientacji użytkownika – traktuj go jak nawigacyjny drogowskaz.

Tytuł opisuje zawartość

Upewnij się, że tytuł precyzyjnie opisuje aktualną zawartość lub widok.

W aplikacjach z wieloma ekranami stosuj schemat: Nazwa widoku | Nazwa aplikacji (np. Koszyk | Sklep XYZ).

Ogranicz częstotliwość zmian

Zadbaj o rozsądną częstotliwość aktualizacji:

  • unikaj zmiany tytułu co kilkaset milisekund (animacje, liczniki „co sekundę”),
  • gdy musisz pokazać np. żywy licznik, rozważ przeniesienie go do treści strony, a w tytule aktualizuj go rzadziej lub w ogóle,
  • użytkownicy czytników ekranu mogą mieć kłopot z ciągle zmieniającą się informacją na poziomie tytułu.

Nie polegaj wyłącznie na tytule

Jeżeli przekazujesz ważną informację (np. „sesja wygasła”, „masz nowe wiadomości”):

  • pokaż ją w głównym obszarze treści (nagłówek, komunikat),
  • rozważ użycie aria-live dla dynamicznych komunikatów,
  • tytuł potraktuj jako uzupełnienie (np. liczba powiadomień).

Kontrast i długość tytułu

Stawiaj na zwięzłość – zbyt długi tytuł będzie ucięty na zakładce i w wynikach wyszukiwania.

Dbaj o priorytetyzację – najważniejszą informację umieść na początku (np. liczbę powiadomień lub nazwę widoku).

SEO i kwestie techniczne

Współczesne wyszukiwarki potrafią odczytywać tytuły zmienione JavaScriptem, ponieważ renderują stronę podobnie jak przeglądarka.

Mimo to pamiętaj o kilku zasadach:

  • domyślny tytuł w HTML – zawsze ustaw sensowny tytuł w znaczniku <title> w dokumencie bazowym;
  • JS do uszczegółowienia – używaj dynamicznych zmian raczej do doprecyzowania (np. dodanie liczby powiadomień) niż do całkowitej podmiany znaczenia strony;
  • unikaj „spamerskich” praktyk – ciągłe zmiany tytułów z nadmiarem słów kluczowych są złym sygnałem jakości.

Jeśli korzystasz z SSR (Next.js, Nuxt itp.), główny tytuł generuj na serwerze, a JS używaj tylko do delikatnych modyfikacji po stronie klienta.

Gotowe „przepisy” do wklejenia

Ustawienie tytułu po załadowaniu strony

Skorzystaj z nasłuchiwania zdarzenia load:


window.addEventListener('load', () => {
document.title = 'Strona załadowana';
});

Funkcja pomocnicza do zmiany tytułu

Prosta funkcja i przykład użycia:


function setPageTitle(title) {
document.title = title;
}

// użycie
setPageTitle('Panel użytkownika');

Tytuł z liczbą powiadomień

Szablon z licznikiem nieprzeczytanych elementów:


const baseTitle = 'Forum';
let unread = 0;

function updateTitle() {
document.title = unread > 0 ? `(${unread}) ${baseTitle}` : baseTitle;
}

// przykład aktualizacji
function addNotification() {
unread++;
updateTitle();
}

Zmiana tytułu przy przełączaniu zakładek

Wersja minimalna z Page Visibility API:


const originalTitle = document.title;
const awayTitle = 'Wracaj do nas :)';

document.addEventListener('visibilitychange', () => {
if (document.hidden) {
document.title = awayTitle;
} else {
document.title = originalTitle;
}
});

Prosta animacja tytułu (używaj ostrożnie)

Pętla z setTimeout przesuwająca tekst:


const fullTitle = 'Animowany tytuł zakładki ';
let pos = 0;

function animateTitle() {
document.title = fullTitle.substring(pos) + fullTitle.substring(0, pos);
pos = (pos + 1) % fullTitle.length;
setTimeout(animateTitle, 250);
}

animateTitle();

Zmiana tytułu strony w JavaScript jest banalnie prosta technicznie – cała magia sprowadza się do document.title. Prawdziwe wyzwanie polega na tym, aby używać tej możliwości z głową – wspierać nawigację, poprawiać doświadczenie i nie utrudniać życia użytkownikom, w tym osobom korzystającym z technologii asystujących.

Podobne artykuły