Kampinis universalus prieš „Prerender.io“

Jei esate „Kampinis“ kūrėjas, žinote, kad SEO yra plaukuota padėtis. O jei esate panašūs į mus, tikriausiai „Google“ ieškojo dviejų pagrindinių sprendimų. Šiame straipsnyje norime išskaidyti, koks sudėtingas yra kiekvienas procesas ir koks jis efektyvus. Atminkite, kad visa tai pagrįsta mūsų patirtimi. Jei manote kitaip, susisiekite su mumis!

1. Kampinis universalus

Dokumentacija: https://angular.io/guide/universal
Sudėtingumas: 7/10
Veiksmingumas: 6/10

Mūsų naudojimo atveju mes nenaudojome kampinio universalaus starterio. Mes jau buvome sukūrę savo svetainę be vienos („Angular 7“ projektas). Ir nors procesas nėra labai ilgas, kad integruotumėtės į jūsų esamą kampinį projektą, neabejotinai reikia laiko suprasti, kas vyksta. Norėdami pritemdyti paaiškinimą, „Angular Universal“ sukuria dvi jūsų programos versijas. Tai yra „serverio“ programa, kuri iš anksto perteikia jūsų puslapius į statinį HTML. Tai įvyksta pirmiausia ir yra tai, iš ko SEO robotai išsitrauks. Kita versija yra „naršyklės“ programa. Tai yra įprastas dinamiškas ir visiškai funkcinis kampinis pritaikymas. „Universal“ apsikeis jūsų serverio teikiama programa naudodamasi jūsų naršyklės programa, kai tik ji bus įkelta. Taigi galite pamatyti nedidelį virpėjimą, ypač lėtesniu greičiu.

Kadangi tai daugiausia straipsnis apie tai, kodėl verta naudoti vieną kitą variantą, per daug kodo neišrašysime. Peržiūrėkite aukščiau pateiktą dokumentų nuorodą.

Vis dėlto norime komentuoti problemas, su kuriomis susidūrėme, ir dalykus, kuriuos turėjome padaryti, kad juos išspręstume:
1. Į savo paketą.json pridėkite scenarijus, kuriuos jums siūlo doc. Įdedant jį į serverį „angular.json“, bus padaryta klaida.
2. „Server.ts“ failui, kai importuojate „AppServerModuleNgFactory“, gaukite jį iš failo „./dist/server/main“, o ne iš „./dist/server/main.bundle“.
3. Jei savo projektui naudojate SCSS, būtinai pridėkite šį fragmentą prie tikslo „angular.json“. Priešingu atveju, kuriant serverio tikslą, bus klaidų.

"stylePreprocessorOptions": {“includePaths”: [“src / scss”]}

4. Taip pat būtinai dar kartą patikrinkite savo įprastos versijos ir serverio tikslo išvesties kelius. Versijos išvesties kelias turėtų būti toks, kaip dist / projekto pavadinimas / naršyklė, o serverio išvesties kelias turėtų būti toks, kaip dist / projekto pavadinimas / serveris

Baigę galėjome pamatyti visą savo puslapio kodą iš „Chrome“ „Žiūrėti puslapio šaltinį“. Savo projekte mes taip pat integravome dinamines meta žymas (naudodamiesi meta paslauga) ir galime jas pamatyti apžiūrėdami mūsų puslapį. Taigi čia yra privalumai ir trūkumai po to, kai įdėjome savo svetainę ir indeksavome savo puslapius „Google“:

Argumentai už
- Visuose mūsų puslapiuose buvo galima ieškoti „Google“
- „Google“ robotams pavyko ištraukti tekstą iš mūsų puslapių

Minusai
- Tekstas, ištrauktas naudojant „Google“ robotus, buvo atsitiktinis tekstas iš mūsų puslapių (pvz., Nuorodų pavadinimai, poraštės elementai, vaizdų aprašymai, kūno tekstas ir kt.)
- Jei bandote aptarnauti įprastus greitųjų maršrutų maršrutus, susidursite su problemomis. Šansai yra tai, kad jūs geriau surandate kitą serverio egzempliorių savo pasirinktiniams maršrutams.

2. „Prerender.io“

Dokumentacija: https://prerender.io/documentation
Sudėtingumas: 2/10
Veiksmingumas: 7/10

Prieš išbandydami „Angular Universal“, mes išbandėme „Prerender.io“. Tai neabejotinai mažiausias vargo maršrutas. Norint tai įgyvendinti taip, kad jis veiktų su „Google“ ir „Bing“ robotais, reikėjo tik kelių kodo eilučių ir registracijos jų svetainėje prieigos rakto. Šiame pavyzdyje mes naudojame „Express Node“ serverį:

var prerender = reikalauti ('prerender-node'). set ('prerenderToken', 'YOUR_TOKEN');
prerender.crawlerUserAgents.push ('googlebot');
prerender.crawlerUserAgents.push ('bingbot');
prerender.crawlerUserAgents.push ('yandex');
app.use (prerender);

Jei naudojate „Express“ / „Node“, įsitikinkite, kad virš „express.static“ tarpinės programinės įrangos, esančios „dist“ aplanke, yra „app.use“ (prerender) eilutė.

Su prerender.io iš esmės padarys tą patį dalyką su universaliu. Jis talpins statinį jūsų puslapių html ir pateiks juos „Google“ robotams, kai jie nuskaitys jūsų svetainę.

Taigi labai lengva ir gerai veikia SPA, tačiau ar tai buvo efektyvu?

Argumentai už
- Labai greitai sukurta
- Nemokama versija gali talpinti iki 250 puslapių
- Visi mūsų puslapių „Google“ paieškos rezultatai atitinka aprašą, kurį nustatėme meta tarnyboje

Minusai
- Skamba net 250 nemokamų puslapių, talpyklos kaupimą galima atlikti keliose jūsų URL versijose (kaip pavyzdį naudojant mūsų svetainę) https://www.brewcrewlabs.com ir https://brewcrewlabs.com. Kita pakopa yra 20 000 puslapių už 15 USD / mėn.

3. Verdiktas

Verdiktas yra tas, kad kampinis universalus tiesiog dar nėra paruoštas. Nors gali būti dalykų, į kuriuos galėtume atkreipti dėmesį, kad patobulintume savo SEO, „Prerender.io“ yra tiesiog paprastesnis ir efektyvesnis. Jei negalvojate apie daugybės puslapių kūrimą kiekvieną savaitę, sprendimas „Prerender.io“ gali būti jums. Nors universalus kampinis universalumas veikia tam tikrais būdais, norint, kad jis dirbtų tame pačiame lygyje kaip „Prerender.io“, reikia daugiau kojų darbo. Galbūt mes tiesiog nežinome „Angular Universal“ slapto padažo - jei tai padarysite, praneškite mums apie savo patirtį!

Tikiuosi, kad šis straipsnis padėjo visiems kitiems, atsidūrusiems panašioje situacijoje!