SEO a reaktív JavaScripthez React vagy Vue és NodeJS használatával
Az alábbiakban a React JavaScript könyvtárról lesz szó, és arról, hogy mikre kell odafigyelni vele a SEO érdekében.
Miért érdemes használni a Reactot?
Egy react keretrendszer használatával olyan felhasználói élményeket kínálhatsz webhelyeden (vagy alkalmazásodban), ami a Facebookéhoz, vagy éppen a Twitteréhez hasonlítható.
Persze, mindig az üzleti igények szabják meg, hogy az ember milyen technológiát használ egy projekt végrehajtásához. Ha egy olyan alkalmazást fejlesztesz, aminek a Facebookéhoz hasonló dinamikára van szüksége, akkor egy olyan kreatív keretrendszerre lesz szükséged hozzá, ami képes is megadni ezt. Persze a valóságban nagyon kevés webhely készül el ilyen igényekkel. Sok esetben érdemesebb inkább jQuerry-t, vagy klasszikus JavaScriptet használni, ha teheted, már csak az alapvető teljesítményi szempontok miatt is.
Ha egy reaktív elemet több oldalon is használsz, akkor többféleképpen is megoldható, hogy reaktív kódod csak ott és akkor legyen jelen, ahol és amikor szükség van rá. Írj egy szerveroldalú (vagy akár kliensoldalú) feltételes kódot, ami betölti azt. Ha azonban csak modális felugró ablakokat szeretnél készíteni, vagy épp interaktív menüket, fülekre osztott tartalmakat, stb., akkor a reaktív könyvtárak használata nem lesz indokolt az ár/érték arányuk miatt.
Megjelenítési stratégiák a SEO-hoz
Mindenképpen másképpen kell gondolkodnod arról, hogy webes alkalmazásod hogyan és mikor jeleníti meg a legfontosabb tartalmaidat a seo céljából. Erről az alábbi videó második felében esik szó, ahol Russ Jeffrey példákat mutat be arról, hogy hogyan lehet felépíteni a szerveroldali dolgokat, és hogy hogyan kézbesítsünk egy optimalizált alkalmazáshéjat a JavaScript mellett, hogy a feltérképező robotok hozzáférhessenek ahhoz, amire a seo-hoz szükség van. A maradék a kliensoldalon kerülnek megjelenítésre a „hydration” technikával.
Keretrendszerek
Az alkalmazásprogramozás ebben a kontextusban általában többről szól, mint a frontend könyvtárról. Egy „convention over configuration” fájlelrendezési design utility szkriptekkel már keretrendszernek tekinthető a React vagy a Vue számára. A Next például egy React, a Nuxt pedig egy Vue NodeJS alapú keretrendszer.
A keretrendszerek egyszerűsítik a projektfájlok és szolgáltatások elrendezését. Az alábbi GitHub projektek jó példák arra, hogy hogyan intergrálható a React és a Vue más népszerű backend programnyelvvel:
• Python React / Python Vue
• PHP React / PHP Vue
• Ruby React / Ruby Vue
• Java React / Java Vue
SEO kódrészletek a NodeJS-szel
Amikor nagyvállalati vagy éppen újonnan indult cégek elvárásairól van szó, egy szolgáltatás szintű összeegyeztetés a keretrendszerrel nem feltétlenül lehetséges.
A három legfontosabb fájl a React és a Vue projektekben a következő:
• app.js – ez a „blog” alkalmazáshéjat (shell) vezényli
• server.js – ez az Express könyvtárat hívja meg, majd konfigurálja a kérések kezelésére, beleértve az SSR megjelenítő (render) módszereit
• index.js – belépési pontként szolgál a NodeJS runtime folyamata számára
SEO-barát React
A fenti videóban az app.js React példa SEO barát útvonalak átirányítását mutatja be olyan URL-ekre, amelyek nem támaszkodnak a SPA-stílusú virtuális oldalmegtekintésekre. A server.js-ben a „context” adatobjektumok erőforrásrészleteket implikálnak a ReactDOMServer.renderToString() meghívására, hogy megjelenítsék az alkalmazáshéjat az URL-en alapuló kontextussal, illetve más lehetséges kritériumokkal.
A server.js fájlban megtalálható az adatkontextus objektum a további finomításokra. Russ bemutatja a title címke és más metaadatok lecserélését, befejezve ezzel a SEO-t egy felépített alkalmazáshéj érdekében, mielőtt elküldenénk azt a böngészőnek.
Végezetül, az index.js egy kiindulási pontként szolgál a NodeJS folyamat számára, a ReacDOM.hydrate() feladata pedig az alkalmazás kiegészítése kevésbé fontos tartalmakkal, miután a héj betöltődik.
A „build” könyvtárban található az index.html, mint célfájl az SSR sablonkészítéshez. Két másik fájl, a Home és a Posts összetevői a .js kiterjesztéssel kerülnek tárolásra, tehát a megszokott módon, ezért nincs szükség teljesen végigírni őket az importáláshoz. A komponensfájlok elemzését most kihagyjuk, de azt megemlítjük, hogy a komponensfájlok általában a „components” alkönyvtárban találhatók meg.
Russ példáuban minden fájl, beleértve a komponensfájlokat is, a projekt főkönyvtárában található. A React fájlok a könyvtára következőképpen épül fel:
├── App.js
├──Home.js
├──Posts.js
├──build
│ └──index.html
├── index.js
└── server.js
Ha nem ismered a JSX szintaxist, ez a JavaScript programnyelv egy olyan kiterjesztése, ami a React összetevőket hivatott XML-be kódolni, hogy a sablonfájlok is tartalmazhassanak JavaScriptet. A gyermekkomponensek később kerülnek importálásra és később hivatkozunk rájuk az elnevezési konvenciók szerint (a Home.js és Posts.js
Russ a react-router-dom könyvtárakat is használja (amelyeket meglehet, hogy az NPM-mel kell telepítened): ezek a Router, a StaticRouter, a Switch és a NavLink. Ezek a könyvtárak helpereket kínálnak a leggyakoribb feladatok elvégzéséhez (pl. a NavLink ’to’ helper használata a HTML hivatkozások elkészítéséhez egy URL útvonalhoz vagy erőforráshoz, ami valamelyest hasonlít a Rail ’link_to’ helperéhez.
Az app.js-ben található Switch és Router segítségével Russ bemutatja azt is, hogy milyen szintaxissal lehet párosítani egymással az URL útvonalakat. Fontos az ’exact’ szó az index útvonal állításához. Erre szükség van, hogy csak a kifejezetten a „/”-t párosítsa, különben az alkalmazás minden útvonalát párosítaná. Az ’exact’ kulcsszó megváltoztatja az alapértelmezett kritériumot, amely a ’/posts’ URL-eket a ’/posts/pelda/’ stb. URL-ekkel is összepárosítja.
A server.js-ben Russ egy gyakori külső keretrendszert, az Expresst használja, hogy beállítson egy portfigyelőt és válaszmódszert az alkalmazáshoz, amelyek ahhoz kellenek, hogy az alkalmazás szolgáltatható legyen a hálózaton keresztül. Ha helyileg dolgozol, akkor egy helyi környezeti változó PORT-ot kell alkalmaznod, egy nyitott port hozzárendeléséhez, amelyen keresztül dolgozni szeretnél a localhost kéréseken keresztül. A termelésben ez általában a 80-as port lesz.
Vue keretrendszer
Végezetül, a Vue keretrendszer az egyik egyszerűbben használható reaktív keretrendszer, és ezt már a dolgok legelején tapasztalni lehet. A sablonfájlok szó szerint HTML-ek handlebar-stílusú JavaScript interpolációval. Ha Vue-t használsz, akkor valószínűleg saját backenddel dolgozol, habár a Nuxt egy nagyszerű keretrendszer a Vue-hoz, amit szintén alkalmazhatsz, ha ezt az útvonalat választod.
Russ felhívja a figyelmet a Vue SSR dokumentációra is.
