Seo

Reaktív JavaScript keresőoptimalizálása React vagy Vue használatával NodeJS-sel és más háttérveremekkel

Élő beszélgetésünk során arról, hogyan Hatékony SEO-barát jelölés HTML5, CSS3 és Javascript segítségével az év elején sok időt töltöttünk a React-ről való beszélgetéssel. Meg fogom ásni a React árnyalatait, mit kell szem előtt tartania a SEO-val kapcsolatban. Az elemzéshez Russ Jeffrey, a Duda stratégiai integrációs igazgatója által készített kódot fogjuk használni, aki részt vett a vitában.

Reagálni, vagy nem reagálni?

A react keretrendszer olyan érzést kelthet a webhelyek (alkalmazások) oldalain, mintha varázslatok bujkálnának alattuk, mivel az irányítópult részletei összhangban vannak egy élénk felhasználók közösségével, hasonlóan a Facebooktól és a Twittertől elvárható élményhez.

Az üzleti követelményeknek azonban meg kell határozniuk, hogy végül milyen technológiát használ egy projekthez. Ha olyan alkalmazást ír, amelynek Facebook-típusú dinamikára van szüksége, akkor be kell fektetnie egy reaktív keretrendszer létrehozásába a megvalósításához. A valóságban azonban nagyon kevés webhely rendelkezik ilyen követelményekkel. A legtöbb esetben jobb a jQuery vagy a vanília JavaScript használata, ha megúszod, alapvető teljesítményi okokból.

Ha egy reaktív elemet használ néhány oldalon, akkor van mód arra, hogy a reaktív kódot oda korlátozza, ahol és amikor szükség van rá. A betöltéshez írjon szerveroldali (vagy akár kliensoldali) feltételes kódot. Ha csak a hatalomra vágysz előugró módok, interaktív menükés füles tartalom stb., akkor a reaktív könyvtárak költség-haszon mérlegelése nem fogja előnyben részesíteni őket más megközelítésekkel szemben.

Renderelési stratégiák SEO-hoz

Mindenképpen másképp kell gondolkodnia arról, hogyan és mikor jelenít meg webalkalmazása a SEO számára fontos tartalmat. Ez az a tanulság, amit Russ hozott nekünk a beszélgetésünk második felében. Példákat mutat be arra, hogyan építsünk szerveroldalt, és hogyan szállítsunk optimalizált alkalmazáshéjat a JavaScript mellett, hogy a bejárók megkaphassák a SEO-hoz szükséges dolgokat, a maradékot pedig kliensoldalon jelenítsék meg „hidratálás” segítségével.

Nézze meg a teljes vitát itt.

keretek

Az alkalmazásprogramozás ebben az összefüggésben általában többet foglal magában, mint a frontend könyvtárat. A segédprogram-szkriptekkel rendelkező konfigurációs fájlok elrendezésére vonatkozó konvenció alkothatja a React vagy a Vue keretrendszerét. A Next és a Nuxt NodeJS-alapú React és Vue keretrendszer.

A keretrendszerek leegyszerűsítik a projektfájlok és szolgáltatások állványozását a hagyományos előírásoknak és a legjobb gyakorlatoknak megfelelően. Russ hivatkozásokat adott nekünk GitHub projektekhez, amelyek bemutatják, hogyan lehet integrálni a Reactet és a Vue-t számos más népszerű háttérprogramozási nyelvvel. Nézze meg őket, ha a NodeJS-től eltérő futásidejű folyamatot szeretne a háttérben.

  • Python React / Python Vue
  • PHP React / PHP Vue
  • Ruby React / Ruby Vue
  • Java React / Java Vue

SEO kódrészletek NodeJS-sel

Amikor eléri a vállalati vagy induló szintű követelményeket, előfordulhat, hogy a keretrendszerrel rendelkező szolgáltatási szint megállapodás nem lehetséges. Russ végigvezet minket a NodeJS-en (Expresszzel) alapuló SEO kódrészletek használatán.

Mindkét minta React és Vue projektben három kulcsfájl tartalmazza az elemzésünkhöz szükséges kódot:

  • A app.js fájl szabályozza a „blog” alkalmazáshéjat.
  • A server.js fájl lekéri az Express könyvtárat, beállítja a kérések kezeléséhez, beleértve az SSR renderelési metódusait is.
  • Az index.js fájl a NodeJS futásidejű folyamat belépési pontjaként szolgál.

SEO-barát React

