Naučte se pět kroků pro to, abyste mohli krásně přehrát ANgular s boty internetových vyhledávačů a abyste mohli indexovat vaší webovou stránku.
 
Pokud používáte Angular jako pohon pro vaši stránku, tak poté před vámi leží pěkně široká divoká řeka, kterou musíte nějak přeskočit, pokud se budeme bavit o SEO. Naštěstí, Angular Universal dává SEO velkou pomoc při jejím překročení.
 
Avšak mějte na paměti, že „lehké“ je relativní pojem. Celý proces zahrnuje celkem hodně technického čarování.
 
Pravděpodobně budete muset zahrnout do vašeho plánování také tým vývojářů.
 
Ale jakmile bude výsledný produkt dokončen, vaše stránka bude servírovat optimalizované stránky, které internetové vyhledávače velice lehce najdou a indexují.
 
V této příručce vám vysvětlíme ANgular Universal a proč je tak důležitý pro marketéry.
 

SEO Problém

Angular je naprosto úžasný a fantastický rámec pro modulární, uživatelsky přátelské webové aplikace. Naneštěstí je tak trochu nepřátelský k SEO.
 
A to je hned ze dvou důvodů.
 
Zaprvé, Angular těžce spoléhá na skript pro obsah. Výsledkem je to, že někteří boti internetových vyhledávačů „nevidí“ obsah, který vidí uživatel.
 
Jen se podívejte na Angular Universal dokumentaci. Tato stránka je, překvapivě, vykreslena s Angular.
 
Jak sjíždíte dolů po stránce, uvidíte docela dost obsahu. A určitě si myslíte, že je to všechno „indexovatelné“.
 
Ne tak úplně. Klikněte pravým tlačítkem na stránku a zvolte „zobrazit zdroje stránky“ z menu kontextu, které se objeví.
 
Je tam pouze nějakých sto linii zdrojového kódu. Nikde tam neuvidíte obsah, který jste právě viděli úplně normálně na dané stránce.
 
To, ve zkratce, je problém s Angular. Lidští návštěvníci uvidí obsah, avšak boti internetových vyhledávačů pouze uvidí zdroj.
 
A ten zdroj žádný obsah nemá!
 
A je tu další SEO problém: rychlost. Aplikace ANgular se často nenačítají tak rychle.
 
Některé weby budou zobrazovat prázdné stránky několik vteřin, než ukáží domovskou stránku. To může způsobit, že uživatelé utečou, protože se stanou nedočkaví.
Rychlost stránky je faktor pro hodnocení v mobilním zobrazení, takže vaše hodnocení dostane pár ran, pokud vaše stránka nebude načítat svůj obsah dostatečně rychle na platformách mobilních zařízení.
 

Ale Google říká…

Google tvrdí, že jeho boti mohou indexovat stránky, poháněné skriptem. Je tu více než dost důkazů, které toto tvrzení podporují, avšak to neznamená, že se můžete zcela vyhnout tomu, že budete muset jít do extra dálek, abyste optimalizovali Angular stránku.
 
Na začátek je dobré říci, že Google není tím jediným internetovým vyhledávačem pod sluncem. Pokud chcete vaši ANgular aplikaci, aby se hodnotila na Bingu či DuckDuckGo, můžete jít touto cestou.
 
Dále, možná to může být ten případ, že Google MŮŽE indexovat NĚKTERÉ Angular stránky, ale ne vaše. Ne všechny ANgular aplikace jsou vytvořeny rovnocenně. Ta vaše může být výjimkou z algoritmu indexování Google.
 
Naše zkušenost je taková, že stránky, které přešly z HTML do Angular ztratí masivní objem provozu z internetového vyhledávače a to ve většině případů. Dokonce je faktem to, že jsme měli tři klienty, kteří k nám přišli s tímto problémem v rozpětí několika let, kde jsme museli stránku opravit zcela a úplně, kvůli těmto poklesům, které mají co dočinění s přechodem na ANgular.
 

Jsou tu ale řešení.

Naštěstí jsou tady jisté způsoby, jak můžete učinit vaši ANgular stránku SEO přátelskou.
 
Jedním z těchto populárních způsobu je samozřejmě dynamické vykreslování. To je to, když využíváte nástroj jako je Puppeteer ke generování statických HTML souborů, které mohou procházeče vyhledávačů daleko lépe „konzumovat“.
 
