az Angular framework egy strukturális javascript-alapú keretrendszer webes alkalmazásokhoz. Dinamikus weboldalak létrehozására szolgál a webszolgáltatásokon keresztül megjelenített tartalommal. Az Angular keretrendszer nagyon fejlesztőbarát. Több éve létezik, és erős eszközöket és segédprogramokat gyűjtött össze, beleértve az Angular CMS eszközöket, a backend keretrendszereket és így tovább.

az Angular ökoszisztéma

az Angular framework segítségével épített alkalmazásokat működésük miatt egyoldalas alkalmazásoknak (SPAs) nevezzük. Egy szögletes alkalmazás, miután betöltötte, más oldalakat dinamikusan renderel, anélkül, hogy újra betöltené a weboldalakat. Ez az élmény az Angular javascript keretrendszer erejével érhető el. Dinamikusan módosítja az oldalakat javascript kód futtatásával vagy csak a szükséges tartalom betöltésével. Ez zökkenőmentes élményt nyújt a felhasználó számára anélkül, hogy megvárná az újratöltést. A szögletes webhelyek azonban káros hatással lehetnek keresőoptimalizálásukra (SEO).

ebben a cikkben megfogalmazzuk, hogy az Angular alkalmazásoknak milyen speciális SEO kezelésre van szükségük, és néhány speciális telepítési utasítást adunk a jó Angular SEO megkönnyítésére.

A keresőmotor-robotok és a SEO megértése

mielőtt a megoldással foglalkoznánk, értsük meg, hogyan működnek a keresőmotor-robotok (vagy robotok). A keresőmotorok világszerte feltérképezik a webhelyeit, hogy megértsék az oldalakat és a vállalkozás végső célját. Ehhez a robotok átolvassák az oldalak metaadatait, például a címet, a leírást, a képcímkéket és a kategóriákat. Ennek a metaadatnak minden oldalon különbözőnek kell lennie, hogy a keresőmotorok megértsék az egyes oldalak szándékát.

hagyományos SEO - keresőrobot eredmények

a keresőmotor botja elér egy adott oldalt, megtalálja az oldalon található hiperhivatkozásokat, beolvassa az oldalon található metaadatokat, és elkezdi a hiperhivatkozásokon való áthaladást. Folyamatosan megismétli ezt a folyamatot a webhelyén, amíg nem talál új linkeket. A folyamat során a bot letölti a webhely statikus tartalmát, és megérti az oldalt. Ezért fontos, hogy maximalizáljuk az egyes oldalak részleteit a metaadatokban és a statikus tartalomban.

az Angular CMS lehetővé teszi a dinamikus tartalmat, amelyet a marketingesek frissíthetnek.

a SEO ma minden online vállalkozás egyik legfontosabb befektetésévé vált. A múltban a fejlesztés alatt álló webes alkalmazások meglehetősen egyszerűek voltak, és többnyire statikus oldalakat tartalmaztak. Ezek az oldalak tartalmazták az összes szükséges információt, előre kódolva őket. Ahogy a webalkalmazások fejlesztése fejlődött, beléptünk a dinamikus tartalommegjelenítés korszakába, ahol a weboldalak tartalmát valahol tárolják és szükség szerint letöltik.

ennek két módja van:

  1. szerver oldali renderelés
  2. kliens oldali renderelés

a múltban a kifinomult kliens oldali renderelési keretek hiánya miatt az oldalak szerver oldali renderelése volt a trend. Számos nyelv és keretrendszer volt, amelyek ugyanazt kezelték. Például a PHP, A Java Spring, a kormányos NodeJS és más keretrendszerek előre renderelik az oldalakat, és csak a sima HTML tartalmat küldik a frontendre.

