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

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.

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. 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. 

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!