Hyrndur Universal vs. Prerender.io

Ef þú ert Angular verktaki veistu að SEO er loðinn staður. Og ef þú ert eins og við, þá leitaðir þú sennilega Google þínar að tveimur aðallausnum. Í þessari grein viljum við skipta þessu niður í hversu flókið hvert ferli er og hversu árangursríkt það er. Athugaðu að þetta er allt byggt á reynslu okkar. Ef þú heldur annað, ekki hika við að hafa samband við okkur!

1. Hyrndur Universal

Skjöl: https://angular.io/guide/universal
Flækjustig: 7/10
Skilvirkni: 6/10

Í notkunarmálum okkar notuðum við ekki skáhyrndan alhliða startara. Við höfðum þegar smíðað vefsíðu okkar án einnar (Angular 7 verkefnisins). Og þrátt fyrir að ferlið sé ekki of langt að aðlagast verkefninu þínu í Angular, þá tekur það örugglega tíma að skilja hvað er að gerast. Til að fella niður skýringu býr Angular Universal tvær útgáfur af forritinu þínu. Einn sem er „netþjóninn“ forritið sem gerir síðurnar þínar fyrir í stöðluðum HTML. Þetta gerist fyrst og er það sem SEO vélmenni munu draga úr. Hin útgáfan er „vafra“ forritið. Þetta er venjulega kraftmikið og fullkomlega hagnýtur forritið þitt. Universal skiptir út netþjóna hliðar forritinu með vafraforritinu þegar það hefur verið hlaðið. Þannig gætirðu séð örlítinn skíthæll, sérstaklega á hægari hraða.

Þar sem þetta er grein aðallega um hvers vegna að nota annan yfir annan, munum við ekki skrifa of mikið af kóða. Vinsamlegast skoðaðu skjalatengilinn hér að ofan.

En við viljum gera athugasemdir við mál sem við stóð frammi fyrir og það sem við þurftum að gera til að vinna í kringum þau:
1. Bættu við forskriftunum sem skjalið leggur til fyrir þig í pakkanum þínum.json. Að setja það inn á miðlara miða á angular.json mun henda villu.
2. Þegar þú flytur inn AppServerModuleNgFactory fyrir server.ts skrána þína skaltu fá hana úr ‘./dist/server/main’ skránni ekki ‘./dist/server/main.bundle’
3. Ef þú ert að nota SCSS fyrir verkefnið þitt skaltu gæta þess að bæta við þessu bút undir miðanum angular.json netþjóninum. Annars myndi það henda villum þegar smiðjan miðar á.

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

4. Gakktu einnig úr skugga um að skoða tvöfalt framleiðsluslóðir þínar fyrir venjulegt smíði og miðlaramiðstöð. Byggja framleiðsluslóð ætti að vera eins og dist / verkefnanafn / vafri og framleiðsla stígsins á netþjóninum ætti að vera eins og dist / project-name / server

Eftir að við lukum gátum við séð allan kóða síðunnar okkar frá „Skoða síðuheimild“ á króm. Við sömdum einnig kraftmikla metategunda (notum metaþjónustuna) fyrir verkefnið okkar og við getum séð þau þegar við skoðum síðuna okkar. Svo hérna eru kostir og gallar eftir að við sendum síðuna okkar og settu síðurnar okkar á Google:

Kostir
- Allar síður okkar voru að leita á Google
- Google vélmenni tókst að draga texta af síðunum okkar

Gallar
- Textinn sem dreginn var með Google vélmenni var handahófi texti frá síðunum okkar (eins og nöfnin á krækjurnar, efni á fótinn, alt lýsingar á myndum, meginmálstexta osfrv.)
- Ef þú ert að reyna að þjóna sérsniðnum hraðleiðum muntu lenda í vandræðum. Stuðlar eru að þér er betra að snúa upp öðru netþjóni fyrir sérsniðnar leiðir.

2. Prerender.io

Skjöl: https://prerender.io/ skjalfesting
Flækjustig: 2/10
Skilvirkni: 7/10

Áður en við prófuðum Angular Universal reyndum við Prerender.io. Þetta er örugglega leiðin með MINNSTU þræta. Til að útfæra þetta á þann hátt sem virkar með Google og Bing vélmenni, þurfti það aðeins nokkrar línur af kóða og skráðu á síðuna sína fyrir tákn. Og í þessu dæmi erum við að nota Express Node netþjón:

var prerender = krefjast (‘prerender-node’). setja (‘prerenderToken’, ‘YOUR_TOKEN’);
prerender.crawlerUserAgents.push (‘googlebot’);
prerender.crawlerUserAgents.push (‘bingbot’);
prerender.crawlerUserAgents.push (‘yandex’);
app.use (forréttur);

Ef þú ert að nota Express / hnút, vertu viss um að hafa app.use (forkrána) línuna fyrir ofan express.statisk miðbúnaðinn þinn sem gæti þjónað dist möppunni þinni.

Með prerender.io mun það í raun gera það sama með alhliða. Það mun skjóta saman kyrrstöðu af HTML síðunum þínum og þjóna þeim allt að Google vélum þegar þeir skríða um vefinn þinn.

Svo það er frábær auðvelt og virkar vel með SPA, en var það árangursríkt?

Kostir
- Mjög fljótleg uppsetning
- Ókeypis útgáfan getur skyndiminni allt að 250 blaðsíður
- Leitarniðurstöður Google fyrir síðurnar okkar eru allar í samræmi við lýsinguna sem við settum í metaþjónustuna

Gallar
- Allt að 250 ókeypis blaðsíður hljóða, hægt er að fara í skyndiminni á mörgum útgáfum af slóðinni þinni (með því að nota síðuna okkar sem dæmi) https://www.brewcrewlabs.com og https://brewcrewlabs.com. Næsta stig er 20.000 blaðsíður fyrir $ 15 / mánuði.

3. Dómurinn

Dómurinn er sá að Angular universal sé bara ekki tilbúinn ennþá. Þó að það geti verið hluti sem við gætum skoðað til að skerpa SEO okkar, er Prerender.io bara einfaldara og árangursríkara. Ef þú ert ekki að hugsa um að framleiða gnægð blaðsíðna í hverri viku, gæti Prerender.io verið lausnin fyrir þig. Þó að Hyrndur alhliða virki á vissan hátt, þá þarf það meiri vinnu við fótleggi til að vinna á sama stigi og Prerender.io. Kannski þekkjum við ekki leyndar sósuna til Angular Universal - ef þú gerir það, vinsamlegast láttu okkur vita af upplifun þinni!

Vona að þessi grein hafi hjálpað öðrum í svipuðum aðstæðum!