Angular framework er et strukturelt javascript-basert rammeverk for webapplikasjoner. Den brukes til å lage dynamiske websider med innhold gjengitt via webtjenester. Vinkelrammen er veldig utviklervennlig. Det har eksistert i flere år og har samlet et sterkt fellesskap av verktøy og verktøy, inkludert Angular CMS verktøy, backend rammer, og mer.

Vinkeløkosystemet

Applikasjoner bygget ved Hjelp Av Vinkelrammen kalles Single Page Applications (SPAs) på grunn av måten de fungerer på. En Kantete program, når lastet, gjengir andre sider dynamisk uten å laste websidene på nytt. Denne erfaringen leveres med kraften I Angular javascript framework. Den endrer sidene dynamisk ved å kjøre javascript-kode eller ved å laste inn bare det nødvendige innholdet. Dette gir brukeren en jevn opplevelse uten å vente på at en reload skal skje. Kantete nettsteder kan imidlertid lide bivirkninger på deres søkemotoroptimalisering (SEO).

i denne artikkelen formulerer vi hvordan Vinkelapplikasjoner trenger spesiell SEO-behandling, og vi gir noen spesifikke distribusjonsinstruksjoner for å lette God Vinkel SEO.

Forstå søkemotorroboter og SEO

før vi adresserer løsningen, la oss forstå hvordan søkemotorroboter (eller bots) faktisk fungerer. Søkemotorer rundt om i verden gjennomgå nettsteder for å forstå sidene og slutten målet for bedriften. For å gjøre dette leser robotsøkeprogrammene gjennom metadataene på sidene, for eksempel tittel, beskrivelse, bildekoder og kategorier. Denne metadataen må være forskjellig for hver side for å tillate søkemotorer å forstå hver sides hensikt.

Tradisjonelle seo - søk crawler resultater

en søkemotor bot når en bestemt side, finner hyperkoblingene på siden, leser metadataene på siden, og begynner å krysse gjennom hyperkoblingene. Det fortsetter å gjenta denne prosessen på nettstedet ditt til det ikke finner noen nye koblinger. Under denne prosessen laster boten ned det statiske innholdet på nettstedet ditt og forstår siden. Dermed blir det viktig å maksimere detaljene for hver side i metadata og statisk innhold.

Vårt Angular CMS muliggjør dynamisk innhold Som Markedsførerne dine kan oppdatere.

SEO HAR blitt en av de viktigste investeringene for enhver internett-bedrift i dag. Tidligere var webapplikasjonene som ble utviklet ganske enkle og inneholdt for det meste statiske sider. Disse sidene inneholdt all nødvendig informasjon pre-kodet inn i dem. Etter hvert som webapplikasjonsutvikling utviklet seg, gikk vi inn i en epoke med dynamisk innholdsrengivelse der innholdet for nettsidene lagres et sted og hentes etter behov.

det er to måter å gjøre dette på:

  1. server-side rendering
  2. Klient-side rendering

på grunn av mangel på sofistikerte klient-side rendering rammer i det siste, server-side rendering av sider var trenden. Det var mange språk og rammer for å håndtere det samme. FOR EKSEMPEL, PHP, Java Spring, NodeJS Med Styret, og andre rammer gjengi sidene på forhånd og sende bare vanlig HTML-innhold til frontend.

denne tilnærmingen sikrer at siden har de riktige metakodene og alt innholdet som gjengis før det mottas av søkemotoren. Dermed var konvensjonelle webapplikasjoner praktisk talt enkle når DET kom TIL SEO. Imidlertid hadde de sikkert en ulempe med lengre lastetider. Med low-end-servere ble det vanskelig å behandle tusenvis av forespørsler om sider. Dette brakte frontend rammer som Angular inn i bildet.

SEO For Single Page Applications (SPAs)

en single page application er et konsept der programmet base layout er lastet bare en gang og resten av sidene og komponentene er lastet bare etter behov. Dette er gjort mulig med Kraften I Javascript som dynamisk bestemmer hvilket innhold som kreves, henter dataene, og gjengir det i ønsket format.

Vårt Angular CMS muliggjør dynamisk innhold Som Markedsførerne dine kan oppdatere.