Poté, nastavte váš server tak, aby nasměroval boty vyhledávačů k předkresleným stránkám, zatímco bude lidské uživatele navigovat k normální ANgular stránce.
 
To jsou decentní řešení, avšak stále neřeší ten problém s rychlostí stránky. S tímhle budete muset k Angular Universal.
 

Co je vlastně Angular Universal?

Angular Universal spouští webové aplikace na serveru, namísto toho, aby je spouštěl přímo v internetovém prohlížeči.
 
To je velmi důležitý rozdíl. Normálně jsou Angular aplikace řazeny pod aplikace spuštěné na straně klienta.
 
Problém botů vyhledávačů je takový, že ne vždy dokáží zpracovat kód na straně klienta jako to dělá váš prohlížeč, když vám servíruje nějakou tu webovou stránku. A přesně proto můžete vidět jistý nesoulad mezi Angular Universal stránkou dokumentace a jejím zdrojovým kódem.
 
ANgular Universal zvládne vykreslování na straně serveru (SSR). Předkreslí HTML a CSS obsah, který je následně zobrazen uživateli s dostatečným předstihem.
 
To znamená, že uživateli se načte statická HTML stránka namísto kódu na straně klienta. Výsledkem je to, že stránka se bude načítat daleko rychleji.
A také boti budou moci indexovat celý obsah, neboť se jedná o statickou HTML. Takže každý vyhraje.
 

Proč je to důležité?

Pokud vás zajímá digitální marketing, tak určitě již víte, že spousta vašeho boje zahrnuje získávání nějakého toho vašeho prostoru on-line. A to je přesně ten důvod, proč se snažíte oslovit influencery, nahráváte aktualizace či příspěvky na sociální sítě a optimalizujete vaší stránku, aby byla lépe hodnocena.
 
Jednoduše řečeno: vaše stránka se nemůže hodnotit, pokud není indexována. Pokud ANgular pohání vaši stránku, potřebujete učinit nějaké ty extra kroky k tomu, abyste se ujistili, že se bude obsah zobrazovat v internetových vyhledávačích.
 
A přesně proto potřebujete Angular Universal řešení.
 
Nevýhodou, samozřejmě, je to, že vás to bude stát peníze. Budete muset najmout nějaké kvalifikované vývojářské týmy, aby přidali SSR na vaší webovou stránku.
 
Ale to je náklad, který si na sebe za nějaký ten čas zpátky vydělá, pokud se vaše stránka bude umísťovat dobře pro klíčové vyhledávací termíny v tom vašem výklenku.
 

Jak spustit Angular aplikace na Angular Universal

Pokud jste někdo, kdo si rád umaže ruce prací v kódu, nebo jste jenom někdo, kdo si rád škrtne nějaké položky v nákladech, můžete spustit aplikace na straně serveru sami.
 
Ještě předtím než to uděláte, je nejlepší si zjistit alespoň základní informace a pochopit, jak vlastně ANgular funguje, jak funguje CLI (Command-line interface), TypeScript a webové servery. Pokud vaše znalosti někde postrádají, narazíte na spoustu problémů.
 
Kroky ke spuštění Angular Universal aplikací jsou tedy následující:

• Instalujte potřebné programy
• Aktualizujte Angular aplikaci
• Použijte CLI k vybudování balíčku Universal
• Nastavte server pro spuštění balíčku Universal
• Spusťte aplikaci na serveru

 
Docela hodně se děje v těchto pěti krocích, takže je pokryjeme v následujících řádcích podrobněji.
 

Instalujte potřebné soubory

Pokud máte nějakou zkušenost s Angular, určitě již víte, že je to všechno o Node.js. To je běh programu, který překládá TypeScript kód do JavaScript aplikace.
 
Node.js přichází s jakýmsi manažerem celého balíčku, který je velmi nekreativně nazván Node Package Manager nebo také NPM ve zkratce. Použijte tento k instalaci potřebných programů.
 
Nažhavte váš příkazový řádek (nebo jeho okénko) a spusťte následující kód:
 
Npm install -save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader
 
Dejte tomu pár chvil (nebo hodně chvil), aby se to všechno nainstalovalo.
 

Aktualizujte vaši aplikaci angular

Dalším krokem je to, že budete muset připravit vaší ANgular aplikaci pro spuštění Universal. To zahrnuje čtyři kroky:

