Angular framework är ett strukturellt javascript-baserat ramverk för webbapplikationer. Det används för att skapa dynamiska webbsidor med innehåll som görs via webbtjänster. Vinkelramen är mycket utvecklarvänlig. Det har funnits i flera år och har samlat en stark gemenskap av verktyg och verktyg inklusive Angular CMS-verktyg, backend-ramar och mer.

Angular ecosystem

applikationer byggda med Angular framework kallas Single Page Applications (SPAs) på grund av hur de fungerar. En vinkel applikation, en gång laddad, gör andra sidor dynamiskt utan att ladda om webbsidorna igen. Denna erfarenhet levereras med kraften i Angular javascript framework. Det ändrar dynamiskt sidorna genom att köra javascript-kod eller genom att bara ladda det önskade innehållet. Detta ger användaren en smidig upplevelse utan att vänta på att en omladdning ska hända. Kantiga webbplatser kan dock drabbas av negativa effekter på deras sökmotoroptimering (SEO).

i den här artikeln formulerar vi hur vinklade applikationer behöver speciell SEO-behandling, och vi tillhandahåller några specifika driftsättningsinstruktioner för att underlätta god vinklad SEO.

förstå sökmotorsökare och SEO

innan vi tar itu med lösningen, låt oss förstå hur sökmotorsökarna (eller bots) faktiskt fungerar. Sökmotorer runt om i världen kryper igenom dina webbplatser för att förstå sidorna och slutmålet för ditt företag. För detta läser sökrobotarna igenom sidornas metadata, t.ex. titel, beskrivning, bildtaggar och kategorier. Dessa metadata måste vara olika för varje sida för att tillåta sökmotorer att förstå varje sidas avsikt.

traditionella SEO - Sökrobotresultat

en sökmotorbot når en specifik sida, hittar hyperlänkarna på sidan, läser metadata på sidan och börjar korsa hyperlänkarna. Det fortsätter att upprepa denna process på din webbplats tills den inte kan hitta några nya länkar. Under denna process hämtar botten det statiska innehållet på din webbplats och förstår sidan. Således blir det viktigt att maximera detaljerna på varje sida i metadata och statiskt innehåll.

vårt Angular CMS möjliggör dynamiskt innehåll som dina marknadsförare kan uppdatera.

SEO har blivit en av de viktigaste investeringarna för alla online-företag idag. Tidigare var webbapplikationerna som utvecklades ganska enkla och innehöll mestadels statiska sidor. Dessa sidor innehöll all nödvändig information förkodad i dem. När webbapplikationsutvecklingen utvecklades gick vi in i en era av dynamisk innehållsåtergivning där innehållet för webbsidorna lagras någonstans och hämtas efter behov.

det finns två sätt att göra detta:

  1. serversidan rendering
  2. klientsidan rendering

på grund av bristen på sofistikerade klientsidan rendering ramar i det förflutna, serversidan rendering av sidor var trenden. Det fanns många språk och ramar för att hantera samma. Till exempel gör PHP, Java Spring, NodeJS med styr och andra ramar sidorna i förväg och skickar bara det vanliga HTML-innehållet till frontend.

detta tillvägagångssätt säkerställer att sidan har rätt metataggar och allt innehåll som återges innan det tas emot av sökmotorns sökrobot. Således var konventionella webbapplikationer praktiskt taget enkla när det gällde SEO. Men de hade säkert en nackdel med längre laddningstider. Med low-end-servrar blev det svårt att bearbeta tusentals förfrågningar om sidor. Detta förde frontend-ramar som Angular in i bilden.

SEO för enkelsidiga applikationer (SPAs)

en enkelsidigapplikation är ett koncept där applikationsbaslayouten bara laddas en gång och resten av sidorna och komponenterna bara laddas efter behov. Detta möjliggörs med kraften i Javascript som dynamiskt bestämmer vilket innehåll som krävs, hämtar data och gör det i önskat format.

vårt Angular CMS möjliggör dynamiskt innehåll som dina marknadsförare kan uppdatera.

