Weboldalad remekül néz ki – de vajon a keresőmotorok is látják?

Elkészült a weboldalad. Gyönyörű dizájn, villámgyors interakciók, a felhasználók imádják. Aztán jön egy keresőmotor, vagy mondjuk egy tartalom-archiváló eszköz, és mit lát? Semmit. Üres HTML-vázlatot.

Pont ez történt, amikor az MDN Plus frissítéseit próbáltuk elérni automatizált eszközökkel. A böngészőben teljes értékű oldal jelent meg, a nyers HTML viszont üres volt. Az ok: az MDN Plus egy Single Page Application, magyarul SPA.

Miért probléma ez?

A modern webfejlesztés erősen a kliens oldali renderelésre épül. A React, Vue, Angular és társaik segítségével villámgyorsan lehet interaktív felületeket építeni. A csavar a dologban az, hogy a tartalom nem a HTML-ben lakik, hanem a JavaScriptben.

Egy SPA megnyitásakor általában egy gyakorlatilag üres alapstruktúrát tölt be a böngésző. A valódi szöveg, képek, tartalom csak ezután, a JavaScript futása után jelenik meg. Nekünk, felhasználóknak ez észrevehetetlen. De egy keresőmotorrobotnak, archiváló szolgáltatásnak vagy API-nak olyan, mintha egy könyv üres oldalait kapná meg.

Mire kell figyelned?

Ha blogod van, dokumentációs oldalad, vagy bármilyen tartalmas webhelyed, ez a kérdés létfontosságú:

Keresőmotor-optimalizálás (SEO): A nagy keresők ma már képesek JavaScriptet futtatni, de korántsem tökéletesen. A dinamikusan betöltött tartalom késve indexelődhet, következetlenül, vagy akár egyáltalán nem. Ha a cikkeid, termékleírásaid csak a JavaScript-ben léteznek, a keresők számára láthatatlanok maradhatsz.

Adathordozhatóság: Szeretnéd lementeni a tartalmat? Új platformra költöztetni? Harmadik félnek hozzáférést adni? A dinamikus tartalom mindezt jelentősen megnehezíti.

Teljesítmény lassú kapcsolatokon: A JavaScript-renderelt oldalak lassúnak érződhetnek rosszabb hálózaton vagy gyengébb eszközökön. Az oldal betölt, JavaScript fut, aztán megjelenik a tartalom – ez három lépés, miközben a hagyományos, szerver oldalon renderelt oldal egyetlen mozzanat alatt készen áll.

Megoldások, amelyek működnek

A fejlesztői közösség nem hagyta figyelmen kívül ezt a problémát:

Server-Side Rendering (SSR): Keretrendszerek, mint a Next.js (React) vagy a Nuxt (Vue) már a szerveren legenerálják a teljes HTML-t, mielőtt elküldenék a böngészőnek. A felhasználók élvezhetik a modern interakciókat, a robotok pedig teljes, olvasható tartalmat kapnak.

Static Site Generation (SSG): Az oldalt már a build során legenerálod – a HTML már azelőtt létezik, hogy bárki meglátogatná. Ez tökéletes választás ritkán változó tartalomhoz, és villámgyors betöltést biztosít.

Progressive Enhancement: Első lépésként úgy építed fel az oldalt, hogy JavaScript nélkül is működjön, majd erre teszed rá az interaktív funkciókat. A tartalom így mindig elérhető, bármilyen módon is töltődik be az oldal.

Hol a középút?

A JavaScript-keretrendszerek nem véletlenül léteznek. Gyorsítják a fejlesztést, gazdag interakciókat tesznek lehetővé, és sok esetben valóban jobb felhasználói élményt nyújtanak. A cél nem ezek eldobása, hanem megérteni, milyen következményekkel jár a használatuk.

A NameOcean-nál nap mint nap találkozunk ezzel. Domain regisztrátorok, tárhelyszolgáltatók, SaaS platformok mind azon küzdenek, hogyan egyensúlyozzanak a modern fejlesztési gyakorlatok és a tartalom elérhetősége, kereshetősége között. A megoldás nem egységes, de mindig azzal kezdődik, hogy tisztában vagy: hol lakik a tartalmad valójában.

A weboldalad felszínen remekül fest – de vajon a tartalmad rejtve van a szemed elől?