Linki JavaScript a SEO: kiedy Google może ich nie odczytać

Linki JavaScript SEO: od czego zacząć sprawdzanie

Linki JavaScript SEO nie są z definicji problemem. Google potrafi wykonywać JavaScript i może odkrywać odnośniki, które skrypt dodaje do dokumentu. Problem pojawia się wtedy, gdy nawigacja opiera się wyłącznie na mechanizmie, którego robot nie może poprawnie odczytać albo który nie prowadzi do rzeczywistego adresu URL.

Dla właściciela sklepu sytuacja często wygląda niewinnie. W menu widać kategorię, użytkownik może ją kliknąć, a produkty otwierają się bez błędu. Z punktu widzenia SEO trzeba jednak sprawdzić coś więcej: czy w kodzie i wyrenderowanym DOM znajduje się prawdziwy element <a> z atrybutem href, czy adres można jednoznacznie odczytać i czy robot może przejść dalej bez wykonywania interakcji typowej dla użytkownika.

Google opisuje proces obsługi JavaScript jako połączenie crawlowania, renderowania i indeksowania. Linki mogą zostać odkryte już podczas analizy początkowego HTML, a kolejne mogą zostać znalezione po wyrenderowaniu strony. Dlatego sam fakt używania JavaScript nie oznacza automatycznie utraty linkowania. Problemem jest sposób, w jaki dynamiczny link został zbudowany.

Jeżeli prowadzisz sklep na WooCommerce, PrestaShop albo Shoper, zacznij od najważniejszych miejsc: głównego menu, kategorii, podkategorii, kart produktów, paginacji, filtrów prowadzących do istotnych stron oraz elementów nawigacyjnych w stopce. Jeśli część z nich działa tylko po wykonaniu określonego skryptu, sprawdź, co faktycznie trafia do DOM.

Przy większym sklepie dobrze połączyć taką kontrolę z audytem technicznym sklepu przed SEO, ponieważ problemy z linkami często występują razem z innymi błędami crawlowania, indeksowania lub struktury adresów.

Czy Google widzi linki JavaScript?

Tak, ale trzeba rozróżnić JavaScript, który tworzy poprawny link HTML, od JavaScriptu, który zastępuje link innym mechanizmem nawigacji.

Najbezpieczniejszy wariant wygląda jak klasyczny element HTML:

<a href="/buty-meskie">Buty męskie</a>

JavaScript może taki element utworzyć, zmienić jego tekst albo wstawić go do dokumentu. Jeżeli końcowym efektem jest element <a> z poprawnym href, Google może go odczytać. Sam fakt, że element został dodany dynamicznie, nie przekreśla jego zastosowania w SEO.

Inaczej wygląda sytuacja, gdy zamiast adresu znajduje się konstrukcja typu:

<a onclick="goTo('/buty-meskie')">Buty męskie</a>

albo:

<button onclick="openCategory('buty-meskie')">Buty męskie</button>

Dla użytkownika oba rozwiązania mogą prowadzić do właściwej kategorii. Nie są jednak równoważne z klasycznym linkiem HTML. Google zaleca używanie elementu <a> z atrybutem href, ponieważ właśnie z tego mechanizmu robot może wyodrębnić adres i dodać go do dalszego crawlowania.

Podobnie należy uważać na href="javascript:...". Przeglądarka może wykonać taki kod, ale nie jest to prawidłowy sposób wskazywania adresu docelowego dla ważnej strony serwisu. Jeżeli odnośnik ma prowadzić do kategorii, produktu lub artykułu, w href powinien znajdować się rzeczywisty URL.

W praktyce odpowiedź na pytanie „czy Google widzi linki JavaScript” brzmi więc: Google może je odkryć, jeżeli JavaScript tworzy poprawne, crawlable linki. Nie można natomiast zakładać, że każdy element reagujący na kliknięcie jest dla Google równoważny z linkiem.

Kiedy dynamiczne linki zaczynają sprawiać problemy

Dynamiczne linki są często stosowane w sklepach, aplikacjach SPA i rozbudowanych menu. Samo dynamiczne generowanie nie jest wadą. Ryzyko pojawia się wtedy, gdy adres docelowy nie jest dostępny w poprawnym href albo jego odkrycie wymaga działania, którego robot nie wykonuje w taki sam sposób jak użytkownik.

Typowym przykładem są przyciski „Załaduj więcej”. Użytkownik naciska przycisk, JavaScript pobiera kolejne produkty z API i dopiero wtedy dodaje je do strony. Jeżeli kolejne produkty nie mają własnych, crawlable adresów, robot może mieć utrudnione zadanie z ich odkryciem. Podobny problem występuje przy nieskończonym scrollowaniu, gdy następna partia zawartości pojawia się dopiero po przewinięciu strony.

