SEO w React: renderowanie, metadane i linki dla aplikacji React, która się pozycjonuje

Szybki quiz

Czy SEO jest dla Ciebie i jak zacząć?

Pytanie 1 z 425%

Czy ludzie szukają w Google tego, co sprzedajesz?

Tak, chyba takNie, to coś nowego lub bardzo niszowegoNie wiem

SEO w React to praca nad tym, by aplikacja React była skanowalna, indeksowalna i zrozumiała dla wyszukiwarek oraz asystentów AI. Sam React jest neutralny: problemy biorą się z renderowania wszystkiego w przeglądarce. Google potwierdza w podstawach SEO dla JavaScriptu, że przetwarza aplikacje JavaScript w trzech fazach (skanowanie, renderowanie, indeksowanie) i że renderowanie po stronie serwera lub prerendering „to nadal świetny pomysł, bo przyspiesza witrynę dla użytkowników i robotów, a nie wszystkie boty potrafią uruchomić JavaScript”.

Dlaczego React jest trudny dla SEO?

Aplikacja React zbudowana jako aplikacja jednostronicowa dostarcza plik HTML, w którym jest niewiele więcej niż pusty główny div i tag script. Przeglądarka pobiera JavaScript, uruchamia go i buduje stronę. Robot, który czyta tylko HTML, nie widzi nic do zaindeksowania: ani nagłówków, ani tekstu, ani linków.

Googlebot uruchamia JavaScript, ale w osobnym kroku: strona jest skanowana, trafia do kolejki renderowania, jest renderowana w bezgłowym Chromium i dopiero potem wykorzystywane są wyrenderowane linki i treść. Każdy dodatkowy krok to szansa na błąd (błąd skryptu, zablokowane API, przekroczony limit czasu) i dodatkowe opóźnienie, zanim nowe strony pojawią się w wynikach. Nasz przewodnik po SEO dla JavaScriptu opisuje ten proces, a artykuł o indeksowaniu w Google pokazuje, jak przyspieszyć indeksowanie stron.

Inne boty są mniej cierpliwe. Analiza Vercel z grudnia 2024 roku, The rise of the AI crawler, wykazała, że „żaden z głównych crawlerów AI nie renderuje obecnie JavaScriptu”, wymieniając GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot i PerplexityBot. Strona React renderowana po stronie klienta jest niewidoczna dla ChatGPT, Claude i Perplexity, nawet jeśli Google ją zaindeksuje.

Jakie podejście do renderowania wybrać dla witryny w React?

Zespół React zaleca obecnie zaczynanie nowych aplikacji od frameworka. Wycofując Create React App 14 lutego 2025 roku, napisał w ogłoszeniu, że „renderowanie na serwerze może poprawić SEO”, a do tego poprawia wydajność, bo zmniejsza ilość JavaScriptu do pobrania przed wyświetleniem treści. Opcje od najsłabszej do najmocniejszej z punktu widzenia wyszukiwarek:

W sprawie renderowania dynamicznego dokumentacja Google jest jednoznaczna: „było obejściem, a nie rozwiązaniem długoterminowym”, a Google zaleca zamiast niego renderowanie po stronie serwera, renderowanie statyczne lub hydrację. Jeśli wybierasz framework, nasz przewodnik po SEO w Next.js szczegółowo omawia tryby renderowania, Metadata API i mapy witryny.

Jeśli migracja nie wchodzi w grę, Google i tak może zaindeksować aplikację jednostronicową, o ile zachowasz ostrożność. Nasz przewodnik po SEO aplikacji jednostronicowych wymienia warunki; dalsza część artykułu dotyczy obu przypadków.

Jak ustawić tytuły i metatagi w React?

Od React 19 (wersja stabilna od 5 grudnia 2024 roku) komponenty mogą bezpośrednio renderować tagi title, meta i link, a React przenosi je do head dokumentu. Informacje o wydaniu React 19 podają, że to natywne wsparcie działa „z aplikacjami wyłącznie klienckimi, strumieniowym SSR i Server Components”. Przed React 19 tę pracę wykonywały biblioteki takie jak react-helmet czy react-helmet-async, które nadal przydają się do nadpisywania wartości domyślnych dla poszczególnych ścieżek.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Trzy zasady obowiązują niezależnie od metody:

• Jeden tytuł na stronę, unikalny i opisowy. Dokumentacja React ostrzega, że jeśli kilka komponentów jednocześnie renderuje tytuł, „zachowanie przeglądarek i wyszukiwarek jest niezdefiniowane”. Przekazuj jeden ciąg znaków (template literal), a nie mieszankę tekstu i zmiennych.
• Jeden opis i jeden adres kanoniczny na URL, generowane z danych strony. Generator metatagów pomaga je zredagować, a narzędzie do sprawdzania adresu kanonicznego potwierdza, co jest opublikowane.
• Tagi Open Graph w początkowym HTML dla stron, które są udostępniane, bo boty podglądu linków zazwyczaj czytają surowy HTML.

