Vinkelrammen er en strukturel javascript-baseret ramme til internetapplikationer. Det bruges til at oprette dynamiske hjemmesider med indhold, der gengives via internettjenester. Den kantede ramme er meget udviklervenlig. Det har eksisteret i flere år og har akkumuleret et stærkt samfund af værktøjer og værktøjer, herunder vinkel CMS-værktøjer, backend-rammer og meget mere.

Vinkeløkosystemet

applikationer bygget ved hjælp af Vinkelrammen kaldes single Page Applications (SPAs) på grund af den måde, de fungerer på. En Vinkelapplikation, når den først er indlæst, gengiver andre sider dynamisk uden at genindlæse siderne igen. Denne oplevelse leveres med kraften i den kantede javascript-ramme. Det ændrer siderne dynamisk ved at køre javascript-kode eller ved kun at indlæse det krævede indhold. Dette giver brugeren en jævn oplevelse uden at vente på, at en genindlæsning skal ske. Vinkelsteder kan dog lide negative virkninger på deres søgemaskineoptimering (SEO).

i denne artikel formulerer vi, hvordan Vinkelapplikationer har brug for særlig SEO-behandling, og vi leverer nogle specifikke implementeringsinstruktioner for at lette god vinkel SEO.

forståelse af søgemaskinekrydsere og SEO

før vi adresserer løsningen, lad os forstå, hvordan søgemaskinekrydsere (eller bots) faktisk fungerer. Søgemaskiner rundt om i verden kravler gennem dine hjemmesider for at forstå siderne og slutmålet for din virksomhed. Til dette læser kryberne gennem metadataene på siderne, såsom titel, beskrivelse, billedkoder og kategorier. Disse metadata skal være forskellige for hver side for at give søgemaskiner mulighed for at forstå hver sides hensigt.

traditionelle SEO - søgesøgningsresultater

en søgemaskinbot når en bestemt side, finder hyperlinks på siden, læser metadataene på siden og begynder at krydse gennem hyperlinks. Det fortsætter med at gentage denne proces på din hjemmeside, indtil den ikke kan finde nye links. Under denne proces, botten henter det statiske indhold på din hjemmeside og forstår siden. Således bliver det vigtigt at maksimere detaljerne på hver side i metadata og statisk indhold.

vores Angular CMS muliggør dynamisk indhold, som dine marketingfolk kan opdatere.

SEO er blevet en af de vigtigste investeringer for enhver online forretning i dag. Tidligere var de internetapplikationer, der blev udviklet, ret enkle og indeholdt for det meste statiske sider. Disse sider indeholdt alle de krævede oplysninger, der var forudkodet i dem. Efterhånden som udviklingen af internetapplikationer udviklede sig, gik vi ind i en æra med dynamisk indholdsgengivelse, hvor indholdet til siderne gemmes et eller andet sted og hentes efter behov.

der er to måder at gøre dette på:

  1. server-side rendering
  2. klient-side rendering

på grund af manglen på sofistikerede klient-side rendering rammer i fortiden, server-side rendering af sider var tendensen. Der var mange sprog og rammer til at håndtere det samme. For eksempel gør PHP, Java Spring, NodeJS med Styr og andre rammer siderne på forhånd og sender kun det almindelige HTML-indhold til frontend.

denne tilgang sikrer, at siden har de rigtige metatags og alt det indhold, der gengives, før det modtages af søgemaskinens larvebånd. Derfor var konventionelle applikationer praktisk talt enkle, når det kom til SEO. Imidlertid, de havde helt sikkert en ulempe med længere indlæsningstider. Med avancerede servere blev det vanskeligt at behandle tusinder af anmodninger om sider. Dette bragte frontend rammer som Angular ind i billedet.

SEO for Single Page Applications (SPAs)

en enkelt sideapplikation er et koncept, hvor applikationsbaselayoutet kun indlæses en gang, og resten af siderne og komponenterne indlæses kun efter behov. Dette gøres muligt med Javascript-kraften, der dynamisk bestemmer, hvilket indhold der kræves, henter dataene og gengiver det i det ønskede format.

vores Angular CMS muliggør dynamisk indhold, som dine marketingfolk kan opdatere.

