Angular Universal: mit kell tudni a SEO-hoz

Ha Angular-t használ a webhely áramellátásához, akkor van egy extra akadálya, hogy átlépje a SEO-t. Szerencsére az Angular Universal megkönnyíti az átugrást.

ne feledje, hogy a “könnyű” itt relatív kifejezés. Van egy kis technikai varázslat.

szinte biztosan be kell vonnia egy fejlesztőcsapatot.

de miután a kész terméket leszállították, webhelye optimalizált oldalakat fog kiszolgálni, amelyeket a keresőmotorok könnyen megtalálnak és indexelnek.

ebben az útmutatóban elmagyarázom az Angular Universal-t, és miért fontos a marketingesek számára.

A SEO probléma

az Angular egy fantasztikus keretrendszer a moduláris, felhasználóbarát webes alkalmazások biztosításához. Sajnos ez egy kicsit ellenséges a SEO-val szemben.

ennek két oka van.

először is, az Angular nagymértékben támaszkodik a szkriptre A tartalom szállításához. Ennek eredményeként egyes keresőrobotok nem “látják” azt a tartalmat, amelyet a felhasználó lát.

vessen egy pillantást az Angular Universal dokumentációra. Ez az oldal, nem meglepő, szögletes rendereléssel.

ahogy lefelé görgetsz, elég sok tartalmat fogsz látni. Azt hinné az ember, hogy minden indexelhető.

nem feltétlenül. Kattintson a jobb gombbal az oldalra, majd válassza a megjelenő helyi menüből az “oldalforrás megtekintése” lehetőséget.

csak 100 sor forráskód van. Sehol nem fogja látni azt a tartalmat, amelyet az oldal normál megtekintésekor látott.

ez dióhéjban az Angular problémája. Az emberi látogatók látni fogják a tartalmat, de a keresőrobotok látják a forrást.

és a forrás nem rendelkezik a tartalommal!

van egy másik SEO probléma: sebesség. A szögletes alkalmazások gyakran nem töltődnek be gyorsan.

egyes webhelyek néhány másodpercig üres képernyőt jelenítenek meg, mielőtt megjelenítenék a kezdőlapot. Ez okozhatja a látogatók óvadék, mert kap türelmetlen.

a Webhely sebessége mobil rangsorolási tényező, így a rangod eltalálja, ha webhelye nem töltődik be gyorsan a mobil platformokon.

de a Google azt mondja…

a Google azt állítja, hogy botja képes indexelni a szkriptvezérelt webhelyeket. Rengeteg bizonyíték támasztja alá ezt, de ez nem jelenti azt, hogy elkerülheti az extra mérföldet, amikor egy szögletes helyet optimalizál.

kezdetnek A Google nem az egyetlen keresőmotor a városban. Ha azt szeretné, hogy az Angular alkalmazás a Bing és a DuckDuckGo rangsorába kerüljön, lépéseket kell tennie annak érdekében, hogy ez megtörténjen.

ezután előfordulhat, hogy a Google indexelhet néhány szögletes webhelyet, de a tiédet nem. Nem minden szögletes alkalmazás jön létre egyenlően. A tiéd lehet A kivétel a Google indexelési algoritmusa alól.

tapasztalatom szerint azok a webhelyek, amelyek a HTML-ről A szögletes laza hatalmas forgalomra mozognak a keresőmotorból, az idő nagy részében. Valójában három ügyfél jött be az elmúlt évben, ahol a szög miatt a cseppek után vissza kellett javítanunk a webhelyet.

vannak megoldások

szerencsére vannak módok arra, hogy a szögletes webhely SEO-barát legyen.

az egyik legnépszerűbb lehetőség a dinamikus renderelés használata. Ekkor használ egy olyan eszközt, mint a Puppeteer, hogy statikus HTML fájlokat generáljon, amelyeket a webbejárók könnyebben fogyaszthatnak.

ezután állítsa be a webkiszolgálót úgy, hogy a keresőrobotokat az előre renderelt oldalakra irányítsa, miközben az emberi látogatók a normál Angular alkalmazásban navigálnak.

Ez egy tisztességes megoldás, de még mindig nem foglalkozik a sebesség kérdésével. Ehhez valószínűleg az Angular Universal-t szeretné használni.

mi a szögletes univerzális?