Jakie błędy routingu i linków blokują indeksowanie?

Google podaje, że „może wykryć Twoje linki tylko wtedy, gdy są elementami HTML a z atrybutem href”, i odradza używanie fragmentów URL do ładowania różnych treści. Większość problemów SEO w React wynika ze szczegółów routingu:

Aby zobaczyć, co renderuje Google, użyj narzędzia do sprawdzania adresów URL w Search Console i obejrzyj HTML testowanej strony albo sprawdź kluczowe szablony w narzędziu do badania indeksowalności.

Jak obsłużyć mapę witryny i dane strukturalne w React?

React nie ma wbudowanej mapy witryny. Generuj sitemap.xml podczas builda z Twoich ścieżek i danych (albo funkcją mapy witryny we frameworku), umieszczaj tylko kanoniczne adresy zwracające 200 i wskaż plik w robots.txt. Dla małej strony statycznej wystarczy generator mapy witryny XML.

Dane strukturalne podlegają tej samej zasadzie co metadane: renderuj skrypt JSON-LD razem ze stroną, z tych samych danych, najlepiej na serwerze. Google potrafi odczytać JSON-LD wstrzyknięty przez JavaScript po renderowaniu, ale znaczniki nieobecne w początkowym HTML są nieobecne także dla robotów, które nie renderują. Używaj Article dla wpisów, Product w e-commerce, Organization w całej witrynie i BreadcrumbList dla głębokich stron.

Jak wydajność wpływa na SEO w React?

Duże paczki JavaScriptu szkodzą Core Web Vitals: przeglądarka musi pobrać, przeanalizować i zhydratować kod, zanim strona zacznie reagować, co obciąża Largest Contentful Paint i Interaction to Next Paint, zwłaszcza na urządzeniach mobilnych. Ogłoszenie zespołu React o Create React App przypomina, że renderowanie na serwerze wysyła mniej JavaScriptu i pełny dokument HTML, co przyspiesza First Contentful Paint i może obniżyć INP. Praktyczne dźwignie: dzielenie kodu według ścieżek za pomocą React.lazy, obrazy z jawnie podanymi wymiarami, leniwe ładowanie komponentów poniżej pierwszego ekranu i przegląd skryptów zewnętrznych.

Co powinna zawierać lista kontrolna SEO dla React?

1. Każdy indeksowalny adres zwraca pełny HTML (renderowanie na serwerze lub prerendering), sprawdzony przez curl.
2. Unikalny tytuł, opis i adres kanoniczny wskazujący na samą stronę dla każdego URL.
3. Ścieżki oparte na historii, brak adresów z hashem, a każdy link wewnętrzny renderowany jako a z href.
4. Prawdziwe kody statusu: 404 dla brakujących stron, 301 lub 308 dla przeniesionych.
5. sitemap.xml generowana z tych samych danych co ścieżki i zgłoszona w robots.txt.
6. JSON-LD renderowany razem ze stroną i sprawdzony w teście wyników z elementami rozszerzonymi.
7. Skrypty, style i API potrzebne do renderowania dozwolone w robots.txt.
8. Kod podzielony według ścieżek i Core Web Vitals monitorowane u prawdziwych użytkowników.

Jak sprawić, by witryna w React była widoczna w odpowiedziach AI?

GEO (optymalizacja pod silniki generatywne) zaczyna się od dostępu. Ponieważ crawlery AI pobierają surowy HTML, strona React musi dostarczać tekst, nagłówki i JSON-LD bez JavaScriptu, aby mogła zostać przeczytana, streszczona i zacytowana. Audyt dostępności witryny dla AI pokazuje, co te boty otrzymują z Twoich stron. Drugi warunek to treść warta cytowania: strony, które w każdej sekcji odpowiadają na jedno pytanie, ze źródłami, liczbami i jasnymi definicjami.

Tę część treściową automatyzuje Sorank, nasz produkt. Sorank to oprogramowanie SEO i GEO działające w trybie autopilot: Generator artykułów blogowych pisze i publikuje 20, 60 lub 120 artykułów miesięcznie ze źródłami, linkami wewnętrznymi i obrazami, a przez webhook łączy się z niestandardowymi stackami, takimi jak witryna w React lub Next.js. SEO Chat odpowiada w rozmowie na pytania o wyniki Twojej witryny w wyszukiwarce.

W skrócie: dostarczaj HTML z serwera, nadaj każdemu adresowi własny tytuł, opis i adres kanoniczny oraz używaj prawdziwych linków. Wtedy React pozycjonuje się jak każda inna witryna, a asystenci AI mogą ją czytać. Aby stale zasilać tę witrynę artykułami tworzonymi z myślą o Google i AI, zobacz plany Sorank, od $49 miesięcznie z 3-dniowym bezpłatnym okresem próbnym.