SEO pro React: vykreslování, metadata a odkazy pro aplikaci v Reactu, která se umisťuje

Rychlý kvíz

Hodí se vám SEO a jak začít?

Otázka 1 z 425%

Hledají lidé na Googlu to, co prodáváte?

Ano, myslím siNe, je to nové nebo velmi úzkéNevím

SEO pro React je práce na tom, aby aplikaci v Reactu vyhledávače a AI asistenti dokázali procházet, indexovat a pochopit. Samotný React je neutrální: problémy vznikají tím, že se vše vykresluje v prohlížeči. Google ve své příručce Základy SEO pro JavaScript potvrzuje, že aplikace v JavaScriptu zpracovává ve třech fázích (procházení, vykreslení, indexace) a že „vykreslování na serveru nebo předrenderování je pořád skvělý nápad, protože web zrychluje pro uživatele i crawlery a ne všichni roboti dokážou spouštět JavaScript.“

Proč je React pro SEO obtížný?

Aplikace v Reactu vytvořená jako jednostránková aplikace (SPA) odešle soubor HTML, který obsahuje málo víc než prázdný kořenový div a značku script. Prohlížeč stáhne JavaScript, spustí ho a teprve potom sestaví stránku. Crawler, který čte jen HTML, nevidí nic k indexaci: žádné nadpisy, žádný text, žádné odkazy.

Googlebot JavaScript spouští, ale v samostatném kroku: stránka se prochází, zařadí do fronty na vykreslení, vykreslí se v bezhlavém Chromiu a teprve potom se použijí vykreslené odkazy a obsah. Každý další krok je příležitostí k selhání (chyba skriptu, zablokované API, časový limit) a přidává zpoždění, než se nové stránky objeví ve vyhledávání. Náš průvodce SEO pro JavaScript podrobně popisuje tento postup a článek o indexaci v Google ukazuje, jak dostat stránky do indexu rychleji.

Ostatní roboti jsou méně trpěliví. Analýza Vercel z prosince 2024 The rise of the AI crawler zjistila, že „žádný z hlavních AI crawlerů v současnosti nevykresluje JavaScript“, a jmenovala GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot a PerplexityBot. Stránka v Reactu vykreslovaná na klientovi je neviditelná pro ChatGPT, Claude a Perplexity, i když ji Google indexuje.

Který přístup k vykreslování má web v Reactu použít?

Tým Reactu dnes doporučuje začínat nové aplikace s frameworkem. Když 14. února 2025 ukončil podporu Create React App, napsal ve svém oznámení, že „vykreslování na serveru může zlepšit SEO“, a zároveň zvyšuje výkon, protože uživatelé musí stáhnout méně JavaScriptu, než uvidí obsah. Možnosti od nejslabší po nejsilnější pro vyhledávání:

K dynamickému vykreslování je dokumentace Google jasná: byla „řešením, nikoli dlouhodobým řešením“ a Google místo ní doporučuje vykreslování na serveru, statické vykreslování nebo hydrataci. Pokud vybíráte framework, náš průvodce SEO pro Next.js podrobně popisuje režimy vykreslování, Metadata API a mapy webu.

Pokud migrace možná není, lze jednostránkovou aplikaci Google indexovat i tak, s péčí. Náš průvodce SEO pro jednostránkové aplikace uvádí podmínky; zbytek tohoto článku platí pro oba případy.

Jak v Reactu nastavit titulky a meta značky?

Od Reactu 19 (stabilní od 5. prosince 2024) mohou komponenty vykreslovat značky title, meta a link přímo a React je přesune do hlavičky dokumentu. Poznámky k vydání React 19 uvádějí, že tato nativní podpora funguje „s aplikacemi pouze na klientovi, streamovaným SSR a Server Components“. Před Reactem 19 dělaly totéž knihovny jako react-helmet nebo react-helmet-async a zůstávají užitečné pro přepsání výchozích hodnot pro jednotlivé trasy.

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>
    </>
  )
}

Tři pravidla platí bez ohledu na metodu:

• Jeden titulek na stránku, jedinečný a popisný. Dokumentace Reactu varuje, že pokud několik komponent vykresluje titulek současně, „chování prohlížečů a vyhledávačů není definováno“. Předávejte jeden řetězec (šablonový literál), ne směs textu a proměnných.
• Jeden popis a jedna kanonická značka na URL, generované z dat stránky. Při návrhu pomůže generátor meta značek a kontrola kanonických značek potvrdí, co je živé.
• Značky Open Graph v počátečním HTML u stránek, které lidé sdílejí, protože roboti náhledů odkazů obecně čtou surové HTML.