az Angular Universal a webalkalmazást a szerveren futtatja, szemben a böngészőben történő futtatással.

Ez egy fontos különbség. Általában az Angular alkalmazások kliens oldali alkalmazások.

a keresőrobotok problémája az, hogy nem mindig “dolgozzák fel” az ügyféloldali kódot, mint a böngésző, amikor egy weboldalt szolgál fel. Ezért látott eltérést az Angular Universal dokumentációs oldal és annak forráskódja között.

szögletes univerzális kezeli szerver oldali renderelés (SSR). Előre megjeleníti a HTML és CSS tartalmat, amelyet a felhasználó előre megjelenít.

Ez azt jelenti, hogy a felhasználó statikus HTML oldalt tölt be az ügyféloldali kód helyett. Ennek eredményeként az oldal gyorsabban töltődik be.

mivel statikus HTML, a keresőrobotok indexelhetik a tartalmat.

mindenki nyer.

miért fontos

Ha a digitális marketing, akkor már tudja, hogy sok a csata jár egyre expozíció online. Ezért fordul az influencerekhez, frissítéseket tesz közzé a közösségi médiában, és optimalizálja webhelyét, hogy jól rangsoroljon.

egyszerűen fogalmazva: webhelye nem rangsorolható, ha nem indexelhető. Ha az Angular táplálja webhelyét, további lépéseket kell tennie annak biztosítására, hogy tartalma megjelenjen a keresőmotorokban.

ezért van szükség egy szögletes univerzális megoldásra.

a hátránya természetesen az, hogy pénzbe kerül. Fel kell bérelnie egy képzett fejlesztőcsapatot az SSR hozzáadásához a webhelyéhez.

Ez egy olyan költség, amelynek idővel többet kell fizetnie, mint magának, ha webhelye jól szerepel a réshez kapcsolódó kulcsfontosságú Keresési kifejezésekben.

hogyan kell futtatni egy Angular App Angular Universal

Ha valaki, aki szereti, hogy a kezed piszkos kódot, vagy csak azt szeretné, hogy mentse a fejlesztési költségek, akkor telepíteni egy szerver oldali alkalmazás a saját.

mielőtt ezt megtenné, a legjobb, ha ismeri az Angular, a parancssori felület (CLI), a TypeScript és a webszervereket. Ellenkező esetben valószínűleg küzdeni fog.

A szögletes Univerzális alkalmazás telepítésének lépései a következők:

• telepítse a szükséges függőségeket
• frissítse az Angular alkalmazást
• használja a CLI-t egy univerzális csomag létrehozásához
• állítsa be a kiszolgálót egy univerzális csomag futtatásához
• futtassa az alkalmazást a szerveren

ebben az öt lépésben elég sok minden történik, ezért a következő szakaszokban egyenként kitérek rájuk.

telepítse a függőségek

Ha bármilyen tapasztalata Angular, akkor már tudja Node.js. Ez az a futási idő, amely a TypeScript kódot egy JavaScript alkalmazásba fordítja.

csomópont.js jön egy csomagkezelő, elképzelhetetlenül nevű Node Package Manager vagy NPM rövid. Ezt fogja használni a függőségek telepítéséhez.

indítsd be a parancssori ablakot, és futtasd a következő kódot:

npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

adj neki néhány percet (vagy sok pillanatot), hogy mindent telepítsen.

frissítse az Angular alkalmazást

ezután elő kell készítenie az Angular alkalmazást az univerzális telepítéshez. Ez négy lépésből áll:

• univerzális támogatás hozzáadása. Nyissa meg a root modult (általában AppModule), és adjon hozzá egy alkalmazásazonosítót a BrowserModule importálásához. Ezt a @NgModule nyilatkozat alatti “Importálás” szakaszban fogja megtenni.
• hozza létre a kiszolgáló gyökér modulját.Ezután létre kell hoznia egy új modult AppServerModule néven. Győződjön meg arról, hogy a ServerModule-t az előző lépésben hozzáadott platform-kiszolgáló függőségből importálja.
• hozza létre a fő fájlt. Szüksége lesz egy fő fájlra az univerzális csomaghoz. Hozza létre ezt a gyökérben (az src mappában), majd exportálja az AppServerModule osztályt ebből a fájlból.
• hozzon létre egy konfigurációs fájlt. Az AppServerModule osztálynak konfigurációs fájlra van szüksége. Hozzon létre egyet JSON formátumban. Valahogy így kell kinéznie:

hozzon létre egy új építési célt

az Angular forráskönyvtárának tartalmaznia kell egy angular nevű fájlt.json. Frissítenie kell ezt a fájlt az “építész” szakaszban.

valahogy így fog kinézni:

“építész”: {
“build”: { … }
“szerver”: {
“builder”: “@angular-devkit / build-angular: server”,
“opciók”: {
“outputPath”: “dist/My-project-server”,
“main”: “src/main.szerver.ts”,
“tsConfig”: “src / tsconfig.szerver.json “
}
}
}

vegye figyelembe a” builder ” attribútumot négy sorral lejjebb. A kettőspont (“szerver”) utáni érték a kiszolgáló neve. Ezt frissítheti, ha valami mást szeretne nevezni.

most, akkor lehet építeni az alkalmazást. Feltételezve, hogy megtartotta a “server” nevű kiszolgálót, csak lépjen a parancssorba, és írja be a következőket:

ng run my-project:server

olyan kimenetet kell látnia, amely valahogy így néz ki:

Dátum: 2018-12-12t12:42:09.601 z
hash: 1caced0e9434007fd7ac
idő: 4122ms
darab {0} fő.js (fő) 9.49 kB
darab {1} stílusok.css (styles) 0 bájt

A kiszolgáló beállítása

ezután be kell állítania egy univerzális szervert a csomag futtatásához. Így szerializálhatja az alkalmazást, és visszaküldheti a böngészőbe.

ehhez hozzon létre egy új fájlt, a server nevet.ts. Ezen a fájlon belül meghatározza az alkalmazás motorját.

a kód részletei egy kicsit kívül esnek ezen oktatóanyag hatókörén. Vessen egy pillantást a szögletes univerzális dokumentumok példájára.

futtassa az alkalmazást a szerveren

Mindezek után végre egy olyan ponton vagy, ahol futtathatja az alkalmazást a szerveren.

ehhez állítson be egy webcsomagot, amely kezeli a szervert.az előző lépésben létrehozott ts fájl.

nevezze el a konfigurációs fájl webcsomagját.szerver.config.js. Még egyszer nézze meg az Angular Universal docs-t, hogy pontosan milyen típusú kód tartozik a fájlba. Lehet, hogy hozzá kell igazítania ezt a kódot a saját elnevezési szokásaihoz.

miután végzett a fájllal, két mappa lesz a dist mappa alatt: böngésző és szerver.

a kiszolgálókód futtatásához írja be a következő parancsot a parancssorba:

node Dist/server.js

Gratulálunk! Most szerver oldali kódot futtat.

csomagolás

bár az Angular lehetővé teszi a fejlesztők számára, hogy gyorsan készítsenek kiváló minőségű alkalmazásokat, nem mindig játszik szépen a keresőmotor botjaival.

szerencsére az Angular Universal előre renderelheti az Angular app oldalakat statikus HTML-ként, így felfedezhetők és indexelhetők. Ők is gyorsabban töltődnek be.

mindig is azt javasoltam, hogy legyen egy HTML alap, és az Angular segítségével juttassuk el az oldal többi elemét. 2010 óta készítem ezt az ajánlást a JavaScript-hez kapcsolódó bármiről. Ez a szögletes univerzális folyamat ugyanaz a fő. Nem tudom megmondani, hogy sok webhely Angular és JavaScript újratervezése megsemmisült. Legyen óvatos a tiéddel, és mindig ellenőrizze egy SEO cég által az indítás előtt.

A szerzőről

John E Lincoln

John Lincoln az Ignite Visibility, egy digitális marketing ügynökség és egy Inc vezérigazgatója. 5000 század. Lincoln következetesen nevezik az egyik legjobb marketing szakértők az iparban. Ő volt a címzett a Search Engine Land” Search marketingszakértő az Év ” díjat, elemzi a #1 SEO tanácsadó az USA-ban Clutch.co, a legtöbb csodált vezérigazgató és 40 alatt 40. Lincoln két könyvet írt (The Forecaster Method és Digital Influencer), és két filmet készített (SEO: The Movie és Social Media Marketing: The Movie) a digitális marketingről.