Angular Universal vs. Prerender.io

Pokud jste vývojář Angular, víte, že SEO je chlupatá situace. A pokud jste jako my, pravděpodobně jste Google prohledali cestu ke dvěma hlavním řešením. V tomto článku chceme toto rozdělit na to, jak složitý je každý proces a jak efektivní je. Všimněte si, že to vše vychází z našich zkušeností. Pokud si myslíte něco jiného, ​​neváhejte nás kontaktovat!

1. Úhlová univerzální

Dokumentace: https://angular.io/guide/universal
Složitost: 7/10
Účinnost: 6/10

V našem případě použití jsme nepoužili univerzální startér Angular. Naše webové stránky jsme již vytvořili bez jednoho (projekt Angular 7). A ačkoli tento proces není příliš dlouhý na to, aby se integroval do vašeho stávajícího projektu Angular, určitě potřebuje čas, než pochopíme, co se děje. Chcete-li vysvětlit, vysvětlíme, Angular Universal vytvoří dvě verze vaší aplikace. Jedna, která je „serverovou“ aplikací, která předem vykreslí vaše stránky do statického html. K tomu dochází nejprve a je to, co SEO roboti vytáhnou. Druhou verzí je aplikace „prohlížeč“. Toto je vaše pravidelná dynamická a plně funkční úhlová aplikace. Po dokončení načtení aplikace Universal odkládá aplikaci vykreslenou na straně serveru pomocí aplikace prohlížeče. Můžete tedy vidět mírné chvění, zejména při nižších rychlostech.

Protože se jedná o článek o tom, proč používat jeden nad druhým, nebudeme psát příliš mnoho kódu. Přečtěte si výše uvedený odkaz na dokumenty.

Chceme však komentovat problémy, kterým jsme čelili, a věci, které jsme museli udělat, abychom je obešli:
1. Do skriptu.json přidejte skripty, které vám dokument navrhuje. Vložením do cíle serveru angular.json dojde k chybě.
2. Při importu souboru server.ts jej při importu AppServerModuleNgFactory získejte ze souboru ‘./dist/server/main’, nikoli ze souboru ‘./dist/server/main.bundle’
3. Pokud pro svůj projekt používáte SCSS, nezapomeňte přidat tento úryvek pod cíl serveru angular.json. Jinak by to při vytváření cíle serveru vyvolávalo chyby.

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

4. Nezapomeňte také dvakrát zkontrolovat výstupní cesty, zda neobsahují normální cíl sestavení a cíl serveru. Výstupní cesta sestavení by měla být jako dist / project-name / browser a výstupní cesta serveru by měla být jako dist / project-name / server

Po dokončení jsme mohli vidět celý kód naší stránky ze zdroje „Zobrazit stránku“ na chromu. Pro náš projekt jsme také integrovali dynamické metaznačky (pomocí meta služby) a můžeme je vidět, když se podíváme na naši stránku. Teď jsou zde tedy klady a zápory po nasazení našeho webu a indexování našich stránek na Googlu:

Klady
- Všechny naše stránky byly prohledávatelné na Googlu
- Google roboti byli úspěšní při stahování textu z našich stránek

Nevýhody
- Text natažený pomocí robotů Google byl náhodný text z našich stránek (jako jsou názvy odkazů, materiál na zápatí, popisy alt na obrázcích, text těla atd.)
- Pokud se pokoušíte obsluhovat vlastní expresní trasy, narazíte na potíže. Je pravděpodobné, že se vám lépe roztočí další instance serveru pro vaše vlastní trasy.

2. Prerender.io

Dokumentace: https://prerender.io/documentation
Složitost: 2/10
Účinnost: 7/10

Než jsme vyzkoušeli Angular Universal, vyzkoušeli jsme Prerender.io. To je určitě cesta s nejmenším množstvím potíží. Chcete-li to implementovat způsobem, který pracuje s roboty Google a Bing, vyžadovalo pouze několik řádků kódu a registraci na jejich webu jako token. A v tomto příkladu používáme server Express Node:

var prerender = vyžadovat („uzel prerender“). („prerenderToken“, „YOUR_TOKEN“);
prerender.crawlerUserAgents.push („googlebot“);
prerender.crawlerUserAgents.push („bingbot“);
prerender.crawlerUserAgents.push („yandex“);
app.use (předkladatel);

Pokud používáte Express / Node, ujistěte se, že máte řádek app.use (prerender) nad vaším expresním prostředím middleware, který může sloužit vašemu dist adresáři.

S prerender.io, to bude v podstatě dělat totéž s univerzálním. Při procházení vaším webem uloží do mezipaměti statický html vašich stránek a zobrazí je až robotům Google.

Takže to bylo super snadné a funguje dobře s SPA, ale bylo to efektivní?

Klady
- Velmi rychlé nastavení
- Bezplatná verze může ukládat do mezipaměti až 250 stránek
- Výsledky vyhledávání Google pro naše stránky jsou všechny podle popisu, který jsme nastavili ve službě meta

Nevýhody
- Až 250 bezplatných zvuků stránek lze ukládat do mezipaměti na více verzích vaší adresy URL (například pomocí našich stránek) https://www.brewcrewlabs.com a https://brewcrewlabs.com. Další úroveň je 20 000 stránek za 15 $ / měsíc.

3. Verdikt

Verdikt je, že Angular universal ještě není připraven. Přestože mohou existovat věci, na které bychom se mohli podívat, abychom vylepšili náš SEO, je Prerender.io mnohem jednodušší a efektivnější. Pokud nepřemýšlíte o vytváření velkého množství stránek každý týden, může být pro vás řešení Prerender.io. Přestože Angular universal pracuje nějakým způsobem, vyžaduje mnohem více práce nohou, aby se práce na stejné úrovni jako Prerender.io. Možná prostě neznáme tajnou omáčku pro Angular Universal - pokud ano, dejte nám prosím vědět o své zkušenosti!

Doufám, že tento článek pomohl někomu v podobné situaci!