Které chyby v routování a odkazech blokují indexaci?

Google uvádí, že „může objevit vaše odkazy, jen pokud jsou to prvky HTML a mají atribut href“, a nedoporučuje používat fragmenty URL k načítání jiného obsahu. Většina problémů s SEO v Reactu pochází z detailů routování:

Abyste viděli, co Google vykresluje, použijte nástroj Kontrola URL v Search Console a zobrazte HTML testované stránky, nebo na klíčových šablonách spusťte kontrolu indexovatelnosti.

Jak v Reactu řešit mapy webu a strukturovaná data?

React nemá mapu webu zabudovanou. Generujte sitemap.xml při sestavení z tras a dat (nebo pomocí funkce mapy webu vašeho frameworku), uvádějte jen kanonické URL, které vracejí 200, a odkažte na ni v robots.txt. Generátor XML mapy webu funguje pro menší statické weby.

Strukturovaná data se řídí stejným pravidlem jako metadata: vykreslujte skript JSON-LD se stránkou, ze stejných dat, ideálně na serveru. Google může přečíst JSON-LD vložený JavaScriptem až po vykreslení, ale značkování chybějící v počátečním HTML chybí i u crawlerů, kteří nevykreslují. Použijte Article pro příspěvky, Product pro e-commerce, Organization pro celý web a BreadcrumbList pro hluboké stránky.

Jak výkon ovlivňuje SEO v Reactu?

Velké balíčky JavaScriptu zhoršují Core Web Vitals: prohlížeč musí kód stáhnout, zpracovat a hydratovat, než stránka začne reagovat, což tíží Largest Contentful Paint a Interaction to Next Paint, zejména na mobilu. Oznámení Create React App od týmu Reactu uvádí, že vykreslování na serveru posílá méně JavaScriptu a kompletní dokument HTML, což dává rychlejší First Contentful Paint a může snížit INP. Praktické páky: dělte kód podle tras pomocí React.lazy, u obrázků uvádějte rozměry, komponenty pod záhybem načítejte líně a kontrolujte skripty třetích stran.

Co má obsahovat kontrolní seznam SEO pro React?

1. Každá indexovatelná URL vrací úplné HTML (vykreslování na serveru nebo předrenderování), ověřeno pomocí curl.
2. Jeden jedinečný titulek, popis a kanonická značka odkazující na sebe pro každou URL.
3. Trasy založené na historii, žádné hashové URL a každý interní odkaz vykreslen jako a s href.
4. Skutečné stavové kódy: 404 pro chybějící stránky, 301 nebo 308 pro přesunuté stránky.
5. sitemap.xml generovaná ze stejných dat jako trasy, uvedená v robots.txt.
6. JSON-LD vykreslené se stránkou, ověřené nástrojem Rich Results Test.
7. Skripty, styly a API potřebné pro vykreslení povolené v robots.txt.
8. Kód rozdělený podle tras a Core Web Vitals sledované u skutečných uživatelů.

Jak zviditelnit web v Reactu v odpovědích AI?

GEO (optimalizace pro generativní vyhledávače) začíná přístupem. Protože AI crawlery stahují surové HTML, musí stránka v Reactu bez JavaScriptu doručit svůj text, nadpisy a JSON-LD, aby mohla být přečtena, shrnuta a citována. AI audit procházitelnosti webu ukáže, co tito roboti z vašich stránek dostávají. Druhou podmínkou je obsah, který stojí za citování: stránky, které odpovídají na jednu otázku v každé sekci, se zdroji, čísly a jasnými definicemi.

Obsahovou stránku automatizuje Sorank, náš produkt. Sorank je SEO a GEO software na autopilotu: jeho generátor článků pro blog napíše a publikuje 20, 60 nebo 120 článků měsíčně se zdroji, interními odkazy a obrázky a připojí se k vlastním technologiím, jako je web v Reactu nebo Next.js, přes webhook. Jeho SEO chat odpovídá v konverzaci na otázky o výkonu vašeho webu ve vyhledávání.

Stručně: posílejte HTML ze serveru, dejte každé URL vlastní titulek, popis a kanonickou značku a používejte skutečné odkazy. React se pak umisťuje jako každý jiný web a AI asistenti ho umějí přečíst. Chcete-li takový web zásobovat články psanými pro Google i AI, podívejte se na tarify Sorank, od $49 měsíčně s 3denní bezplatnou zkušební verzí.