fordele ved en enkelt sideapplikation

på grund af dens dynamiske karakter har en enkelt sideapplikation mange iboende fordele forbundet med den. Nogle af disse er angivet nedenfor:

  • hurtigere overgangstid, når applikationen er indlæst
  • glattere oplevelser sammenlignet med en konventionel internetapplikation
  • mindre belastning på hjemmesidens behandling af siderne
  • hurtigere udviklingstid med sofistikerede rammer som Angular

på trods af disse fordele er en væsentlig udfordring med enkeltsideapplikationer SEO.

Angular SEO challenges

som forstået genindlæser Angular ikke siderne, medmindre det udtrykkeligt bliver bedt om det. Angular understøtter ændring af metadata for siderne dynamisk, men det afhænger helt af JavaScript. Som diskuteret før underholder søgemaskinerne normalt ikke Javascript. Dette kan medføre, at Vinkelapplikationer mislykkes i at gengive det rigtige indhold eller metadata.

Angular SEO - søgemaskineresultater

men i årenes løb har Angular SEO udviklet sig, og samfundet har bragt en løsning for at omgå dette. Løsningen giver os mulighed for at oprette statiske sider ud af kantede sider. Disse statiske sider indeholder de rigtige metadata og pre-renderet indhold. Senere i denne artikel vil vi dykke ned i denne proces for at forstå de involverede udfordringer og implementere taktik for at optimere vinkel SEO.

Angular SEO: udvikling af søgevenlige sider

før vi begynder at opbygge en fungerende Angular SEO-løsning, lad os starte med at oprette en tom Angular JS-applikation.

ng new seo-friendly-app

kommandoen opretter en frisk vinkel JS-applikation, hvor vi opretter en simpel startside og blogside, gengiver noget indhold på blogsiden ved hjælp af ButterCMS API ‘ er og gør dem SEO-venlige.

lad os starte med at oprette sider og ruter til det samme. Udfør nedenstående kommandoer i terminalen for at oprette dine hjemme-og blogsider.

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

dette vil oprette komponenterne og importere dem til appen.modul.ts-fil. Tilføj nu siderne til routingmodulet for at give os mulighed for at rute til disse sider. Rediger 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 { }

ovenstående kode kortlægger de respektive komponenter med deres ruter og sætter HomeComponent som standardkomponent. Nu, ændre app.komponent.html-fil til kun at indeholde en enkelt linje kode.

<router-outlet></router-outlet>

endelig skal du køre applikationen ved hjælp af nedenstående kommando og kontrollere, at din applikation er konfigureret korrekt. Når kommandoen går igennem, kan du ramme URL localhost:4200 for at sikre, at tingene er sat fint op. Du skal se teksten”hjemmearbejde!”.

ng serve

Lad os nu tilføje en overskrift, der giver os mulighed for at navigere gennem siderne. Opret en overskriftskomponent ved hjælp af nedenstående kommando.

ng g c header --skipTests=true

Næste, ændre indholdet af overskriften.komponent.html til at indeholde navigationselementerne.

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

endelig har du en komplet applikation, hvor du har to sider og en simpel ustylet navigation, der giver dig mulighed for at flytte mellem siderne. Lad os nu analysere denne applikation ud fra et SEO-perspektiv. Højreklik på bro.ser og vælg “Vis sidekilde”. Du bør være i stand til at se, hvordan søgemaskinerne vil se din side uden Javascript. Koden ligner nedenstående uddrag.

<!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 nu til blogsiden og udfør den samme handling og læg mærke til sidens indhold. Det er ens. Dette inkluderer sidetitel såvel som krop. Dette skyldes, at Angular ændrer din DOM ved hjælp af javascript.

oprettelse af dynamiske sider

hermed lykkedes det os at implementere dette på de statiske sider. Lad os nu gøre vores blogs og blog indhold side ved hjælp ButterCMS API. Dette giver os mulighed for at udføre SEO på både statisk og dynamisk indhold. Før du starter med det, skal du registrere en gratis prøvekonto hos ButterCMS for nemt at kunne oprette dynamisk indhold.

for at gøre dette, lad os installere ButterCMS plugin ved hjælp af NPM.

