Angular Universal vs. Prerender.io

Si ets un desenvolupador angular, saps que el SEO és una situació peluda. I si sou com nosaltres, probablement Google hagi cercat dues solucions principals. En aquest article, volem desglossar-ne la complexitat que té cada procés i l'efectivitat d'aquest procés. Tingueu en compte que tot es basa en les nostres experiències. Si creieu el contrari, no dubteu en contactar amb nosaltres.

1. Universal Angular

Documentació: https://angular.io/guide/universal
Complexitat: 7/10
Eficàcia: 6/10

En el nostre cas d'ús, no hem utilitzat cap arrencador universal angular. Ja havíem construït el nostre lloc web sense un (projecte Angular 7). Tot i que el procés no és gaire llarg per integrar-se en el vostre projecte angular existent, sens dubte es necessita temps per comprendre què passa. Per obtenir una explicació, Angular Universal crea dues versions de l'aplicació. Una que és l'aplicació "servidor" que converteix les pàgines en html estàtic. Això es produeix primer i és del que obtindran els robots de SEO. L'altra versió és l'aplicació "navegador". Aquesta és la vostra aplicació angular dinàmica i totalment funcional regularment. Universal canvia l'aplicació renderitzada del costat del servidor amb l'aplicació del navegador un cop finalitzada la càrrega. D’aquesta manera és possible que observeu un lleu xoc, sobretot a velocitats més lentes.

Com que es tracta d’un article sobre tot per què utilitzar-ne l’un sobre l’altre, no escriurem massa codi. Reviseu l’enllaç de documents que es proporciona anteriorment.

Tot i això, volem fer comentaris sobre els problemes que teníem i les coses que havíem de fer per treballar al seu voltant:
1. Afegiu els scripts que el document us suggereix al vostre package.json. Si poseu-lo a la destinació del servidor angular.json es produirà un error.
2. Al fitxer server.ts, quan importeu AppServerModuleNgFactory, obteniu-lo del fitxer "./dist/server/main" no del fitxer "./dist/server/main.bundle"
3. Si utilitzeu SCSS per al vostre projecte, assegureu-vos d'afegir aquest fragment a la destinació del servidor angular.json. En cas contrari, es produirien errors en crear la destinació del servidor.

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

4. També assegureu-vos de comprovar dos cops de la vostra ruta de sortida si el vostre objectiu de creació regular i l'objectiu del servidor. La ruta de sortida de creació hauria de ser com dist / project-name / browser i la ruta de sortida del servidor ha de ser com dist / project-name / server

Després d’acabar, podríem veure tot el codi de la nostra pàgina a la secció “Veure font de la pàgina” a Chrome. També vam integrar metaetiquetes dinàmiques (utilitzant el servei meta) per al nostre projecte i les podrem veure quan inspeccionem la nostra pàgina. Ara, aquí teniu els avantatges i els contres després de desplegar el nostre lloc i indexar les nostres pàgines a Google:

Pros
- Totes les nostres pàgines es podien cercar a Google
- Els robots de Google han aconseguit treure text de les nostres pàgines

Contres
- El text que es va treure amb els robots de Google va ser un text aleatori de les nostres pàgines (com ara els noms d’enllaços, coses al peu de pàgina, descripcions altes d’imatges, text del cos, etc.)
- Si esteu intentant servir rutes expresses personalitzades, tindreu problemes. El més probable és que utilitzeu una altra instància del servidor per a les vostres rutes personalitzades.

2. Prerender.io

Documentació: https://prerender.io/documentation
Complexitat: 2/10
Eficàcia: 7/10

Abans de provar Angular Universal, vam provar Prerender.io. Definitivament, aquesta és la ruta amb el mínim de molèsties. Per implementar-ho de manera que funciona amb els robots de Google i Bing, només calia diverses línies de codi i el registre al seu lloc per a un testimoni. I en aquest exemple, utilitzem un servidor Express Node:

var prerender = require ("prerender-node"). set ("prerenderToken", "YOUR_TOKEN");
prerender.crawlerUserAgents.push ("googlebot");
prerender.crawlerUserAgents.push ("bingbot");
prerender.crawlerUserAgents.push ("yandex");
app.use (pre-entrega);

Si utilitzeu Express / Node, assegureu-vos que teniu la línia app.use (prerender) per sobre del vostre middleware express.static que pot servir al vostre directori dist.

Amb prerender.io, essencialment farà el mateix amb universal. Es caujarà un html estàtic de les vostres pàgines i us servirà als robots de Google quan s’arrosseguen pel vostre lloc.

Així que és molt fàcil i funciona bé amb els SPA, però era efectiu?

Pros
- Configuració molt ràpida
- La versió gratuïta pot contenir fins a 250 pàgines
- Els resultats de la cerca a Google de les nostres pàgines són tots segons la descripció que establim al meta servei

Contres
- Quant a 250 pàgines gratuïtes, es pot realitzar una memòria cau en diverses versions de la vostra URL (utilitzant com a exemple el nostre lloc web) https://www.brewcrewlabs.com i https://brewcrewlabs.com. El següent nivell és de 20.000 pàgines per 15 dòlars al mes.

3. El Veredicte

El veredicte és que Angular universal encara no està llest. Tot i que pot haver-hi coses que podríem mirar per aguditzar el nostre SEO, Prerender.io és més senzill i eficaç. Si no teniu pensat produir una abundància de pàgines cada setmana, Prerender.io pot ser la solució per a vosaltres. Tot i que Angular universal funciona d’algunes maneres, requereix un treball més per a les cames perquè funcioni al mateix nivell que Prerender.io. Potser simplement no sabem la salsa secreta de Angular Universal. Si ho fa, fes-nos-ho saber sobre la teva experiència.

Espero que aquest article ajudi a qualsevol altra persona en una situació similar!