React SEO: renderelés, metaadatok és linkek egy rangsoroló React-alkalmazáshoz

Gyors kvíz

Neked való a SEO, és hogyan kezdd el?

1. kérdés, összesen 425%

Keresik az emberek a Google-ben, amit eladsz?

Igen, szerintem igenNem, új vagy nagyon speciálisNem tudom

A React SEO azon munka, amely a React-alkalmazást bejárhatóvá, indexelhetővé és érthetővé teszi a keresőmotorok és az AI-asszisztensek számára. Maga a React semleges: a gondok abból erednek, hogy mindent a böngészőben renderelünk. A Google a JavaScript SEO alapjaiban megerősíti, hogy a JavaScript-alkalmazásokat három fázisban dolgozza fel (bejárás, renderelés, indexelés), és hogy „a szerveroldali vagy előrenderelt megjelenítés továbbra is nagyon jó ötlet, mert gyorsabbá teszi a webhelyet a felhasználóknak és a robotoknak, és nem minden bot tud JavaScriptet futtatni.”

Miért nehéz a React a SEO-nak?

Egy egyoldalas alkalmazásként létrehozott React-app olyan HTML-fájlt szállít, amely nem sokkal több egy üres gyökér-divnél és egy script-címkénél. A böngésző letölti a JavaScriptet, lefuttatja, és felépíti az oldalt. Egy robot, amely csak a HTML-t olvassa, nincs mit indexeljen: nincsenek fejlécek, szöveg és linkek.

A Googlebot ugyan futtat JavaScriptet, de külön lépésben: az oldalt bejárja, renderelésre sorba állítja, egy headless Chromiumban rendereli, és csak utána használja a renderelt linkeket és tartalmat. Minden plusz lépés hibalehetőség (szkripthiba, blokkolt API, időtúllépés), és késlelteti, hogy az új oldalak megjelenjenek a keresésben. A JavaScript SEO útmutatónk részletezi ezt a folyamatot, a Google-indexelésről szóló cikkünk pedig azt, hogyan lehet gyorsabban indexeltetni az oldalakat.

Más robotok kevésbé türelmesek. A Vercel 2024. decemberi elemzése, az Az AI-robotok felemelkedése megállapította, hogy „a nagy AI-robotok közül egyik sem renderel jelenleg JavaScriptet”, és név szerint említette a GPTBotot, a ChatGPT-Usert, az OAI-SearchBotot, a ClaudeBotot és a PerplexityBotot. Egy kliensoldalon renderelt React-oldal láthatatlan a ChatGPT, a Claude és a Perplexity számára, még akkor is, ha a Google indexeli.

Melyik renderelési megoldást használja egy React-oldal?

A React-csapat ma már keretrendszerrel kezdett új alkalmazásokat ajánl. Amikor 2025. február 14-én kivezette a Create React App-et, a bejelentésében leírta, hogy „a szerveroldali renderelés javíthatja a SEO-t”, és a teljesítményt is javítja, mert kevesebb JavaScriptet kell letölteni, mielőtt a felhasználó tartalmat lát. A lehetőségek, keresésre gyengébbtől az erősebbig:

A dinamikus renderelésről a Google dokumentációja egyértelmű: ez „megkerülő megoldás volt, nem hosszú távú megoldás”, a Google pedig a szerveroldali renderelést, a statikus renderelést vagy a hidratálást ajánlja helyette. Ha keretrendszert választasz, a Next.js SEO útmutatónk részletesen tárgyalja a renderelési módokat, a Metadata API-t és a sitemapeket.

Ha a migráció nem lehetséges, egy egyoldalas alkalmazást gondos munkával a Google még indexelhet. Az egyoldalas alkalmazások SEO-járól szóló útmutatónk felsorolja a feltételeket; a cikk többi része mindkét esetre vonatkozik.

Hogyan állítasz be címeket és metacímkéket Reactban?

A React 19 óta (2024. december 5-től stabil) a komponensek közvetlenül renderelhetnek title, meta és link címkéket, a React pedig a dokumentum fejlécébe emeli őket. A React 19 kiadási jegyzetei szerint ez a natív támogatás „csak kliensoldali alkalmazásokkal, streamelt SSR-rel és Server Components-szel” működik. A React 19 előtt az olyan könyvtárak, mint a react-helmet vagy a react-helmet-async, ugyanezt a munkát végezték, és az útvonalankénti alapértelmezések felülírásához továbbra is hasznosak.

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

Három szabály vonatkozik, bármelyik módszert használod:

• Egy cím oldalanként, egyedi és leíró. A React dokumentációja figyelmeztet, hogy ha több komponens egyszerre renderel címet, „a böngészők és a keresőmotorok viselkedése nincs meghatározva”. Egyetlen sztringet adj át (sablonliterált), ne vegyes szöveget és változókat.
• Egy leírás és egy canonical URL-enként, az oldal adataiból generálva. A metacímke-generátor segít megfogalmazni őket, a canonical-ellenőrző pedig megerősíti, mi van élesben.
• Open Graph címkék a kezdeti HTML-ben azoknál az oldalaknál, amelyeket az emberek megosztanak, mert a linkelőnézet-botok általában a nyers HTML-t olvassák.