npm install --save buttercms

når det er installeret, lad os oprette en servicefil på stien services/butterCMS.service.ts og sætte i nedenstående indhold inde i filen.

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

Udskift dit token i ovenstående kode. Denne servicefil sikrer, at token styres globalt i en enkelt fil. Vi kan importere denne fil, hvor vi har brug for at bruge ButterCMS-tjenesterne. Lad os nu hurtigt implementere nedenstående kode i bloggen.komponent.ts-fil for at få en liste over indlæg.

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 til bro.ser og inspicer konsoludgangen i konsollen. Du skal kunne se listen over dine indlæg i bro.ser-konsollen. Som du kan se i kodestykket nedenfor, viser dette to af de indlæg, jeg har oprettet til denne tutorial.

lad os nu gengive dette indhold på blogsiden. For at gøre det skal du opdatere din blog.komponent.html-fil med nedenstående kode:

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

dette vil gøre indlæg fra din ButterCMS platform på hjemmesiden. Lad os nu forstå, hvordan du indstiller en brugerdefineret titel og metatags for hver side.

Indstilling af titel og metatags til Angular SEO

Angular forstår dette problem og har allerede en løsning på dette. For at tilføje metadata og ændre sidetitlen dynamisk er alt hvad du skal gøre at bruge disse moduler fra Angular. Opdater koden til dit hjem.komponent.ts-fil med nedenstående. Udfør lignende ændringer på din blog.komponent.også ts.

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 ændringer er gemt, skal du observere titlen på fanen. Det ændrer sig dynamisk, når du navigerer gennem sider. Derudover, hvis du inspicerer koden i bro.ser-konsollen, vil du se, at de tilsvarende metadata også er vedhæftet. Men hvis du tjekker sidekilden, er indholdet stadig det samme. Dette betyder, at hvis Javascript er tilladt, kan vi generere en dynamisk titel og meta, men ikke uden den.

således har vi brug for en måde at tage indholdet af denne gengivne side og sende det til brugeren. Denne proces kaldes pre-rendering af indholdet, og det er afgørende for at opnå god vinkel SEO. Der er flere metoder til at udføre pre-rendering. I det næste afsnit vil vi udforske en af dem.

forståelse af behovet for pre-rendering

Pre-rendering betyder i det væsentlige, at HTML-indholdet på siden vil blive udarbejdet på forhånd. Dette vil sikre, at sidens titel og metadata er til stede, når den når klientsiden. Med pre-rendering kan vi udsætte det endelige HTML-indhold for krybben i stedet for at udsætte blank HTML.

implementering af pre-rendering til Vinkelapplikationer

med opgraderingerne i Angular kommer det nu også med en standardiseret løsning til pre-rendering. Processen er ret simpel. Vi ville udnytte Angular Universal-pakken til at understøtte pre-rendering af siderne. For at tilføje Angular universal-pakken skal du udføre nedenstående kommando med det projektnavn, du brugte, mens du oprettede din Angular-app.

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

dette vil oprette nogle filer i projektet og konfigurere dit projekt til at understøtte pre-rendering ved hjælp af en NodeJS-server. For at køre dette skal du udføre nedenstående kommando.

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

denne kommando kompilerer, bygger dine statiske sider, placerer dem i dist-mappen og tjener dem ved at køre en NodeJS-server. Med dette har vi i høj grad forbedret vores vinkel SEO ved at sikre, at vores applikation er bygget på en SEO-venlig måde, og alt dets indhold gengives dynamisk.

validering af din SEO-venlige Angular SPA

for at validere implementeringen kan du gå til bro.ser og se sidekilde for hver side. Nu vil du være i stand til at se, at bro.ser gengiver det nøjagtige HTML-indhold, som du ville forvente det. Med dette etablerede vi vores implementering af en simpel unstyled blog med en SEO-venlig gengivelse på Vinkelramme. Med ButterCMS kan du gøre meget mere som dynamisk at hente SEO-tags, metabeskrivelser og endda selve sideindholdet. Se vores Angular API-dokumentation for at lære mere.

Tilmeld dig for at modtage artikler og tutorials om Angular SEO.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.