• Přijdete Universal podporu. Otevřete váš root modul (nejčastěji je to AppModule) a přidejte ID aplikace k BrowserModule import. To učiníte v „import“ sekci hned pod @NgModule deklarací.
• Vytvořte server root modul. Další krok, potřebujete vytvořit úplně nový modul nazvaný AppServerModule. Ujistěte se, že importuje ServerModule z platform-server potřebnosti, kterou jste přidali v minulém kroce.
• Vytvořte hlavní soubor. Budete potřebovat hlavní soubor pro váš balíček Universal. Vytvořte jej v root (v src souboru) a exportujte AppServerModule class z tohoto souboru.
• Vytvořte config soubor. AppServerModule class potřebuje config soubor. Vytvořte jeden v JSON formátu. Mělo by to vypadat takhle nějak

Vytvořte nový cíl

Váš Angular zdrojový adresář by měl zahrnovat soubor zvaný angular.json. Budete muset aktualizovat tento soubor v „architect“ sekci.
 
Mělo by to vypadat nějak takto:
“architect”: {
 “build”: { … }
 “server”: {
   “builder”: “@angular-devkit/build-angular:server”,
   “options”: {
     “outputPath”: “dist/my-project-server”,
     “main”: “src/main.server.ts”,
     “tsConfig”: “src/tsconfig.server.json”
   }
 }
}
Poznačte si, že „builder“ vlastnost je o čtyři řádky níže. Hodnota po kolonce („server“) je jméno serveru. Můžete aktualizovat přesně tohle, pokud jej chcete přejmenovat na něco jiného.
 
Nyní můžete vytvořit (vybudovat) vaši aplikaci. Dejme tomu, že jste nechali název serveru na „server,“ jenom se opět zavřete do vašeho příkazového řádku a napište následující:
 
ng run my-project:server
 
Měli byste vidět něco takového:
 
Date: 2018-12-12T12:42:09.601Z
Hash: 1caced0e9434007fd7ac
Time: 4122ms
chunk {0} main.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.css (styles) 0 bytes [entry] [rendered]
 

Nastavte váš server

V dalším kroku musíte nastavit váš Universal server pro spuštění balíčku. A to je přesně moment, kdy dojde k „serializaci“ aplikace a vrátíte ji do internetového prohlížeče.
 
Abyste tohle učinili, vytvořte nový soubor zvaný server.ts. V tomto souboru, nadefinujte modul vaší aplikace. (app engine).
 
Detaily tohoto kódu jdou mimo tuto příručku. Máte volnou ruku a klidně se můžete podívat i na příklad v Angular Universal dokumentaci.
 

Spusťte aplikaci na serveru

Po tom všem jste konečně v bodě, kdy můžete spustit aplikaci na serveru.
 
Abyste tohle udělali, nastavte webpack, který zpracovává server.ts soubor, který jste vytvořili v předešlém kroku.
 
Pojmenujte config soubor webpack.server.config.js. A ještě jednou, zkontrolujte dokumentaci Angular Universal pro ten správný a určitý kód, který patří do tohoto souboru. Možná budete potřebovat adaptovat tento kód k vašemu nebo jej přizpůsobit vašemu názvosloví.
 
Jakmile jste hotovi s tímto souborem, budete mít dva soubory pod jedním hlavním souborem: prohlížeč a server.
 
Abyste spustili kód serveru, jenom zadejte následující do příkazového řádku:
 
node dist/server.js
 
Gratulujeme! Právě jste spustili kód na straně serveru!
 

Shrnutí

I když ANgular dovoluje vývojářům velmi rychle produkovat vysoce kvalitní aplikace, ne vždy se to vydaří i s boty internetových vyhledávačů.
 
Naštěstí, Angular Universal může předkreslit Angular stránky s aplikací jako statické HTML, takže jsou lehce „objevitelné“ a indexovatelné. A taky se budou načítat mnohem rychleji.
 
Vždycky bylo naším doporučením, abyste měli HTML bázi a používali ANgular pro další ostatní elementy na vaší stránce. Toto doporučení ohledně všeho, co se vztahuje k JAvaScriptu, děláme od roku 2010. Tento proces Angular Universal je na tom samém principu. Nemůžeme říci, kolik stránek Angular nebo JavaScript redesigny zničily. Proto buďte opatrní s tou vaší a vždycky si to nechte ověřit u nějaké SEO Společnosti, ještě než to spustíte.