Ez a megközelítés biztosítja, hogy az oldal rendelkezik a megfelelő metacímkékkel és az összes megjelenített tartalommal, mielőtt a keresőmotor bejárója megkapja. Így a hagyományos webes alkalmazások gyakorlatilag egyszerűek voltak, amikor a SEO – ról volt szó. Azonban biztosan volt hátránya a hosszabb rakodási Időknek. Az alacsony szintű szerverekkel az oldalak iránti kérelmek ezreinek feldolgozása nehézzé vált. Ez olyan frontend kereteket hozott a képbe, mint az Angular.

SEO for Single Page Applications (SPAs)

az egyoldalas alkalmazás olyan koncepció, amelyben az alkalmazás alapelrendezése csak egyszer töltődik be, a többi oldal és összetevő pedig csak szükség szerint töltődik be. Ezt a Javascript ereje teszi lehetővé, amely dinamikusan eldönti, hogy milyen tartalomra van szükség, lekéri az adatokat, és a kívánt formátumban rendereli azokat.

az Angular CMS lehetővé teszi a dinamikus tartalmat, amelyet a marketingesek frissíthetnek.

az egyoldalas alkalmazás előnyei

dinamikus jellege miatt az egyetlen oldalas alkalmazásnak sok benne rejlő előnye van. Ezek közül néhányat az alábbiakban sorolunk fel:

  • gyorsabb átmeneti idő az alkalmazás betöltése után
  • simább élmény a hagyományos webes alkalmazáshoz képest
  • kevesebb terhelés az oldalakat feldolgozó webszerveren
  • gyorsabb fejlesztési idő olyan kifinomult keretrendszerekkel, mint az Angular

ezen előnyök ellenére az egyoldalas alkalmazások egyik jelentős kihívása a SEO.

Angular SEO kihívások

mint érthető, Angular nem tölti be újra az oldalakat, hacsak kifejezetten nem kérik. Az Angular támogatja az oldalak metaadatainak dinamikus megváltoztatását, de ez teljesen a JavaScript-től függ. Amint azt korábban tárgyaltuk, a keresőmotor-robotok általában nem szórakoztatják a Javascriptet. Ez azt eredményezheti, hogy az Angular alkalmazások nem tudják megjeleníteni a megfelelő tartalmat vagy metaadatokat.

Angular SEO - Search engine crawler results

az évek során azonban az Angular SEO fejlődött, és a közösség megoldást hozott erre. A megoldás lehetővé teszi számunkra, hogy statikus oldalakat hozzunk létre szögletes oldalakból. Ezek a statikus oldalak tartalmazzák a megfelelő metaadatokat és előre renderelt tartalmat. A cikk későbbi részében belemerülünk ebbe a folyamatba, hogy megértsük a felmerülő kihívásokat, és taktikákat hajtsunk végre az Angular SEO optimalizálása érdekében.

Angular SEO: keresőbarát oldalak fejlesztése

mielőtt elkezdenénk építeni egy működő Angular SEO megoldást, kezdjük egy üres Angular JS alkalmazás létrehozásával.

ng new seo-friendly-app

a parancs létrehoz egy friss Angular Js alkalmazást, ahol létrehozunk egy egyszerű kezdőlapot és blogoldalt, megjelenítünk néhány tartalmat a blogoldalon a ButterCMS API-k segítségével, és SEO-baráttá tesszük őket.

kezdjük az oldalak és útvonalak azonos létrehozásával. Hajtsa végre az alábbi parancsokat a terminálon az otthoni és blogoldalak létrehozásához.

ng g c pages/home --skipTests=trueng g c pages/blog --skipTests=true

ez létrehozza az összetevőket, és importálja őket az alkalmazásba.modul.TS fájl. Most adja hozzá az oldalakat az útválasztási modulhoz, hogy lehetővé tegye számunkra, hogy ezekre az oldalakra irányítsunk. Módosítsa az alkalmazás-útválasztást.modul.TS fájl.

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './pages/home/home.component';import { BlogComponent } from './pages/blog/blog.component';const routes: Routes = ;@NgModule({ imports: ,exports: })export class AppRoutingModule { }

