Angular a SEO – Vytvoření jednostránkových webových aplikací Angular 6 přívětivých pro vyhledávače
V následujícím tutoriálu se podíváme na nejjednodušší dostupný přístup, jak se zbavit tohoto omezení pro vaši aplikaci Angular 6 pomocí vykreslování na straně serveru s Angular Universal.
Pro začátek nejprve nastavíme novou aplikaci Angular v následujících krocích.
Pro nastavení nové aplikace Angular použijeme Angular CLI. Pro instalaci Angular CLI do systému použijte příkaz Node.js Package Manager následujícím způsobem na příkazovém řádku:
$ npm install -g @angular/cli
Po úspěšné instalaci Angular CLI je možné použít nový příkaz ng k nastavení nového projektu Angular od nuly:
$ ng new ngseo --routing
Příkazem new říkáme, že má být vytvořen nový projekt Angular, ngseo je název nového projektu a pomocí volby – routing zajišťujeme, aby byla do projektu přidána také základní konfigurace směrování.
Po úspěšném nastavení projektu se můžeme přepnout do nově vytvořené složky projektu:
$ cd ngseo
a spustit vývojový webový server pomocí Angular CLI opět následujícím způsobem:
$ ng serve -o
V prohlížeči byste nyní měli vidět následující výsledek:
Jak prohlížeče vidí jednostránkové webové aplikace
Teď, když máme spuštěnou aplikaci Angular, prozkoumejme, jak naše webové stránky vidí prohlížeče vyhledávačů. Dobrý dojem získáme, když pro přístup k našemu webu použijeme nástroj příkazového řádku curl:
$ curl localhost:4200
Výsledek, který se vám vrátí, by měl vypadat podobně jako následující:
Zde vidíte, že hlavní obsah webu není součástí tohoto dokumentu HTML. Místo toho najdete uvnitř části body zástupný element <app-root>. To je velmi Angular vkládá obsah webové stránky, když je spuštěn kód JavaScript strany. Prohlížeč však tento obsah nevidí, protože kód JavaScriptu není spuštěn.
Angular Universal For Server-Side Rendering
Jaké by tedy mohlo být řešení tohoto problému? Ano, je to vykreslování na straně serveru (SSR). Při vykreslování na straně serveru se kód JavaScriptu aplikace Angular spustí již na serveru a kompletní struktura HTML a obsah budou k dispozici i webovým crawlerům.
Technologie, která umožňuje vykreslování na straně serveru pro aplikace Angular, se nazývá Angular Universal. Angular Universal generuje statické stránky aplikace na serveru prostřednictvím procesu zvaného vykreslování na straně serveru.
Podrobný popis použití Angular Universal je k dispozici na adrese https://angular.io/guide/universal. Existuje však ještě jeden přístup, který přidání Angular Universal velmi zjednodušuje: použití balíčku @ng-toolkit/universal.
Přidání balíčku Angular Universal pomocí @ng-toolkit/universal, aby vaše aplikace Angular byla přívětivá k vyhledávacímu enginu
Balíček @ng-toolkit/universal se do projektu přidá opět pomocí příkazu ng následujícím způsobem:
$ ng add @ng-toolkit/universal
Po přidání balíčku otevřete soubor package.json a ujistěte se, že v sekci závislostí je uveden balíček webpack-cli s verzí alespoň 3.1:
"webpack-cli": "^3.1.0"
Pokud tomu tak není, změňte odpovídajícím způsobem tuto položku a proveďte následující příkaz:
$ npm install
Napříště místo příkazu ng serve -o spustíte:
$ npm run build:prod
a
$ npm run server
Server se spustí na adrese localhost:8080 a pokud na tuto adresu URL přistupujete v prohlížeči, měli byste opět vidět webové stránky výchozí aplikace angular.
Zkusíme se na webovou stránku opět dostat přes curl:
$ curl localhost:8080
Výstup by nyní měl vypadat tak, jak vidíte na následujícím obrázku:
Tentokrát je obsažen kompletní obsah stránky HTML. Důvodem je, že stránka HTML byla vykreslena v rámci procesu sestavení (na straně serveru) a je nyní k dispozici bez nutnosti spouštět kód JavaScript na straně klienta. Prohlížeč vyhledávače je tak schopen najít obsah strany a může se ujistit, že je správně přidán do výsledků vyhledávání.
Závěr
Ve výchozím nastavení používá Angular vykreslování na straně klienta, což je problém v případě, že má být váš web uveden ve výsledcích vyhledávání. Řešením je vykreslování aplikace na straně serveru a generování finálních prvků HTML, které vyhledávače snadno interpretují.
Vykreslování na straně serveru pro aplikace Angular lze dosáhnout pomocí aplikace Angular Universal. Přidání Angular Universal do stávající aplikace Angular je velmi snadné pomocí balíčku @ng-toolkit/universal.
Tento příspěvek byl poprvé publikován na CodingTheSmartWay.com.
#1 Angular 6 – The Complete Guide
Master Angular (Angular 2+, vč. Angular 6) a vytvářejte úžasné, reaktivní webové aplikace s nástupcem Angular.js
Přejít na kurz …
Odmítnutí odpovědnosti: Tento příspěvek obsahuje partnerské odkazy, což znamená, že pokud kliknete na některý z odkazů na produkty, obdržím malou provizi. To pomáhá podporovat tento blog!