Nawigacja naszej strony blokuje roboty AI – jak poprawić wykrywalność treści?

Jennifer, to jeden z najczęstszych problemów z widocznością w AI. Oto jak to naprawić:

Problem:

Roboty AI widzą odpowiedź HTML, nie wyrenderowany HTML.

Warstwy rozwiązania:

Warstwa 1: Podstawowa nawigacja HTML

<!-- Zawsze w odpowiedzi HTML -->
<nav>
  <a href="/products">Produkty</a>
  <a href="/services">Usługi</a>
  <a href="/resources">Zasoby</a>
</nav>

Warstwa 2: Rozszerzenie JavaScript

// JS dodaje interaktywność
enhanceNavigationWithDropdowns();

To progresywne ulepszanie. Podstawowa nawigacja działa bez JS; JS ją wzbogaca.

Kluczowa zasada:

Wszystkie kluczowe linki muszą być w początkowej odpowiedzi HTML. JavaScript może dodać zaawansowane menu, animacje i efekty – ale same linki muszą być w HTML.

Różnice w zachowaniu robotów AI, które warto znać:

Google vs roboty AI:

Co to oznacza:

Jeśli roboty AI trafiają na stronę główną, a nawigacja jest tylko w JS, widzą:

<nav id="main-nav">
  <!-- Tu pusto, dopóki nie zadziała JS -->
</nav>

Nie mają żadnych linków do śledzenia. Crawl kończy się na stronie głównej.

Nasze dane od klientów:

Strony z nawigacją tylko w JS:

• Średnia wykrywalność stron przez roboty AI: 8% całości

Strony z nawigacją HTML:

• Średnia wykrywalność stron przez roboty AI: 73% całości

To 9x różnica w dostępności treści.

Możliwości wdrożenia nawigacji w React:

Opcja 1: Renderowanie po stronie serwera (najlepsza)

Użyj Next.js lub podobnego:

• Nawigacja renderowana po stronie serwera
• HTML zawiera wszystkie linki
• JS zapewnia interaktywność

Opcja 2: Statyczny fallback HTML

Dodaj podstawową nawigację do szablonu HTML:

<nav class="fallback-nav">
  <!-- Podstawowe linki dla robotów -->
</nav>
<nav class="enhanced-nav" style="display:none">
  <!-- Mega-menu generowane przez JS -->
</nav>

JS pokazuje ulepszone, ukrywa fallback.

Opcja 3: Wstawki po stronie serwera

Dodaj nawigację z serwera przed załadowaniem Reacta:

• SSI lub edge includes
• Działa z każdym frameworkiem
• Bez zmian w React

Nasza rekomendacja:

Opcja 1 (SSR) najlepsza długofalowo. Opcja 2 najszybsza do wdrożenia. Opcja 3 dla starszych systemów.

Nie lekceważ breadcrumbs przy crawlach AI:

Dlaczego breadcrumbs są ważne:

1. Wyraźny sygnał hierarchii – AI rozumie relacje stron
2. Dodatkowe ścieżki crawlów – Każdy breadcrumb to link
3. Zgodność z oznaczeniem schema – Schema BreadcrumbList pomaga AI w interpretacji
4. Wzmocnienie kategorii – Linki do stron nadrzędnych

Wdrożenie:

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Strona główna</span></a>
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/products"><span itemprop="name">Produkty</span></a>
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Nazwa produktu</span>
    </li>
  </ol>
</nav>

Efekty po wdrożeniu breadcrumbs:

• Jeden z klientów dodał breadcrumbs do 2000 głębokich stron
• Wykrywalność tych stron przez roboty AI: 12% → 67%
• Czas wdrożenia: 2 dni

Strategia linkowania wewnętrznego dla wykrywalności przez AI:

Problem z samą nawigacją:

Nawet dobra nawigacja nie pomaga stronom osieroconym. Strony potrzebują:

1. Linków z nawigacji (odkrywalność)
2. Linków wewnętrznych z powiązanych treści (wzmocnienie)
3. Obecności w mapie strony (zapasowo)

Audyt linkowania wewnętrznego:

Znajdowanie stron osieroconych:

# Przeskanuj stronę i znajdź podstrony bez żadnych linków wewnętrznych
screaming-frog your-site.com --output orphans.csv

Szybkie rozwiązanie:

Dodaj sekcję “Powiązane artykuły” do wpisów blogowych. Tworzy to sieć linków wewnętrznych, za którą podążą roboty AI.

Struktura URL współpracuje z nawigacją dla lepszego rozumienia przez AI:

Dobra hierarchia URL:

/products/                     ← Kategoria (w głównej nawigacji)
/products/software/            ← Podkategoria (w dropdown)
/products/software/crm/        ← Typ produktu
/products/software/crm/pro/    ← Konkretny produkt

Roboty AI rozumieją:

• Relacje rodzic-dziecko
• Klastry tematyczne
• Organizację strony

Złe wzorce URL:

/page?id=12345                 ← Brak kontekstu
/products/item-abc123          ← Brak hierarchii
/p/s/c/pro                     ← Niejasne skróty

Problem z nawigacją fasetową:

/products?color=blue&size=large&price=50-100

To generuje nieskończone kombinacje URL. Roboty AI tracą zasoby na crawl parametrów.

Rozwiązanie: Użyj robots.txt, aby blokować parametry w URL, lub stosuj fragmenty zamiast parametrów.

Strony kategorii jako centra nawigacyjne:

Błąd:

Większość stron kategorii to puste korytarze:

• Tylko linki do podstron
• Brak własnej treści
• Zmarnowana szansa

Szansa:

Zrób z kategorii bogate centra:

• Wstęp wyjaśniający kategorię
• Wyróżnione/popularne pozycje
• Sekcje FAQ
• Informacje o ekspertach
• Linki do powiązanych kategorii

Dlaczego to ważne dla AI:

Robot widzi bogatą stronę kategorii → Rozumie Twoją ekspertyzę → Większa szansa na cytowanie

Nasza transformacja:

Przed: Strona kategorii z 50 linkami do produktów, brak treści Po: Strona kategorii z 500 słów wstępu, FAQ, wyróżnionymi produktami, notkami ekspertów

Efekt:

• Czas robota AI na stronie: 2 sekundy → 45 sekund
• Cytowania AI z danej kategorii: 0 → 12 miesięcznie

Ta dyskusja dała mi kompletny plan działania. Oto nasze rozwiązanie:

Faza 1: Szybkie wygrane (ten tydzień)

1. Dodanie fallbackowej nawigacji HTML po stronie serwera

   • 30 najważniejszych linków w HTML
   • Mega-menu w JS nadal działa dla użytkowników

2. Wdrożenie breadcrumbs na całej stronie

   • Oznaczenie schema BreadcrumbList
   • Linki do wszystkich kategorii nadrzędnych

3. Naprawa stron osieroconych

   • Identyfikacja stron bez linków wewnętrznych
   • Dodanie do odpowiednich stron kategorii

Faza 2: Poprawa architektury (przyszły miesiąc)

1. Migracja do Next.js dla pełnego SSR
2. Przebudowa struktury URL dla przejrzystości
3. Wzbogacenie stron kategorii o treść

Faza 3: Monitoring (ciągły)

1. Śledzenie wzorców dostępu robotów AI
2. Monitorowanie, które strony są odkrywane
3. Wykorzystanie Am I Cited do śledzenia cytowań

Kluczowe metryki do monitorowania:

Kluczowy wniosek:

Nawigacja to już nie tylko UX. To zapewnienie, że roboty AI mogą odkryć i zrozumieć całą Twoją stronę. Progresywne ulepszanie to odpowiedź – bazowy HTML dla robotów, JavaScript dla lepszego doświadczenia użytkownika.

Dziękuję wszystkim za praktyczne wskazówki.