W sklepie internetowym trzeba szczególnie sprawdzić menu generowane po stronie klienta. Jeśli po załadowaniu strony początkowy HTML nie zawiera linków do kategorii, a skrypt buduje je dopiero później, Google może je odkryć podczas renderowania, ale nie należy zakładać, że każda implementacja zadziała tak samo dobrze jak klasyczne linki dostępne w HTML.

Jeszcze większe ryzyko pojawia się, gdy skrypt nie tworzy elementu <a>, tylko przechwytuje kliknięcie i zmienia adres za pomocą własnej funkcji. Takie rozwiązanie może być wygodne dla aplikacji, ale utrudnia jednoznaczne określenie, które elementy strony są odnośnikami do kolejnych dokumentów.

Osobną kategorią są adresy z fragmentami, na przykład /#/produkty. Google wskazuje, że fragmenty nie powinny być używane do zmiany głównej treści strony. W aplikacjach wykorzystujących routing po stronie klienta lepszym rozwiązaniem jest History API oraz rzeczywiste adresy URL dla poszczególnych widoków.

Jeżeli sklep wykorzystuje dużo JavaScriptu, sprawdź także, czy skrypty i zasoby potrzebne do wyrenderowania linków nie są blokowane. Google może mieć problem z wykonaniem fragmentu aplikacji, jeżeli nie może pobrać niezbędnych zasobów.

Jak sprawdzić linki generowane przez JavaScript

Nie zaczynaj od samego kliknięcia w menu. To test dla użytkownika, nie dla robota. Najpierw sprawdź źródłowy HTML strony, a następnie DOM po wykonaniu JavaScript.

W przeglądarce możesz otworzyć narzędzia deweloperskie i przejść do zakładki Elements. Znajdź konkretny link do kategorii albo produktu. Jeżeli widzisz konstrukcję:

<a href="/kategoria-produktu">Kategoria produktu</a>

masz punkt wyjścia do dalszej kontroli. Sprawdź jeszcze, czy adres prowadzi do właściwej strony i czy nie kończy się przekierowaniem, błędem lub inną nieoczekiwaną reakcją.

Następnie użyj funkcji wyszukiwania w kodzie i poszukaj href. Możesz też w konsoli wykonać prostą kontrolę:

[...document.querySelectorAll('a')].map(a => ({
  text: a.textContent.trim(),
  href: a.href
}));

Wynik pokaże linki obecne w aktualnym DOM wraz z adresami. To dobry sposób na wykrycie sytuacji, w której użytkownik widzi element wyglądający jak link, ale w rzeczywistości nie jest on elementem <a>.

Przy bardziej rozbudowanym sklepie sprawdzaj nie tylko stronę główną. Otwórz kategorię, kartę produktu, stronę z filtrami, paginację oraz wersję mobilną menu. Niektóre wdrożenia korzystają z innego komponentu na urządzeniach mobilnych i właśnie tam może pojawić się problem.

Kolejnym krokiem jest Google Search Console i narzędzie do sprawdzania adresów URL. Po sprawdzeniu konkretnej strony możesz porównać to, co widzi użytkownik, z wyrenderowaną wersją strony. Jeżeli link pojawia się dopiero po wykonaniu skryptu, sprawdź wyrenderowany HTML i potwierdź, że nadal jest prawidłowym elementem <a> z href.

Przy diagnozie przydatne jest też sprawdzenie logów serwera. Jeżeli ważne podstrony istnieją, ale nie pojawiają się w danych o crawlowaniu tak, jak oczekujesz, warto zestawić informacje z logów z mapą linkowania wewnętrznego. Sam brak wizyty Googlebota nie dowodzi jeszcze problemu z JavaScript, ale może wskazać miejsce wymagające dalszej kontroli.

Jak zapewnić poprawne linki do kategorii i produktów

W sklepie internetowym najważniejsze strony powinny mieć stabilne, rzeczywiste adresy URL. Dotyczy to przede wszystkim kategorii, podkategorii, produktów, stron informacyjnych oraz ważnych stron poradnikowych.

Jeżeli menu jest generowane przez JavaScript, dopilnuj, aby jego końcowa struktura zawierała prawidłowe elementy <a> z atrybutem href. JavaScript może odpowiadać za animację, rozwijanie menu czy obsługę dodatkowych funkcji, ale nie powinien zastępować samego adresu docelowego.

Dobrym rozwiązaniem jest również pozostawienie adresu w HTML już na etapie odpowiedzi serwera, jeśli architektura sklepu na to pozwala. Google wskazuje, że linki znajdujące się w początkowej odpowiedzi HTML mogą zostać odkryte wcześniej, zanim strona zostanie poddana renderowaniu JavaScript.