Fordeler med en enkelt sideapplikasjon

på grunn av sin dynamiske natur har en enkelt sideapplikasjon mange iboende fordeler knyttet til den. Noen av disse er oppført nedenfor:

  • Raskere overgangstid når applikasjonen har lastet
  • Jevnere opplevelser sammenlignet med en vanlig webapplikasjon
  • mindre belastning på webserveren som behandler sidene

raskere utviklingstid med sofistikerte rammer som angular

til tross for disse fordelene er en betydelig utfordring med enkeltsideprogrammer seo.

Angular SEO utfordringer

Som forstått, Angular ikke laste sidene med mindre eksplisitt bedt om å. Angular støtter endring av metadata for sidene dynamisk, men det er helt avhengig Av JavaScript. Som diskutert før, søkemotor crawlere vanligvis ikke underholde Javascript. Dette kan føre Til At Vinkelprogrammer mislykkes i å gjengi riktig innhold eller metadata.

Angular SEO-Search engine crawler results

Men Gjennom årene Har Angular SEO utviklet seg og samfunnet har brakt en løsning for å komme seg rundt dette. Løsningen tillater oss å lage statiske sider ut Av Kantete sider. Disse statiske sidene inneholder riktig metadata og pre-rendret innhold. Senere i denne artikkelen vil vi dykke inn i denne prosessen for å forstå utfordringene som er involvert og implementere taktikk for å optimalisere Angular SEO.

Angular SEO: Utvikle søkevennlige sider

før vi begynner å bygge en fungerende Angular SEO-løsning, la oss starte med å lage et tomt Angular JS-program.

ng new seo-friendly-app

kommandoen lager et nytt Angular JS-program der vi skal lage en enkel hjemmeside og bloggside, gjengi noe innhold på bloggsiden ved Hjelp Av ButterCMS Apier og GJØRE DEM SEO-vennlige.

La oss begynne med å lage sider og ruter for det samme. Utfør kommandoene nedenfor i terminalen for å lage dine hjem og bloggsider.

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

dette vil opprette komponentene og importere dem inn i appen.modul.ts-fil. Legg nå sidene til rutemodulen slik at vi kan rute til disse sidene. Endre din app-ruting.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 { }

koden ovenfor kartlegger de respektive komponentene med sine ruter og setter HomeComponent som standardkomponent. Nå, endre app.komponent.html-fil for å inneholde bare en enkelt linje med kode.

<router-outlet></router-outlet>

Til Slutt, kjør programmet ved hjelp av kommandoen nedenfor og kontroller at programmet er satt opp riktig. Når kommandoen går gjennom, kan du treffe URL localhost: 4200 for å sikre at ting er satt opp fint. Du bør se teksten » hjem fungerer!».

ng serve

La Oss nå legge til en overskrift som lar oss navigere gjennom sidene. Opprett en header-komponent ved hjelp av kommandoen nedenfor.

ng g c header --skipTests=true

neste, endre innholdet i overskriften.komponent.html for å inneholde navigasjonselementene.

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

Til Slutt har Du et komplett program der du har to sider og en enkel unstyled navigasjon som lar deg flytte mellom sidene. Nå, la oss analysere dette programmet FRA EN SEO perspektiv. Høyreklikk på nettleseren og velg «Vis sidekilde». Du bør kunne se hvordan søkemotoren crawlere ville se siden din uten Javascript. Koden ser ut som den under kodebiten.

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

naviger nå til bloggsiden og utfør samme handling og legg merke til sideinnholdet. Det er lik. Dette inkluderer siden tittelen samt kroppen. Dette skyldes At Angular endrer DOM ved hjelp av javascript.

Opprette dynamiske sider

Herved klarte vi å implementere dette på de statiske sidene. La oss nå gjengi våre blogger og blogg innholdsside ved Hjelp ButterCMS API. DETTE vil tillate OSS Å utføre SEO på statisk samt dynamisk webinnhold. Før du begynner med det, registrer deg en gratis prøvekonto hos ButterCMS for å kunne lage dynamisk innhold enkelt.

for å gjøre dette, la oss installere ButterCMS plugin ved HJELP AV NPM.

npm install --save buttercms