Mely útvonalkezelési és linkhibák akadályozzák az indexelést?

A Google kimondja, hogy „csak akkor tudja felfedezni a linkjeidet, ha href attribútummal rendelkező HTML-elemek”, és nem ajánlja, hogy URL-töredékekkel töltsenek be másik tartalmat. A React SEO-hibáinak nagy része az útvonalkezelés részleteiből ered:

Annak megnézéséhez, mit renderel a Google, használd a Search Console URL-ellenőrzés eszközét, és nézd meg a tesztelt oldal HTML-jét, vagy futtass indexelhetőség-ellenőrzőt a kulcsfontosságú sablonokon.

Hogyan kezeled a sitemapeket és a strukturált adatokat Reactban?

A Reactnak nincs beépített sitemapje. Generálj sitemap.xml fájlt build időben az útvonalaidból és adataidból (vagy a keretrendszered sitemap-funkciójából), csak 200-as választ adó kanonikus URL-eket sorolj fel, és hivatkozz rá a robots.txt-ben. Kis statikus oldalakhoz egy XML-sitemap generátor is megfelel.

A strukturált adatokra ugyanaz a szabály vonatkozik, mint a metaadatokra: a JSON-LD script-címkét az oldallal együtt renderelve add hozzá, ugyanabból az adatból, lehetőleg a szerveren. A Google a renderelés után olvassa a JavaScript által beillesztett JSON-LD-t, de ami hiányzik a kezdeti HTML-ből, az azoknak a robotoknak is hiányzik, amelyek nem renderelnek. Cikkeknél használj Article, webáruházaknál Product, az egész webhelyre Organization, mély oldalaknál pedig BreadcrumbList típust.

Hogyan befolyásolja a teljesítmény a React SEO-t?

A nagy JavaScript-csomagok rontják a Core Web Vitals mutatókat: a böngészőnek le kell töltenie, feldolgoznia és hidratálnia a kódot, mielőtt az oldal reagál, ez pedig terheli a Largest Contentful Paint és az Interaction to Next Paint mutatókat, különösen mobilon. A React-csapat Create React App bejelentése megjegyzi, hogy a szerveroldali renderelés kevesebb JavaScriptet és teljes HTML-dokumentumot küld, ami gyorsabb First Contentful Paint-et eredményez, és csökkentheti az INP-t. Gyakorlati eszközök: a kódot útvonalanként oszd fel a React.lazy segítségével, a képeket explicit méretadatokkal szolgáltasd, a hajtás alatti komponenseket lusta betöltéssel töltsd be, és vizsgáld át a harmadik féltől származó szkripteket.

Mit tartalmazzon egy React SEO-ellenőrzőlista?

1. Minden indexelhető URL teljes HTML-t ad (szerveroldali renderelés vagy előrenderelés), curl-lel ellenőrizve.
2. URL-enként egy egyedi cím, leírás és önhivatkozó canonical.
3. Történet-alapú útvonalak, nincsenek hash-URL-ek, és minden belső link href attribútumú a elemként renderelődik.
4. Valódi státuszkódok: 404 a hiányzó oldalakra, 301 vagy 308 az áthelyezettekre.
5. Az útvonalakkal azonos adatokból generált sitemap.xml, a robots.txt-ben felsorolva.
6. A JSON-LD az oldallal együtt renderelve, a Rich Results Testtel validálva.
7. A rendereléshez szükséges szkriptek, stílusok és API-k engedélyezve a robots.txt-ben.
8. Útvonalankénti kódfelosztás, és a Core Web Vitals figyelése valódi felhasználóknál.

Hogyan teszed láthatóvá a React-oldalt az AI-válaszokban?

A GEO (generatív motoroptimalizálás) a hozzáféréssel kezdődik. Mivel az AI-robotok a nyers HTML-t töltik le, egy React-oldalnak JavaScript nélkül kell szolgáltatnia a szövegét, fejlécét és JSON-LD-jét ahhoz, hogy olvassák, összefoglalják és idézzék. Egy weboldal bejárhatósági AI-auditja megmutatja, mit kapnak ezek a botok az oldalaidról. A második feltétel az idézésre érdemes tartalom: olyan oldalak, amelyek szakaszonként egy kérdésre válaszolnak, forrásokkal, adatokkal és világos definíciókkal.

Ezt a tartalmi részt automatizálja a Sorank, a termékünk. A Sorank autopilot SEO- és GEO-szoftver: a blogcikk-generátora havi 20, 60 vagy 120 cikket ír és publikál forrásokkal, belső linkekkel és képekkel, egyéni stackekhez, például React- vagy Next.js-oldalhoz pedig webhookon keresztül csatlakozik. A SEO-csevegés csevegésben válaszol a weboldalad keresési teljesítményére vonatkozó kérdésekre.

A lényeg röviden: szolgáltass HTML-t a szerverről, adj minden URL-nek saját címet, leírást és canonical címkét, és használj valódi linkeket. A React így ugyanúgy rangsorol, mint bármely más oldal, és az AI-asszisztensek is olvashatják. Hogy ez az oldal folyamatosan kapjon Google-nek és AI-nek készült cikkeket, nézd meg a Sorank csomagjait, havi $49-tól, 3 napos ingyenes próbaidőszakkal.