Przykład poprawnej konstrukcji może wyglądać tak:

<nav>
  <a href="/buty-meskie">Buty męskie</a>
  <a href="/buty-damskie">Buty damskie</a>
  <a href="/obuwie-sportowe">Obuwie sportowe</a>
</nav>

JavaScript może później dodać obsługę rozwijania menu, zmianę wyglądu albo inne interakcje. Nie zmienia to faktu, że robot ma dostęp do rzeczywistych adresów.

Jeżeli korzystasz z komponentu, który tworzy linki dopiero po pobraniu danych z API, sprawdź wynik po pełnym renderowaniu. Dla każdej ważnej podstrony zadaj sobie proste pytanie: czy po wyrenderowaniu strony istnieje <a href="...">, którego wartość wskazuje dokładnie ten adres, który chcę udostępnić robotowi?

W przypadku paginacji nie polegaj wyłącznie na przycisku, który wykonuje JavaScript. Kolejne strony listingu powinny mieć własne adresy i możliwie klasyczne linki. Google w swoich zaleceniach dotyczących ładowania kolejnych elementów wskazuje, że roboty nie zachowują się jak użytkownik, który naciska przyciski i wykonuje dowolne interakcje.

Jeśli przebudowujesz sklep, możesz też wykorzystać poprawną strukturę nawigacji sklepu internetowego, ponieważ sposób prowadzenia użytkownika i robota przez kategorie, podkategorie oraz produkty powinien tworzyć spójną strukturę.

Typy linków i ich poprawna implementacja

Typ linku	Przykład	Ocena techniczna	Co sprawdzić
Klasyczny link HTML	<a href="/produkt">Produkt</a>	Poprawny	Adres, dostępność strony i tekst linku
Link dodany przez JavaScript	JS tworzy <a href="/produkt">	Może być poprawny	Wyrenderowany DOM i rzeczywisty href
Link z onclick i poprawnym href	<a href="/produkt" onclick="...">	Może być poprawny	Czy href nadal wskazuje właściwy URL
Link bez href	<a onclick="goTo(...)"	Problemowy	Zastąpić rzeczywistym odnośnikiem
href="javascript:..."	<a href="javascript:goTo(...)"	Nie zalecany	Zastąpić adresem URL w href
Przycisk zmieniający widok	<button onclick="...">	Nie jest klasycznym linkiem	Sprawdzić, czy istnieje osobny URL dla treści
Link oparty na fragmencie routingu	/#/kategoria	Problemowy dla SEO	Zastosować rzeczywiste adresy i History API
Link w aplikacji SPA z poprawnym href	<a href="/kategoria">	Może być poprawny	Routing, renderowanie i dostępność adresu

Tabela jest szczególnie przydatna przy sprawdzaniu komponentów tworzonych przez zewnętrzne biblioteki. Nie oceniaj rozwiązania po nazwie frameworka. Ten sam framework może zostać wykorzystany w sposób przyjazny dla crawlowania albo w sposób, który utrudni odkrywanie stron.

JavaScript a linkowanie wewnętrzne w sklepie

Linkowanie wewnętrzne nie sprowadza się do tego, czy użytkownik może przejść z jednej strony na drugą. Linki są również sposobem odkrywania adresów przez Google oraz jednym z sygnałów pomagających określić zależności pomiędzy stronami.

Dlatego przy analizie JavaScript a linkowanie wewnętrzne trzeba patrzeć na całą ścieżkę. Weź kategorię produktów i sprawdź, jak Google może do niej dotrzeć. Następnie sprawdź produkt, podkategorię i kolejne strony listingu. Jeżeli ważna podstrona jest dostępna wyłącznie po wykonaniu nietypowej interakcji, masz miejsce do poprawy.

W praktyce dobrze zacząć od stron biznesowo istotnych. Nie musisz od razu analizować każdego elementu interfejsu. Sprawdź najpierw główne kategorie, produkty generujące sprzedaż, strony docelowe kampanii oraz sekcje, które mają być indeksowane.

Przydatne jest też porównanie linków widocznych w początkowym HTML z linkami obecnymi po renderowaniu. Jeżeli różnica jest bardzo duża, ustal, dlaczego tak się dzieje. Dynamiczne ładowanie może być uzasadnione, ale nie powinno przypadkowo usuwać robotowi dostępu do istotnych części struktury serwisu.

W przypadku dużych sklepów dobrze połączyć analizę linków z szerszym sprawdzeniem technicznej kondycji sklepu. Dzięki temu możesz zestawić linkowanie z indeksacją, kodami odpowiedzi, kanonicznymi adresami, sitemapą i innymi elementami wpływającymi na crawlowanie.

