Dlaczego aplikacje jednostronicowe mają problem w wyszukiwarkach i jak to naprawić: SSR, generowanie statyczne lub prerendering, tytuły dla każdej trasy w React 19 lub react-helmet-async, prawdziwe adresy URL, soft 404, sitemapy, URL Inspection i narzędzie do sprawdzania źródła.
Aplikacje jednostronicowe często wysyłają wyszukiwarkom niemal pustą powłokę HTML i budują stronę później za pomocą JavaScriptu. Google potrafi renderować JavaScript, ale robi to z opóźnieniem, a inne crawlery mogą tego nie robić. Rozwiązaniem jest serwowanie prawdziwego HTML dla każdego adresu URL przez renderowanie po stronie serwera, generowanie statyczne lub prerendering, z unikalnym tytułem, opisem i adresem kanonicznym na każdej trasie.
Trzy najważniejsze poprawki
Ta strona sama jest jednostronicową aplikacją React, która prerenderuje każdą publiczną podstronę podczas budowania, więc to są kontrole, które przeprowadzamy na własnych stronach. Wklej źródło strony do narzędzia sprawdzającego, aby zobaczyć, co dostaje crawler, zanim uruchomi się jakikolwiek JavaScript.
Tak. Google renderuje JavaScript, ale strony czekają w kolejce do renderowania, a wszystko, co nie zdoła się załadować, zostaje pominięte. Inne wyszukiwarki i boty podglądu linków renderują mniej albo wcale, więc serwowanie HTML jest bezpieczniejszym wyborem.
Nie. Next.js ułatwia renderowanie po stronie serwera i generowanie statyczne, ale SPA w stylu Vite lub Create React App może prerenderować swoje publiczne trasy podczas budowania i uzyskać ten sam HTML dostępny dla crawlerów.
Nie do podstawowych znaczników. React 19 renderuje elementy title, meta i link z dowolnego komponentu i przenosi je do head. react-helmet-async pozostaje przydatny w React 18 i wcześniejszych.
Nie, jeśli crawlery i ludzie dostają tę samą treść. Prerendering jedynie zapisuje stronę, którą Twoi użytkownicy i tak by zobaczyli. Staje się cloakingiem, jeśli HTML serwowany botom mówi coś innego.
Sposoby na dostarczenie crawlerom prawdziwego HTML
React 19 pozwala każdemu komponentowi renderować znaczniki title, meta i link; React przenosi je do head dokumentu. Każda trasa ustawia własne.
Owiń aplikację raz w HelmetProvider, a potem ustawiaj znaczniki dla każdej strony. Wersja async jest bezpieczna przy renderowaniu po stronie serwera i prerenderingu.
Google ignoruje wszystko po znaku #, ustalając, czym jest adres URL. Używaj History API (BrowserRouter, createBrowserRouter), aby każdy widok miał własną ścieżkę.
Crawlery podążają za elementami a z atrybutem href. Handler kliknięcia na div jest dla nich niewidoczny. Komponenty Link routera renderują prawdziwy element a.
Aplikacja działająca tylko po stronie klienta odpowiada na każdy URL statusem 200, więc brakująca strona wygląda jak prawdziwa. Dodaj noindex do widoku not found albo serwuj prawdziwy 404 z serwera lub z kroku prerenderingu.
Wypisz każdy publiczny URL raz, z jego adresem kanonicznym. Generuj ją z tej samej listy tras, której używa aplikacja, aby nigdy się nie rozjechały.
Chcesz, żeby znaczniki napisały się same? Wypróbuj
Sprawdzanie źródła strony
Wklej HTML z Wyświetl źródło strony, aby sprawdzić, co otrzymuje crawler.
Źródło strony (przykład to typowa pusta powłoka SPA)
Checklista SEO dla SPA
Tytuł
"{title}" ({n} znaków)
Brak tytułu w HTML
Meta description
{n} znaków
Brak
Link canonical
Główny nagłówek (h1)
Brak h1 przed uruchomieniem JavaScriptu
Widoczny tekst
{n} słów w body przed uruchomieniem JavaScriptu
Linki dostępne dla crawlerów
{n} elementów a z prawdziwym href
Tytuł Open Graph (podglądy linków)
Indeksowanie dozwolone
robots meta: {robots}
Brak robots meta (strona indeksowalna)
Zacznij za darmo · Bez karty kredytowej