Odnośnik do sekcji strony przestał działać: jak utrzymywać linki z fragmentem URL?
Link prowadzący do konkretnej sekcji strony nagle przestaje przewijać użytkownika we właściwe miejsce. Zamiast informacji o kosztach dostawy, warunkach reklamacji czy instrukcji konfiguracji odbiorca widzi początek długiego dokumentu. Co gorsza, strona otwiera się poprawnie, a serwer zwraca kod HTTP 200. Standardowe narzędzia wykrywające niedziałające adresy mogą więc nie zgłosić żadnego problemu. Przyczyną często jest zmieniony lub usunięty identyfikator sekcji, czyli element odpowiadający za działanie linku z fragmentem URL. Naprawa wymaga sprawdzenia nie tylko samego odnośnika, lecz także struktury HTML, ustawień systemu CMS i sposobu ładowania strony.
Dlaczego link z fragmentem URL przestaje prowadzić do właściwej sekcji?
Adres https://example.com/poradnik#koszty-dostawy składa się z dwóch części. Pierwsza wskazuje dokument, natomiast fragment #koszty-dostawy określa miejsce, do którego przeglądarka powinna przewinąć stronę. W standardowym dokumencie HTML mechanizm wykorzystuje atrybut id przypisany do elementu, na przykład nagłówka.
Istotny szczegół: fragment URL nie jest przesyłany do serwera w żądaniu HTTP. Przeglądarka interpretuje go po pobraniu dokumentu. Dlatego usunięcie kotwicy nie powoduje błędu 404. Strona nadal działa, ale użytkownik nie dociera do poszukiwanej informacji.
Typowy przypadek dotyczy sklepów internetowych. W poradniku zakupowym znajduje się sekcja „Koszty dostawy” z identyfikatorem koszty-dostawy. Po aktualizacji redaktor zmienia nagłówek na „Dostawa i odbiór zamówień”. Wtyczka generująca identyfikatory automatycznie nadaje mu nową wartość dostawa-i-odbior-zamowien. Odnośniki zapisane wcześniej w wiadomościach e-mail, artykułach i materiałach PDF nadal wskazują starą kotwicę.
Nie każda awaria oznacza jednak brak identyfikatora. W praktyce trzeba rozróżnić cztery sytuacje:
- Brak elementu docelowego – identyfikator został usunięty, zmieniony albo zawiera literówkę. Wielkość liter również ma znaczenie.
- Powielony identyfikator – dwa elementy mają takie samo
id, przez co przeglądarka może przewinąć stronę do niewłaściwego miejsca. - Opóźnione renderowanie – sekcja pojawia się dopiero po wykonaniu JavaScriptu, pobraniu danych lub otwarciu zakładki. Przy pierwszej próbie przewinięcia element jeszcze nie istnieje.
- Zasłonięty nagłówek – kotwica działa, ale przyklejone menu zasłania początek sekcji, sprawiając wrażenie błędnej nawigacji.
Najpierw należy sprawdzić obecność identyfikatora. W Chrome DevTools, po otwarciu konsoli klawiszem F12, można wykonać polecenie document.getElementById('koszty-dostawy'). Wynik null oznacza, że element o takim identyfikatorze nie istnieje w aktualnym drzewie DOM.
Jeżeli element istnieje, a przewijanie nadal działa niepoprawnie, dopiero wtedy należy badać CSS i JavaScript. Przykładowo przy stałym menu o wysokości 72 px można zastosować scroll-margin-top: 88px dla nagłówków będących celami kotwic. Pozostawia to 16 px odstępu pod menu. Na telefonie wartość trzeba zweryfikować osobno, ponieważ mobilny nagłówek może mieć inną wysokość.
Zmiana odstępu ma sens wyłącznie wtedy, gdy element docelowy rzeczywiście istnieje. CSS nie naprawi usuniętej kotwicy, podobnie jak ponowne generowanie odnośników nie rozwiąże problemu sekcji pojawiającej się z opóźnieniem.
Jak naprawić zerwane kotwice bez utraty dotychczasowych odnośników?
Najbezpieczniejsza metoda polega na zachowaniu dotychczasowego identyfikatora id mimo zmiany treści nagłówka. Nazwa kotwicy jest technicznym adresem sekcji, a nie obowiązkowym odzwierciedleniem aktualnego tytułu.
Jeżeli nagłówek „Cennik usług” otrzymał wcześniej identyfikator cennik, po zmianie tytułu na „Opłaty i pakiety” nadal może używać id="cennik". Dzięki temu dotychczasowe linki nie wymagają modyfikacji. To rozwiązanie sprawdza się szczególnie w dokumentacjach produktów, regulaminach, poradnikach technicznych i artykułach, do których prowadzą odnośniki z innych witryn.
Sytuacja komplikuje się, kiedy nowa wersja strony ma już inne identyfikatory, a stare linki funkcjonują poza kontrolą właściciela serwisu. Wtedy rozsądnym rozwiązaniem jest utrzymanie kotwic zgodności wstecznej.
Przykładowo sekcja może mieć następującą strukturę:
- Kontener sekcji otrzymuje stary identyfikator
id="cennik". - Nagłówek „Koszty dostawy” otrzymuje nowy identyfikator
id="koszty-dostawy". - Oba elementy pozostają w tym samym obszarze dokumentu, a każdy identyfikator występuje tylko raz.
W rezultacie zarówno odnośnik #cennik, jak i #koszty-dostawy może prowadzić do właściwej treści. Nie trzeba wprowadzać JavaScriptu przechwytującego fragmenty adresów ani poprawiać wszystkich wcześniej opublikowanych materiałów.
Takie podejście ma jednak ograniczenie. Nie należy kierować starych kotwic do sekcji o zupełnie innym znaczeniu. Jeżeli usunięto informacje dotyczące nieaktualnej usługi, automatyczne przewinięcie do nowego cennika może wprowadzać odbiorcę w błąd. W takim przypadku lepiej umieścić krótką informację o wycofaniu usługi i wskazać aktualny odpowiednik, jeżeli rzeczywiście istnieje.
Osobnym zagadnieniem są przekierowania HTTP 301. Jeżeli dokument przeniesiono z /poradnik na /centrum-pomocy, przeglądarka zachowa wcześniejszy fragment adresu, o ile nagłówek Location przekierowania nie wskazuje własnego fragmentu. Przykładowo odnośnik prowadzący do /poradnik#cennik może po przekierowaniu wskazywać /centrum-pomocy#cennik.
Samo przekierowanie 301 nie naprawia jednak nieistniejącego identyfikatora. Serwer nie otrzymuje informacji o fragmencie, więc standardowe reguły przekierowań nie potrafią osobno rozpoznać żądań #cennik i #koszty-dostawy. Jeżeli na nowej stronie brakuje dawnej kotwicy, przewijanie nadal nie zadziała.
Mapowanie fragmentów przez JavaScript ma sens dopiero wtedy, gdy nie można przywrócić dawnych identyfikatorów w HTML. Jest bardziej podatne na problemy związane z kolejnością ładowania skryptów i treści, dlatego nie powinno być pierwszym wyborem.
Jak utrzymywać stabilne linki w WordPressie i podczas kolejnych aktualizacji strony?
Najwięcej problemów z kotwicami powstaje nie przy ich tworzeniu, ale podczas późniejszych zmian redakcyjnych. Autor poprawia nagłówek, przenosi akapit, zmienia wtyczkę spisu treści lub przebudowuje szablon. Wszystkie operacje wyglądają niewinnie, dopóki ktoś nie otworzy starego odnośnika z newslettera.
W WordPressie z edytorem blokowym Gutenberg identyfikator można przypisać bezpośrednio do nagłówka. Po zaznaczeniu bloku należy otworzyć jego ustawienia, przejść do sekcji „Zaawansowane” i uzupełnić pole „Kotwica HTML”. Wpisuje się tam sam identyfikator, bez znaku #.
Dla często cytowanych sekcji należy ustalać krótkie, jednoznaczne wartości, przykładowo reklamacje, koszty-dostawy albo konfiguracja-api. Lepiej unikać nazw zależnych od daty publikacji czy kolejnego numeru rozdziału, jeśli sekcja ma zachować tę samą funkcję przez kolejne aktualizacje.
Automatyczne generowanie kotwic przez wtyczkę spisu treści jest wygodne przy nowych artykułach. Staje się jednak problematyczne, gdy identyfikatory zależą od bieżącej treści nagłówków. Zmiana wtyczki, reguł transliteracji polskich znaków lub sposobu numerowania powtarzających się tytułów może zmienić adresy sekcji. W dokumentach, do których prowadzą trwałe linki zewnętrzne, ręcznie ustalone identyfikatory są bezpieczniejszym wyborem.
Dobrą praktyką jest również prowadzenie prostego rejestru kotwic dla najważniejszych podstron. Wystarczą cztery pola: adres dokumentu, identyfikator sekcji, poprzedni identyfikator (jeśli istniał) i informacja, czy odnośnik jest wykorzystywany w materiałach zewnętrznych.
Po każdej większej aktualizacji należy wykonać kontrolę:
- Otworzyć pełny adres z fragmentem
#bezpośrednio w nowej karcie, na opublikowanej stronie. - Sprawdzić, czy przeglądarka przewija dokument do właściwego nagłówka, również po odświeżeniu strony.
- Powtórzyć test na telefonie lub w widoku mobilnym, zwracając uwagę na przyklejone menu.
- Sprawdzić starsze identyfikatory, jeżeli zmieniano strukturę artykułu albo przenoszono dokument pod inny adres.
- Zweryfikować sekcje ładowane dynamicznie, szczególnie te ukryte w zakładkach, akordeonach i komponentach JavaScript.
W dużych serwisach, gdzie publikowanych jest kilkadziesiąt lub kilkaset instrukcji, ręczna kontrola każdej kotwicy szybko staje się uciążliwa. Wtedy można wykorzystać Playwright do testowania otwierania konkretnych adresów i sprawdzania, czy element docelowy jest widoczny w obszarze ekranu. Test musi działać w przeglądarce, a nie ograniczać się do sprawdzania kodu HTTP.
Samo Google Search Console również nie wystarczy. Brak identyfikatora fragmentu nie oznacza błędu pobrania dokumentu, dlatego raporty stron zwracających 404 nie ujawnią tego rodzaju problemu.
Nie należy też mylić kotwic z nawigacją pomiędzy osobnymi widokami aplikacji. Jeżeli fragmenty w rodzaju #/produkty służą do wyświetlania zupełnie różnych podstron, lepszym rozwiązaniem pod kątem indeksowania jest stosowanie odrębnych adresów z wykorzystaniem History API.
Priorytet jest prosty: najpierw stabilność identyfikatorów w HTML, następnie testowanie opublikowanych odnośników, a dopiero na końcu automatyzacja kontroli. Rozbudowany system monitorowania nie ma większego sensu, jeśli każda redakcyjna zmiana nagłówka nadal generuje nowy identyfikator.
FAQ – najczęstsze pytania o linki z fragmentem URL
Czy zmiana tytułu nagłówka zawsze psuje kotwicę?
Nie. Problem pojawia się wtedy, gdy wraz ze zmianą tekstu zostaje zmodyfikowany identyfikator id, na przykład przez automatyczny mechanizm CMS.
Czy przekierowanie 301 zachowuje fragment adresu?
Tak, jeżeli adres docelowy w nagłówku Location nie zawiera własnego fragmentu. Stara kotwica musi jednak nadal istnieć na stronie docelowej.
Czy dwa nagłówki mogą mieć ten sam identyfikator?
Nie powinny. Identyfikator id musi być unikalny w obrębie dokumentu. Powielenie prowadzi do niejednoznacznej nawigacji.
Czy link do fragmentu tekstu #:~:text= jest lepszy od zwykłej kotwicy?
Nie w przypadku trwałych odnośników. Fragment tekstowy zależy od obecności odpowiedniego tekstu i obsługi funkcji przez przeglądarkę. Stabilny identyfikator id jest bardziej przewidywalny dla sekcji zarządzanych przez właściciela strony.
Pierwszym działaniem po wykryciu niedziałającego odnośnika powinno być porównanie fragmentu po znaku # z identyfikatorem id w opublikowanym HTML. Jeżeli identyfikator zniknął, przywróć go przed modyfikowaniem przekierowań, stylów i skryptów. To najprostsza naprawa, która nie wymaga wymiany adresów zapisanych wcześniej w artykułach, wiadomościach i dokumentach.
Więcej informacji na: https://cmpress.pl
Dodaj komentarz