Jak wykrywać problemy przed wdrożeniem zmian

Najpierw przygotuj listę ważnych URL-i. Mogą to być główne kategorie, podkategorie, produkty, strony marek i wybrane treści. Następnie dla każdej strony nadrzędnej sprawdź, czy istnieje do niej dostępny technicznie link.

Nie ograniczaj testu do jednego urządzenia. Menu mobilne bywa zbudowane inaczej niż wersja desktopowa. Sprawdź oba warianty, szczególnie jeśli na telefonie nawigacja otwiera się przez osobny komponent JavaScript.

Przydatny jest także prosty test bez JavaScriptu. Nie jest to dokładna symulacja działania Google, ponieważ Google wykonuje JavaScript, ale pozwala szybko znaleźć elementy, które całkowicie zależą od skryptu. Jeżeli po wyłączeniu JavaScript znika całe menu kategorii, sprawdź, czy w bazowym HTML istnieją przynajmniej poprawne adresy, które mogą zostać odkryte przez wyszukiwarkę.

Następnie przejdź do narzędzia do inspekcji URL w Search Console. Sprawdź wyrenderowaną stronę i poszukaj konkretnych odnośników. Jeśli link jest obecny w DOM i posiada poprawny href, sytuacja wygląda inaczej niż w przypadku elementu, który istnieje wyłącznie jako przycisk lub reakcja na zdarzenie.

Nie traktuj też sitemap jako zamiennika linkowania wewnętrznego. Mapa strony może pomóc Google odkrywać URL-e, ale nie powinna być sposobem na ukrywanie istotnych stron przed normalną strukturą nawigacji. Jeżeli kategoria albo produkt jest ważną częścią serwisu, powinien mieć logiczne miejsce w strukturze linków.

Jeżeli po wdrożeniu zmian przebudowujesz routing, menu albo sposób ładowania produktów, ponów testy. Szczególnie dokładnie sprawdź adresy, które wcześniej były dostępne bez JavaScript, a po zmianie zaczęły być tworzone dynamicznie.

Co zrobić, gdy linki są generowane wyłącznie przez JavaScript

Nie zaczynaj od wyłączania JavaScriptu. Najpierw ustal, czy obecna implementacja faktycznie tworzy crawlable linki. Jeżeli tak, problem może leżeć gdzie indziej.

Jeżeli jednak menu albo lista produktów używa elementów bez href, przebuduj komponent tak, aby nawigacja korzystała z prawdziwych adresów. Dla aplikacji SPA wykorzystaj routing oparty na rzeczywistych URL-ach zamiast zmieniania treści wyłącznie przez fragment adresu.

Jeśli linki są dodawane dopiero po pobraniu danych, sprawdź wyrenderowany DOM. Jeżeli są tam prawidłowe elementy <a>, zweryfikuj dodatkowo, czy adresy są dostępne, stabilne i odpowiadają rzeczywistym stronom. Jeśli nie ma href, sama możliwość kliknięcia elementu nie rozwiązuje problemu.

Po zmianach wykonaj ponownie test strony głównej, kategorii i produktów. Sprawdź również paginację oraz menu mobilne. W przypadku sklepu z dużą liczbą produktów można dodatkowo porównać listę istotnych URL-i z linkami wykrywalnymi w kodzie i z mapą witryny.

Jeżeli nie masz pewności, czy problem dotyczy samego JavaScript, czy całej architektury linkowania, zleć audyt techniczny strony. W takim sprawdzeniu można przeanalizować konkretne ścieżki nawigacji i ustalić, gdzie robot może mieć utrudniony dostęp do ważnych podstron.

Podsumowanie

Linki JavaScript SEO wymagają przede wszystkim sprawdzenia efektu końcowego, a nie samego faktu wykorzystania JavaScript. Google może odkrywać linki dodawane dynamicznie, jeżeli są prawidłowymi elementami <a> z atrybutem href i wskazują rzeczywiste adresy URL.

Najwięcej uwagi poświęć kategoriom, produktom, paginacji, menu oraz innym stronom, które mają być regularnie odkrywane i indeksowane. Sprawdź zarówno początkowy HTML, jak i DOM po renderowaniu. Zobacz, czy link ma href, czy adres jest poprawny i czy ważna treść nie jest dostępna wyłącznie po interakcji użytkownika.

Jeżeli dynamiczne linki są częścią większej aplikacji, przeanalizuj również routing, fragmenty adresów, zasoby JavaScript oraz sposób ładowania kolejnych elementów. Dzięki temu zamiast zgadywać, czy Google widzi linki JavaScript, możesz sprawdzić konkretny element i ustalić, jak wygląda jego wersja dostępna dla robota.