Atrybut track to element HTML5 stosowany wewnątrz znaczników <video> i <audio>, który umożliwia dołączenie zewnętrznych plików z napisami, opisami dźwięku lub metadanymi do osadzonych mediów. Dzięki niemu przeglądarka wie, gdzie znaleźć plik tekstowy (najczęściej w formacie WebVTT), jaki typ treści zawiera i w jakim jest języku. To jedno z tych rozwiązań, które jednocześnie poprawiają dostępność strony i dają wyszukiwarkom dodatkowy kontekst semantyczny.
- Atrybut
trackjest elementem HTML5 osadzanym bezpośrednio w znaczniku<video>lub<audio>. - Obsługuje pliki w formacie WebVTT (.vtt) — standard wspierany przez wszystkie nowoczesne przeglądarki.
- Pozwala zdefiniować kilka ścieżek jednocześnie (np. napisy po polsku i angielsku).
- Ma bezpośrednie znaczenie dla dostępności (WCAG) i widoczności treści wideo w Google.
Jak atrybut track działa w praktyce
Element <track> umieszcza się jako dziecko tagu <video> lub <audio> i uzupełnia go o kilka atrybutów określających zachowanie ścieżki. Przeglądarka pobiera wskazany plik, przetwarza go i wyświetla napisy lub opisy w odpowiednim momencie odtwarzania.
Składnia i atrybuty elementu
Podstawowa składnia elementu <track> wygląda następująco:
<video controls>
<source src="film.mp4" type="video/mp4">
<track kind="subtitles" src="napisy-pl.vtt" srclang="pl" label="Polski" default>
<track kind="subtitles" src="napisy-en.vtt" srclang="en" label="English">
</video>
Każdy z atrybutów pełni konkretną rolę:
- kind — określa typ ścieżki; dozwolone wartości to:
subtitles,captions,descriptions,chapters,metadata. - src — ścieżka do pliku WebVTT z treścią ścieżki.
- srclang — kod języka (np.
pl,en,de); wymagany, gdykind="subtitles". - label — nazwa widoczna dla użytkownika w menu wyboru napisów.
- default — atrybut logiczny; wskazuje ścieżkę domyślnie aktywną (tylko jedna na plik mediów).
Typy ścieżek — czym się różnią?
Wybór wartości atrybutu kind ma znaczenie zarówno dla użytkownika, jak i dla algorytmów. Każdy typ spełnia inną funkcję:
| Wartość kind | Zastosowanie | Wyświetlanie |
|---|---|---|
subtitles | Tłumaczenie dialogów dla obcojęzycznych widzów | Nakładka na wideo |
captions | Napisy dla osób niesłyszących (dialogi + efekty dźwiękowe) | Nakładka na wideo |
descriptions | Opisy dźwiękowe dla osób niewidomych | Czytnik ekranowy |
chapters | Podział wideo na rozdziały z nagłówkami | Nawigacja w odtwarzaczu |
metadata | Dane dla skryptów JavaScript, niewidoczne dla użytkownika | Brak |
Format pliku WebVTT — jak wygląda od środka?
Plik WebVTT (.vtt) to zwykły plik tekstowy z określoną strukturą. Zaczyna się od nagłówka WEBVTT, a każda kwestia ma sygnaturę czasową i treść:
WEBVTT
00:00:03.000 --> 00:00:06.500
Witamy w naszym tutorialu SEO.
00:00:07.000 --> 00:00:10.000
Dziś omówimy optymalizację treści wideo.
Znaczniki czasu zapisuje się w formacie hh:mm:ss.mmm. Plik może zawierać setki takich wpisów — każdy odpowiada jednemu fragmentowi wypowiedzi lub planszy tekstowej.
Znaczenie atrybutu track dla SEO i widoczności
Google od lat przyznaje, że indeksuje treść plików WebVTT dołączonych do wideo osadzonych na stronie — napisy stają się więc de facto tekstem crawlowanym przez Googlebot. Wideo bez napisów to dla wyszukiwarki w dużej mierze czarna skrzynka; wideo z plikiem VTT dostarcza pełen transkrypt, który Google może powiązać z zapytaniami użytkowników.
W kontekście pozycjonowania stron warto wiedzieć o kilku praktycznych korzyściach:
- Indeksowalność treści — transkrypt napisów uzupełnia zawartość semantyczną strony o słowa i frazy użyte w filmie.
- Video Featured Snippets — Google potrafi wyciąć fragment wideo z dokładnym znacznikiem czasu i wyświetlić go w odpowiedzi na zapytanie; precyzja tej funkcji zależy od jakości pliku VTT.
- Dostępność i E-E-A-T — napisy są wymagane przez WCAG 2.1 (poziom AA); ich brak oznacza wykluczenie osób z niepełnosprawnościami i obniżoną ocenę jakości strony.
- AI Overviews — modele Google chętniej cytują strony, których treść wideo jest dostępna w formie tekstowej i ustrukturyzowanej.
Przy rozbudowanych serwisach e-commerce z materiałami produktowymi atrybut track wpisuje się w szerszą strategię pozycjonowania sklepów internetowych — filmy demonstracyjne z napisami mogą zacząć rankować na frazy long-tail powiązane z użytymi w materiale terminami.
FAQ
Czy atrybut track działa z wideo z YouTube?
Nie — element <track> działa wyłącznie z wideo osadzonym bezpośrednio przez znacznik <video>, nie z playerem YouTube wbudowanym przez <iframe>. Dla filmów na YouTube napisy zarządza się bezpośrednio w panelu YouTube Studio, gdzie można wgrać plik .vtt lub .srt.
Jak przeglądarka wybiera, którą ścieżkę wyświetlić?
Przeglądarka bierze pod uwagę trzy czynniki: obecność atrybutu default, ustawienia językowe systemu użytkownika oraz preferencje zapisane w przeglądarce. Jeśli żaden track nie ma atrybutu default i język systemu nie pasuje do żadnej ścieżki, napisy nie wyświetlą się automatycznie — użytkownik musi je włączyć ręcznie.
Czym różni się kind=”subtitles” od kind=”captions”?
subtitles to napisy zakładające, że widz słyszy dźwięk, ale nie rozumie języka — zawierają wyłącznie dialogi i kwestie mówione. captions są przeznaczone dla osób niesłyszących i zawierają również opisy dźwięków pozajęzykowych, takich jak [muzyka w tle], [śmiech] czy [dźwięk alarmu]. W polskich realiach to rozróżnienie ma znaczenie przy spełnianiu wymogów dostępności cyfrowej (ustawa z 2019 r. o dostępności cyfrowej).
Czy jeden plik wideo może mieć kilka elementów track?
Tak, możesz dodać dowolną liczbę elementów <track> do jednego znacznika <video> lub <audio>. Jedynym ograniczeniem jest to, że atrybut default może mieć co najwyżej jeden element na plik mediów. Przykład praktyczny: jeden film może mieć ścieżki subtitles w 4 językach, captions po polsku i metadata dla skryptu analitycznego — wszystko równocześnie.
Track — mały element, duże konsekwencje dla strony
Element <track> to jeden z tych szczegółów technicznych, które łatwo pominąć, a które wpływają na kilka obszarów jednocześnie: dostępność, indeksowalność i doświadczenie użytkownika. Jeśli na Twojej stronie pojawiają się materiały wideo i zależy Ci na ich widoczności w Google, wdrożenie plików WebVTT powinno znaleźć się na liście priorytetów — szczególnie w kontekście rosnącego znaczenia AI Overviews, które chętnie cytują strony z dobrze ustrukturyzowaną treścią. Chcesz sprawdzić, jak Twoja strona radzi sobie od strony technicznej? Skontaktuj się z Webiti i zamów audyt SEO.