når installert, la oss lage en tjeneste fil på banen tjenester / butterCMS.tjenesten.ts og legg inn innholdet nedenfor inne i filen.

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

Erstatt token i koden ovenfor. Denne tjenestefilen sikrer at token styres globalt i en enkelt fil. Vi kan importere denne filen hvor vi trenger Å bruke ButterCMS tjenester. Nå, la oss raskt implementere koden nedenfor i bloggen.komponent.ts fil for å få en liste over innlegg.

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

nå går du til nettleseren og inspiserer konsollutgangen i konsollen. Du bør kunne se listen over innleggene dine i nettleserkonsollen. Som du kan se i kodebiten nedenfor, demonstrerer dette to av innleggene jeg har laget for denne opplæringen.

Nå, la oss gjengi dette innholdet på bloggsiden. For å gjøre det, oppdater bloggen din.komponent.html-fil med koden nedenfor:

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

dette vil gjengi innleggene fra ButterCMS-plattformen på nettsiden. La oss nå forstå hvordan du angir en egendefinert tittel og metakoder for hver side.

Angi tittel OG metakoder for Angular SEO

Angular forstår dette problemet og har allerede en løsning på dette. For å legge til metadata og endre sidetittelen dynamisk, er alt du trenger å gjøre, å bruke disse modulene Fra Angular. Oppdater koden for ditt hjem.komponent.ts fil med nedenfor. Utfør lignende endringer på bloggen din.komponent.ts også.

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 disse endringene er lagret, følg tittelen på nettleserfanen. Det endres dynamisk når du navigerer gjennom sider. I tillegg, hvis du inspiserer koden i nettleserkonsollen, vil du se at tilsvarende metadata også er vedlagt. Men hvis du sjekker sidekilden, er innholdet fortsatt det samme. Dette betyr at Hvis Javascript er tillatt, kan vi generere en dynamisk tittel og meta, men ikke uten det.

Dermed trenger vi en måte å ta innholdet på denne gjengitte siden og sende den til brukeren. Denne prosessen kalles pre-rendering av innholdet, og det er avgjørende for å oppnå god Vinkel SEO. Det finnes flere metoder for å utføre pre-rendering. I neste avsnitt vil vi utforske en av dem.

Å Forstå behovet for pre-rendering

Pre-rendering betyr i hovedsak AT HTML-innholdet på siden vil bli kompilert på forhånd. Dette vil sikre at tittelen og metadataene til siden er til stede når den når klientsiden. Med pre-rendering kan vi utsette det endelige HTML-innholdet til crawleren i stedet for å utsette tom HTML.

Implementere pre-rendering For Angular applikasjoner

med oppgraderinger I Angular, nå kommer den med en standardisert løsning til pre-rendering også. Prosessen er ganske enkel. Vi ville utnytte Angular Universal pakken for å støtte pre-rendering av sidene. For å legge Til Angular universal-pakken, utfør kommandoen nedenfor med prosjektnavnet du brukte da du opprettet Angular-appen.

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

dette vil skape noen filer i prosjektet og konfigurere prosjektet til å støtte pre-rendering ved hjelp Av En NodeJS server. For å kjøre dette, utfør kommandoen nedenfor.

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

denne kommandoen kompilerer, bygger statiske sider, plasserer dem i dist-mappen og serverer dem ved å kjøre En NodeJS-server. Med dette har vi sterkt forbedret Vår Vinkel SEO ved å sikre at vår søknad er bygget PÅ EN SEO-vennlig måte og alt innholdet er dynamisk gjengitt.

Validere SEO-vennlig Angular SPA

for å validere gjennomføringen, kan du gå til nettleseren og vise sidekilden for hver side. Nå vil du kunne se at nettleseren gjengir det nøyaktige HTML-innholdet som du forventer det. Med dette etablerte vi vår implementering av en enkel unstyled blogg med EN SEO-vennlig gjengivelse På Angular framework. Med ButterCMS kan du gjøre mye mer som dynamisk å hente SEO-kodene, meta-beskrivelsene og til og med selve sideinnholdet. Sjekk ut Vår Angular API-dokumentasjon for å lære mer.

Registrer deg for å motta artikler og opplæringsprogrammer på Angular SEO.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.