# Identyfikowanie linków ukrytych i/lub ładowanych przez JavaScript

> URL: https://4eck-media.de/pl/blog/identyfikowanie-linkow-ukrytych-i-lub-ladowanych-przez-javascript/  
> Language: pl  
> Description: Wiele linków na stronach internetowych jest ukrytych lub niewidocznych bezpośrednio w początkowym renderowaniu strony. Za pomocą skryptu możesz je uwidocznić.

---

Widoczność i dostępność wszystkich linków na stronie internetowej jest ważna dla wydajności SEO. Czy wiesz, że wiele linków na stronach internetowych może być ukrytych lub niewidocznych bezpośrednio w początkowym renderowaniu strony? Oto prosta wskazówka SEO, która pomoże Ci **zidentyfikować ukryte linki & linki JavaScript** i upewnić się, że nie przeoczysz żadnych wartościowych połączeń. Dlaczego w ogóle istnieją niewidoczne linki?

Ukryte lub niewidoczne linki mogą występować na stronie internetowej z różnych powodów:

- Dynamicznie ładowane treści: treści, które są ładowane dopiero w wyniku działań użytkownika lub przez JavaScript.
- Elementy interaktywne: linki osadzone w przyciskach i wyzwalane przez zdarzenia JavaScript.
- Aspekty projektowe: linki, które ze względów projektowych są ukryte lub trudno zauważalne.

Takie linki, które nie są ładowane przez HREF, lecz wyzwalane przez zdarzenie JS, często nie są od razu widoczne i można je łatwo przeoczyć. Za pomocą poniższego prostego skryptu możesz na przykład w ramach audytu SEO upewnić się, że wszystkie linki i przyciski na stronie internetowej zostaną wyróżnione, w tym te dodawane dynamicznie.

## Instrukcja krok po kroku: wyróżnianie linków na stronach internetowych

1. Otwórz stronę i uruchom narzędzia deweloperskie: otwórz wybraną stronę internetową w przeglądarce Chrome. Naciśnij `F12` lub kliknij stronę prawym przyciskiem myszy i wybierz „Zbadaj”, aby otworzyć narzędzia deweloperskie.

2. Wybierz obszar konsoli: w narzędziach deweloperskich kliknij zakładkę „Konsola”. Tutaj możesz wykonywać kod JavaScript bezpośrednio na stronie internetowej. Przy pierwszym wprowadzaniu może się zdarzyć, że przeglądarka wyświetli ostrzeżenie i najpierw musisz potwierdzić, że zezwalasz na wklejanie (allow pasting)

3. Skopiuj i wklej skrypt: skopiuj poniższy skrypt i wklej go w dolnym obszarze konsoli. Następnie naciśnij klawisz Enter (`Enter`).

```
// Highlight initial links
document.querySelectorAll('a').forEach(link => {
  link.style.backgroundColor = 'yellow';
  link.dataset.initial = 'true'; // Mark these as initially present
});

// Highlight initial buttons
document.querySelectorAll('button').forEach(button => {
  button.style.backgroundColor = 'red';
  button.dataset.initial = 'true'; // Mark these as initially present
});

// Create a MutationObserver to detect changes in the DOM
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) { // Check if it's an element node
          // Find any new <a> tags within the added node
          node.querySelectorAll('a').forEach(link => {
            if (!link.dataset.initial) { // Only highlight if not marked as initial
              link.style.backgroundColor = 'pink';
            }
          });

          // Find any new <button> tags within the added node
          node.querySelectorAll('button').forEach(button => {
            if (!button.dataset.initial) { // Only highlight if not marked as initial
              button.style.backgroundColor = 'red';
            }
          });
        }
      });
    }
  });
});

// Start observing the document body for changes
observer.observe(document.body, {
  childList: true,
  subtree: true
});
```

4. Obserwuj rezultat: po uruchomieniu skryptu wszystkie linki (elementy `<a>`) na stronie internetowej zostaną wyróżnione na żółto, a wszystkie przyciski (elementy `<button>`) oznaczone na czerwono. Nowe linki i przyciski, które są dodawane dynamicznie, otrzymają różowy (linki) lub czerwony (przyciski) kolor tła.

    
        
            
                
                    

![Verborgene Links hervorheben Skript](https://4eck-media.de/wp-content/uploads/2025/11/verborgene_links_hervorheben_skript_0b13c6211a-1920x1080.avif)
                
            
        
    

Jeśli Twoja strona zawiera już wiele żółtych lub czerwonych elementów, możesz łatwo dostosować kolory wyróżnienia w skrypcie, na przykład na niebieski i brązowy.

## Co dokładnie się tutaj dzieje?

Skrypt najpierw oznacza wszystkie istniejące linki i przyciski na stronie kolorem tła. Następnie tworzy tzw. MutationObserver, który stale monitoruje zmiany w DOM (Document Object Model). Gdy dodawane są nowe elementy, obserwator sprawdza, czy zawierają one linki lub przyciski, i również odpowiednio je oznacza.

Dzięki tej metodzie możesz mieć pewność, że żadne ważne linki nie zostaną przeoczone, niezależnie od tego, czy są widoczne od początku, czy dodawane w wyniku działań użytkownika lub skryptów. Ta prosta, ale skuteczna technika może pomóc Ci zoptymalizować użyteczność i wydajność SEO Twojej strony internetowej.

Tego skryptu nie wymyśliliśmy sami – po raz pierwszy zobaczyliśmy go u [Daniela Foleya Cartera w poście na LinkedIn](https://www.linkedin.com/posts/daniel-foley-assertive_seo-seotip-activity-7222524367090446336-X_yl/). Ta wskazówka SEO jest naprawdę pomocna, dlatego przygotowaliśmy na jej temat ten artykuł na blogu. Inni użytkownicy również uznali ją za przydatną i stworzyli na jej podstawie nawet [rozszerzenie Chrome do wyróżniania linków](https://github.com/alinr/Chrome-Snippets/blob/main/highlightLinks.js). 

Wypróbuj to i przekonaj się, ile linków pojawi się na Twoich stronach internetowych i które z nich są wyzwalane dopiero przez JavaScript!