a fenti kód leképezi az egyes összetevőket az útvonalakkal, és beállítja aHomeComponent alapértelmezett komponenst. Most módosítsa az alkalmazást.alkatrész.html fájl csak egy sor kódot tartalmaz.

<router-outlet></router-outlet>

végül futtassa az alkalmazást az alábbi paranccsal, és ellenőrizze, hogy az alkalmazás megfelelően van-e beállítva. Miután a parancs megy keresztül, akkor nyomja meg az URL localhost:4200 annak biztosítása érdekében, a dolgok beállítása finom. Látnia kell a ” home works!”.

ng serve

most adjunk hozzá egy fejlécet, amely lehetővé teszi számunkra, hogy navigáljunk az oldalakon. Hozzon létre egy fejléc összetevőt az alábbi paranccsal.

ng g c header --skipTests=true

ezután módosítsa a fejléc tartalmát.alkatrész.html tartalmazza a navigációs elemeket.

<div><a ="">Home</a></div><div><a ="">Blog</a></div>

végül van egy teljes alkalmazás, ahol két oldal van, és egy egyszerű, nem formázott navigáció, amely lehetővé teszi az oldalak közötti mozgást. Most elemezzük ezt az alkalmazást SEO szempontból. Kattintson a jobb gombbal a böngészőre, majd válassza az “oldalforrás megtekintése”lehetőséget. Látnia kell, hogy a keresőmotor robotjai hogyan látják az oldalt Javascript nélkül. A kód úgy néz ki, mint az alábbi részlet.

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>SeoFriendlyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root></app-root><script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body></html>

most keresse meg a blog oldalt, hajtsa végre ugyanazt a műveletet, és vegye észre az oldal tartalmát. Ez hasonló. Ez magában foglalja az oldal címét, valamint a testet. Ez azért van, mert Angular módosítja a DOM javascript használatával.

dinamikus oldalak létrehozása

ezúton sikerült megvalósítani ezt a statikus oldalakon. Most rendereljük blogjainkat és blog tartalmi oldalunkat a ButterCMS API használatával. Ez lehetővé teszi számunkra, hogy végre SEO statikus, valamint a dinamikus webes tartalom. Mielőtt elkezdené, regisztráljon egy ingyenes próbafiókot a ButterCMS-nél, hogy könnyen létrehozhasson dinamikus tartalmat.

ehhez telepítsük a ButterCMS plugint az NPM használatával.

npm install --save buttercms

a telepítés után hozzunk létre egy szolgáltatási fájlt a szolgáltatások/butterCMS útvonalon.szolgáltatás.ts és tegye be az alábbi tartalmat a fájlba.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

cserélje ki a tokent a fenti kódban. Ez a szolgáltatásfájl biztosítja, hogy a tokent globálisan egyetlen fájlban kezeljék. Importálhatjuk ezt a fájlt bárhová, ahol a ButterCMS szolgáltatásokat kell használnunk. Most gyorsan hajtsuk végre az alábbi kódot a blogban.alkatrész.TS fájlt kap egy listát a hozzászólások.

import { Component, OnInit } from '@angular/core';import { butterService } from '../../services/butter-cms.service';@Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrls: })export class BlogComponent implements OnInit { posts:any; constructor() { this.fetchPosts(); } private fetchPosts() { butterService.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log('Content from ButterCMS'); console.log(res); this.posts = res.data.data; }); } ngOnInit() { }}

most menjen a böngészőbe, és vizsgálja meg a konzol kimenetét. A böngészőkonzolban látnia kell a bejegyzések listáját. Amint az alábbi kódrészletből látható, ez két bejegyzést mutat be, amelyeket ehhez az oktatóanyaghoz hoztam létre.

most rendereljük ezt a tartalmat a blog oldalon. Ehhez frissítse a blogját.alkatrész.html fájl az alábbi kóddal:

<div *ngIf="posts!=undefined"><div *ngFor="let post of posts.data"> <hr> <h1>{{post.title}}</h1> <div ="post.body"></div></div></div> 