A App.js a React példája bemutatja a SEO-barát útvonalak irányítását olyan URL-ekhez, amelyek nem támaszkodnak töredékekre SPA-stílusú virtuális oldal nézetek. Ban ben server.js a „kontextus” adatobjektum erőforrás-részleteket foglal magában a híváshoz ReactDOMServer.renderToString() hogy az alkalmazáshéjunkat URL-címen és esetlegesen más feltételeken alapuló kontextussal jelenítse meg.

A server.js fájl tartalmazza az adatkörnyezet objektumot a további finomítások érdekében. Russ bemutatja a cím és más metaadatok lecserélését, hogy befejezze a SEO-t egy megépített alkalmazáshéjhoz, mielőtt végül elküldi a böngészőbe.

Végül, index.js a NodeJS folyamat kiindulópontjaként szolgál, és ReactDOM.hydrate() arra szolgál, hogy az alkalmazásunkat kevésbé fontos segédtartalommal egészítse ki a shell betöltése után.

A „build” könyvtár tartalmazza index.html célfájlként az SSR-sablonok készítéséhez. Két másik fájl, az összetevők FŐOLDAL és a Hozzászólásoksegítségével tárolják a . Js kiterjesztése, amely az egyezményből következik, és ezért nem kell kifejezetten feltüntetni az import nyilatkozatokban. Célszerűen kihagyjuk a komponensfájlok elemzését, kivéve, ha azt mondjuk, hogy jellemző, hogy a komponensfájlokat egy összetevős alkönyvtárát.

Russ példáiban minden fájl, beleértve az összetevő fájlokat is, a projekt alapkönyvtárában található. Így néz ki a React fájlok könyvtárfája:
├── App.js
├── Home.js
├── Posts.js
├── építeni
│ └── index.html
├── index.js
└── server.js

Ha nem ismeri a JSX szintaxist, ez egy JavaScript nyelvi kiterjesztés, amely a React komponensek XML-kódolására szolgál, így a sablonfájlok JavaScriptet is tartalmazhatnak. Az alárendelt összetevőket a rendszer importálja, és később névkonvenció szerint hivatkozik rájuk (Home.js és Posts.js hozzárendelése és a rendre) az XML sablon blokkban.

Russ kihasználja reagál-router-dom könyvtárak (amelyeket esetleg NPM-en keresztül kell telepíteni): Router és StaticRouter, Switch és NavLink. Ezek a könyvtárak kész segítőket kínálnak a gyakori feladatok kényelméért, például a NavLink „to” segédprogram használatával HTML-hivatkozások generálására egy url elérési útra vagy erőforrásra, ami némileg analóg a Rail „link_to” segédjével.

Switchen és routeren keresztül App.js Russ bemutatja az url elérési útjainak megfelelő szintaxisát. Figyelje meg az „exact” kulcsszót az indexelérési út utasításhoz. Csak pontosan a '/'-nek kell egyeznie, különben az alkalmazás minden elérési útjára egyezne! A „pontos” kulcsszó használata megváltoztatja az alapértelmezett feltételeket mohó egyezésről, amely megegyezik a „/posts” és a „/posts/hello-world” kifejezéssel stb.

In server.js Russ az Express nevű közös külső keretrendszert használja, hogy beállítsa az alkalmazásunkat a szükséges portfigyelővel és válaszmódszerekkel, amelyek az alkalmazásunk hálózaton való kiszolgálásához szükségesek. Ha helyileg dolgozik, akkor létre kell hoznia egy PORT helyi környezeti változót, amely megfelel egy nyitott portnak, amellyel a localhost kéréseken keresztül kíván dolgozni. A gyártás során ezt általában a 80-as portra kell beállítani.

Vue keretrendszer

Végül a Vue keretrendszer az egyik leginkább megközelíthető reaktív keretrendszer, és ez a koncepció a kezdetektől fogva érezhető. A sablonfájlok szó szerint HTML-ek, kormányszerű JavaScript-interpolációval. Ha Vue-t használ, akkor valószínűbb, hogy a saját háttérrendszerével dolgozik, bár a Nuxt a Vue legkorszerűbb keretrendszere, ha úgy dönt, hogy ezt az utat választja.

Russ rámutat a Vue SSR dokumentációjára, és kódrészletei lényegében ugyanazt a fájlstruktúrát és elrendezést használják a blogalkalmazásunk Vue verziójának megvalósításához. Keresse meg a React és a Vue kódját az alábbiakban a következő Lényegben.

Kapcsolódó cikkek

0 Hozzászólások
Inline visszajelzések
Az összes hozzászólás megtekintése
Vissza a lap tetejére gombra