fördelar med en enda sida ansökan

På grund av sin dynamiska natur, en enda sida ansökan har en hel del inneboende fördelar i samband med det. Några av dessa listas nedan:

  • snabbare övergångstid när applikationen har laddats
  • mjukare upplevelser jämfört med en konventionell webbapplikation
  • mindre belastning på webbservern som bearbetar sidorna
  • snabbare utvecklingstid med sofistikerade ramar som angular

trots dessa fördelar är en betydande utmaning med enkelsidiga applikationer seo.

Angular SEO challenges

som förstått laddar Angular inte sidorna om de inte uttryckligen ombeds. Angular stöder dynamiskt förändring av metadata för sidorna men det beror helt på JavaScript. Som diskuterats tidigare underhåller sökrobotar normalt inte Javascript. Detta kan leda till att Angular-applikationer misslyckas med att göra rätt innehåll eller metadata.

Angular SEO-Search engine crawler results

men under åren har Angular SEO utvecklats och samhället har tagit en lösning för att komma runt detta. Lösningen gör att vi kan skapa statiska sidor ur Vinkelsidor. Dessa statiska sidor innehåller rätt metadata och förrenderat innehåll. Senare i den här artikeln kommer vi att dyka in i denna process för att förstå utmaningarna och implementera taktik för att optimera Angular SEO.

Angular SEO: utveckla sökvänliga sidor

innan vi börjar bygga en fungerande Angular SEO-lösning, Låt oss börja med att skapa en tom Angular JS-applikation.

ng new seo-friendly-app

kommandot skapar en ny Angular JS-applikation där vi skapar en enkel hemsida och bloggsida, gör lite innehåll på bloggsidan med ButterCMS API: er och gör dem SEO-vänliga.

låt oss börja med att skapa sidor och rutter för samma. Kör nedanstående kommandon i terminalen för att skapa dina hem-och bloggsidor.

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

detta skapar komponenterna och importerar dem till appen.modul.ts-fil. Lägg nu till sidorna i routingmodulen så att vi kan dirigera till dessa sidor. Ändra din app-routing.modul.ts-fil.

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 { }

ovanstående kod kartlägger respektive komponenter med sina rutter och angerHomeComponent som standardkomponent. Ändra nu appen.komponent.html-fil för att innehålla endast en enda rad kod.

<router-outlet></router-outlet>

slutligen kör programmet med kommandot nedan och kontrollera att din applikation är korrekt inställd. När kommandot går igenom kan du slå URL localhost: 4200 för att säkerställa att saker är inställda bra. Du bör se texten ” hem fungerar!”.

ng serve

låt oss nu lägga till en rubrik som låter oss navigera genom sidorna. Skapa en rubrikkomponent med kommandot nedan.

ng g c header --skipTests=true

ändra sedan innehållet i rubriken.komponent.html för att innehålla navigeringselementen.

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

Slutligen har du en komplett applikation där du har två sidor och en enkel ostylad navigering som låter dig flytta mellan sidorna. Låt oss nu analysera denna applikation ur ett SEO-perspektiv. Högerklicka på webbläsaren och välj ”Visa sidkälla”. Du bör kunna se hur sökmotorns sökrobotar skulle se din sida utan Javascript. Koden ser ut som nedanstående utdrag.

<!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>

navigera nu till bloggsidan och utför samma åtgärd och märka sidinnehållet. Det är liknande. Detta inkluderar sidans titel samt kropp. Detta beror på att Angular ändrar din DOM med javascript.

skapa dynamiska sidor

härmed lyckades vi implementera detta på de statiska sidorna. Låt oss nu göra våra bloggar och blogg innehållssida med ButterCMS API. Detta gör att vi kan utföra SEO på statiskt såväl som dynamiskt webbinnehåll. Innan du börjar med det, registrera ett gratis provkonto med ButterCMS för att enkelt kunna skapa dynamiskt innehåll.

för att göra detta, låt oss installera ButterCMS-plugin med NPM.

npm install --save buttercms

