JavaScript SEO - jak Google renderuje strony i co musisz wiedzieć

Proces indeksacji JS:
1. Googlebot pobiera HTML
2. Jeśli HTML wymaga JS do wyświetlenia treści → dodaje do kolejki renderowania
3. Rendering wykonuje Web Rendering Service (WRS)
4. Wyrenderowana strona jest indeksowana

Problemy:
- Kolejka renderingu - opóźnienie dni/tygodnie vs. natychmiastowa indeksacja HTML
- Limity zasobów - Google ma ograniczony budżet na rendering
- Błędy JS - jeden błąd może zablokować całą stronę
- Timeouty - wolne ładowanie = niepełny rendering

Co Google renderuje dobrze:
- Popularne frameworki (React, Vue, Angular)
- Standardowy ES6+
- Większość bibliotek

Problemy:
- Bleeding edge API (nie zawsze wspierane)
- Zasoby blokowane w robots.txt
- Infinite scroll bez paginacji
- Lazy loading treści wymagający interakcji

Client-Side Rendering (CSR):
- Treść generowana w przeglądarce przez JS
- Najgorsze dla SEO - zależne od renderingu Google
- OK dla dashboardów, aplikacji za logowaniem

Server-Side Rendering (SSR):
- HTML generowany na serwerze przy każdym żądaniu
- Google dostaje pełny HTML natychmiast
- Idealny dla dynamicznych treści (e-commerce, newsy)
- Przykłady: Next.js, Nuxt.js, Angular Universal

Static Site Generation (SSG):
- HTML generowany podczas buildu
- Najszybsze, najlepsze dla SEO
- Dla treści rzadko zmieniających się (blogi, landing pages)
- Przykłady: Next.js, Gatsby, Astro

Incremental Static Regeneration (ISR):
- Połączenie SSG i SSR
- Statyczne strony z możliwością regeneracji
- Next.js revalidate

Rekomendacja:
SSG > SSR > CSR dla SEO. Jeśli musisz używać CSR - implementuj dynamic rendering.

Google Search Console - Inspekcja URL:
1. Wklej URL
2. Kliknij "Testuj aktualny URL"
3. Porównaj "HTML" i "Wyrenderowana strona"
4. Sprawdź czy treść widoczna w obu wersjach

Mobile-Friendly Test:
- Pokazuje wyrenderowany HTML
- Screenshot jak Google widzi stronę
- Lista zablokowanych zasobów

Chrome DevTools:
- Disable JavaScript - co widzi crawler bez renderingu
- Network > Block request URL - symuluj blokady
- Performance > Screenshots - zobacz co ładuje się kiedy

Screaming Frog:
- JavaScript rendering mode
- Porównanie HTML vs. rendered
- Bulk testing całej strony

Typowe problemy:
- Treść widoczna w przeglądarce, nie w source HTML
- Linki jako onclick zamiast href
- Obrazy ładowane przez JS bez src
- Nawigacja bez rzeczywistych URL-i

Linki:
```html

Link
Link

Link
```

Lazy loading:
- Używaj Intersection Observer
- Zapewnij crawlowalne linki do lazy content
- Nie ukrywaj treści za "Load more" bez paginacji

Routing:
- Używaj History API (nie hash routing #/page)
- Każda strona musi mieć unikalny URL
- SSR fallback dla botów

Meta tagi:
```javascript
// Używaj bibliotek do zarządzania head (react-helmet, vue-meta)
// Meta tagi muszą być w HTML przed renderingiem
```

Sitemap:
- Wszystkie URL-e w sitemap.xml
- Nie tylko dynamicznie generowane

robots.txt:
- Nie blokuj CSS i JS
- Google musi pobrać wszystkie zasoby do renderingu

Timeout:
- First contentful paint < 3s
- Interactive < 5s
- Google może timeout'ować wolne strony