Ez teszi a hozzászólásokat a ButterCMS platform a weboldalra. Most értsük meg, hogyan állíthatunk be egyéni címet és metacímkéket minden oldalhoz.

title és metacímkék beállítása az Angular SEO számára

Angular megérti ezt a problémát, és már van megoldása erre. Metaadatok hozzáadásához és az oldal címének dinamikus módosításához mindössze annyit kell tennie, hogy ezeket a modulokat Angularból használja. Frissítse az otthoni kódot.alkatrész.TS fájl az alábbi. Végezzen hasonló változtatásokat a blogján.alkatrész.ts is.

import { Component, OnInit } from '@angular/core';import { Meta,Title } from '@angular/platform-browser';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: })export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags(); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { }}

miután ezeket a módosításokat elmentette, figyelje meg a címet a böngésző lapon. Dinamikusan változik, ahogy navigál az oldalakon. Ezenkívül, ha megvizsgálja a kódot a böngészőkonzolban, látni fogja, hogy a megfelelő metaadatok is csatolva vannak. Ha azonban ellenőrzi az oldal forrását, a tartalom továbbra is ugyanaz. Ez azt jelenti, hogy ha a Javascript engedélyezett, akkor létrehozhatunk egy dinamikus címet és metát, de anélkül nem.

tehát szükségünk van egy módra, hogy a megjelenített oldal tartalmát elküldjük a felhasználónak. Ezt a folyamatot a tartalom előzetes megjelenítésének nevezik, és kritikus fontosságú a jó Angular SEO eléréséhez. Számos módszer létezik az Előrendelés végrehajtására. A következő részben megvizsgáljuk az egyiket.

az előzetes renderelés szükségességének megértése

Az előzetes renderelés lényegében azt jelenti, hogy az oldal HTML tartalmát előre összeállítják. Ez biztosítaná, hogy az oldal címe és metaadatai jelen legyenek, amikor eléri az ügyféloldalt. Az előzetes rendereléssel a végső HTML-tartalmat a bejárónak tehetjük ki, nem pedig az üres HTML-t.

előzetes renderelés végrehajtása szögletes alkalmazásokhoz

az Angular frissítéseivel most már szabványosított megoldást kínál az előrendelésre is. A folyamat meglehetősen egyszerű. Az Angular Universal csomagot felhasználnánk az oldalak előzetes megjelenítésének támogatására. Az Angular universal csomag hozzáadásához hajtsa végre az alábbi parancsot a projekt nevével, amelyet az Angular alkalmazás létrehozása során használt.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

Ez létrehoz néhány fájlt a projekten belül, és konfigurálja a projektet, hogy támogassa az előrendelést egy NodeJS szerver használatával. Ennek futtatásához hajtsa végre az alábbi parancsot.

npm run build:ssr && npm run serve:ssr

Ez a parancs lefordítja, felépíti a statikus oldalakat, a dist mappába helyezi őket, és egy NodeJS szerver futtatásával szolgálja ki őket. Ezzel jelentősen javítottuk az Angular SEO-t azáltal, hogy biztosítottuk, hogy alkalmazásunk SEO-barát módon épül fel, és minden tartalma dinamikusan jelenik meg.

A SEO-barát Angular SPA ellenőrzése

a megvalósítás érvényesítéséhez lépjen a böngészőbe, és tekintse meg az egyes oldalak oldalforrását. Most, akkor képes lesz arra, hogy látni, hogy a böngésző teszi a pontos HTML tartalmat, ahogy azt elvárják, hogy. Ezzel létrehoztuk egy egyszerű, stílus nélküli blog megvalósítását, SEO-barát megjelenítéssel az Angular framework – EN. A ButterCMS segítségével sokkal többet tehet, például dinamikusan letöltheti a SEO címkéket, a meta leírásokat, sőt magát az oldal tartalmát is. További információkért tekintse meg Angular API dokumentációnkat.

iratkozzon fel, hogy cikkeket és oktatóanyagokat kapjon az Angular SEO-ról.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.