när vi har installerat, låt oss skapa en servicefil på sökvägen services/butterCMS.tjänst.ts och lägg i nedanstående innehåll i filen.

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

ersätt din token i ovanstående kod. Den här servicefilen säkerställer att token hanteras globalt i en enda fil. Vi kan importera den här filen varhelst vi behöver använda ButterCMS-tjänsterna. Låt oss nu snabbt implementera nedanstående kod i bloggen.komponent.ts-fil för att få en lista med inlägg.

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() { }}

gå nu till webbläsaren och inspektera konsolutgången i konsolen. Du bör kunna se listan över dina inlägg i webbläsarkonsolen. Som du kan se i kodavsnittet nedan visar detta två av de inlägg som jag har skapat för denna handledning.

låt oss nu göra detta innehåll på bloggsidan. För att göra det, uppdatera din blogg.komponent.html-fil med nedanstående kod:

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

detta kommer att göra inläggen från din ButterCMS-plattform till webbsidan. Låt oss nu förstå hur du ställer in en anpassad titel och metataggar för varje sida.

Inställning av titel och metataggar för Angular SEO

Angular förstår detta problem och har redan en lösning på detta. För att lägga till metadata och ändra sidtiteln dynamiskt behöver du bara använda dessa moduler från Angular. Uppdatera koden för ditt hem.komponent.ts-fil med nedan. Utför liknande ändringar på din blogg.komponent.ts också.

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() { }}

När dessa ändringar har sparats, observera titeln på webbläsarfliken. Det ändras dynamiskt när du navigerar genom sidor. Dessutom, om du inspekterar koden i webbläsarkonsolen ser du att motsvarande metadata också har bifogats. Men om du kontrollerar sidkällan är innehållet fortfarande detsamma. Detta innebär att om Javascript är tillåtet kan vi generera en dynamisk titel och meta, men inte utan den.

Således behöver vi ett sätt att ta innehållet på den här renderade sidan och skicka den till användaren. Denna process kallas pre-rendering av innehållet, och det är avgörande för att uppnå god vinkel SEO. Det finns flera metoder för att utföra pre-rendering. I nästa avsnitt kommer vi att utforska en av dem.

att förstå behovet av pre-rendering

Pre-rendering innebär i huvudsak att HTML-innehållet på sidan skulle sammanställas i förväg. Detta skulle säkerställa att sidans titel och metadata finns när den når klientsidan. Med förrendering kan vi exponera det slutliga HTML-innehållet för sökroboten snarare än att exponera Tom HTML.

implementera pre-rendering för Angular applications

med uppgraderingarna i Angular, nu kommer det med en standardiserad lösning för pre-rendering också. Processen är ganska enkel. Vi skulle utnyttja Angular Universal-paketet för att stödja förrendering av sidorna. För att lägga till Angular universal-paketet, kör kommandot nedan med projektnamnet som du använde när du skapade din Angular-app.

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

detta skapar några filer i projektet och konfigurerar ditt projekt för att stödja förrendering med en NodeJS-server. För att köra detta, kör kommandot nedan.

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

detta kommando sammanställer, bygger dina statiska sidor, placerar dem i dist-mappen och serverar dem genom att köra en NodeJS-server. Med detta har vi förbättrat vår vinklade SEO kraftigt genom att se till att vår applikation är byggd på ett SEO-vänligt sätt och allt dess innehåll återges dynamiskt.

validera ditt SEO-vänliga Angular SPA

för att validera implementeringen kan du gå till webbläsaren och Visa sidkälla för varje sida. Nu kommer du att kunna se att webbläsaren gör det exakta HTML-innehållet som du förväntar dig. Med detta etablerade vi vår implementering av en enkel ostylad blogg med en SEO-vänlig rendering på Angular framework. Med ButterCMS kan du göra mycket mer som att dynamiskt hämta SEO-taggar, metabeskrivningar och till och med sidans innehåll. Kolla in vår Angular API-dokumentation för att lära dig mer.

registrera dig för att få artiklar och handledning om Angular SEO.

Lämna ett svar

Din e-postadress kommer inte publiceras.