Het Angular framework is een structureel javascript-gebaseerd framework voor webapplicaties. Het wordt gebruikt om dynamische webpagina ‘ s te maken met inhoud die wordt weergegeven via webservices. Het hoekige kader is zeer Ontwikkelaar-vriendelijk. Het bestaat al enkele jaren en heeft een sterke gemeenschap van tools en hulpprogramma ‘ s opgebouwd, waaronder hoekige CMS-tools, backend-frameworks en meer.

het hoekige ecosysteem

toepassingen die met het Hoekframework zijn gebouwd, worden Single Page Applications (SPAs) genoemd vanwege de manier waarop ze functioneren. Een hoekige toepassing, eenmaal geladen, maakt andere pagina ’s dynamisch zonder de webpagina’ s opnieuw te laden. Deze ervaring wordt geleverd met de kracht van De hoekige javascript framework. Het dynamisch wijzigt de pagina ‘ s door het uitvoeren van javascript-code of door het laden van alleen de vereiste inhoud. Dit geeft de gebruiker een soepele ervaring zonder te wachten op een reload te gebeuren. Echter, hoekige sites kunnen nadelige effecten op hun zoekmachine optimalisatie (SEO) lijden.

in dit artikel articuleren we hoe hoekige toepassingen een speciale SEO-behandeling nodig hebben, en we geven enkele specifieke implementatieinstructies om een goede hoekige SEO te vergemakkelijken.

inzicht in zoekmachine crawlers en SEO

voordat we de oplossing aanpakken, laten we begrijpen hoe de zoekmachine crawlers (Of bots) eigenlijk werken. Zoekmachines over de hele wereld kruipen door uw websites om de pagina ‘ s en het einddoel van uw bedrijf te begrijpen. Hiervoor lezen De crawlers de metadata van de pagina ‘ s, zoals de titel, beschrijving, afbeeldingstags en categorieën. Deze metadata moet voor elke pagina anders zijn om zoekmachines in staat te stellen de bedoeling van elke pagina te begrijpen.

traditionele zoekmachine resultaten

een zoekmachine bot bereikt een specifieke pagina, vindt de hyperlinks op de pagina, leest de metadata op de pagina, en begint te bladeren door de hyperlinks. Het blijft herhalen dit proces op uw website totdat het niet in staat is om nieuwe links te vinden. Tijdens dit proces, de bot downloadt de statische inhoud van uw website en begrijpt de pagina. Zo wordt het belangrijk om de details van elke pagina in de metadata en statische inhoud te maximaliseren.

onze hoekige CMS maakt dynamische content mogelijk die uw marketeers kunnen bijwerken.

SEO is uitgegroeid tot een van de belangrijkste investeringen voor een online bedrijf vandaag. In het verleden waren de webapplicaties die werden ontwikkeld vrij eenvoudig en bevatten meestal statische pagina ‘ s. Deze pagina ‘ s bevatten alle benodigde informatie vooraf gecodeerd in hen. Naarmate de ontwikkeling van webapplicaties evolueerde, kwamen we in een tijdperk van dynamische inhoudweergave waarin de inhoud van de webpagina ‘ s ergens wordt opgeslagen en indien nodig wordt opgehaald.

er zijn twee manieren om dit te doen:

  1. server-side rendering
  2. Client-side rendering

vanwege het ontbreken van geavanceerde client-side rendering frameworks in het verleden, server-side rendering van pagina ‘ s was de trend. Er waren tal van talen en frameworks om hetzelfde te behandelen. Bijvoorbeeld, PHP, Java Spring, NodeJS met stuur, en andere frameworks maken de pagina ‘ s van tevoren en stuur alleen de gewone HTML-inhoud naar de frontend.

Deze aanpak zorgt ervoor dat de pagina de juiste meta-tags heeft en alle inhoud wordt weergegeven voordat deze door de zoekmachine crawler wordt ontvangen. Dus, conventionele webapplicaties waren praktisch eenvoudig als het ging om SEO. Ze hadden echter zeker een nadeel van langere laadtijden. Met low-end servers, het verwerken van duizenden verzoeken voor pagina ‘ s werd moeilijk. Dit bracht frontend frameworks als hoekig in het beeld.

SEO voor Single Page Applications (SPAs)

een single page applicatie is een concept waarbij de basislay-out van de toepassing slechts één keer wordt geladen en de rest van de pagina ‘ s en componenten alleen worden geladen als dat nodig is. Dit wordt mogelijk gemaakt met de kracht van Javascript dat dynamisch bepaalt welke inhoud nodig is, haalt de gegevens, en maakt het in het gewenste formaat.

onze hoekige CMS maakt dynamische content mogelijk die uw marketeers kunnen bijwerken.

voordelen van een toepassing met één pagina

vanwege de dynamische aard ervan heeft een toepassing met één pagina veel inherente voordelen. Enkele van deze zijn hieronder vermeld:

  • snellere overgangstijd zodra de toepassing is geladen
  • vloeiender ervaringen vergeleken met een conventionele webapplicatie
  • minder belasting op de webserver die de pagina ‘ s verwerkt
  • snellere ontwikkeltijd met geavanceerde frameworks zoals Angular

ondanks deze voordelen is SEO een belangrijke uitdaging voor toepassingen met één pagina.

Angular SEO challenges

zoals begrepen, Angular herlaadt de pagina ‘ s niet tenzij expliciet gevraagd. Angular ondersteunt verandering van metadata voor de pagina ‘ s dynamisch, maar het is volledig afhankelijk van JavaScript. Zoals eerder besproken, zoekmachine crawlers normaal gesproken niet vermaken Javascript. Dit kan ertoe leiden dat hoekige toepassingen falen in het renderen van de juiste inhoud of metadata.

Angular SEO - Search engine crawler results

echter, in de loop der jaren, Angular SEO is geëvolueerd en de Gemeenschap heeft een oplossing gebracht om dit te omzeilen. De oplossing stelt ons in staat om statische pagina ’s te maken uit hoekige pagina’ s. Deze statische pagina ‘ s bevatten de juiste metadata en vooraf weergegeven inhoud. Later in dit artikel, we zullen duiken in dit proces om de uitdagingen te begrijpen en implementeren tactiek om hoekige SEO te optimaliseren.

hoekige SEO: het ontwikkelen van zoekvriendelijke pagina ‘ s

voordat we beginnen met het bouwen van een werkende hoekige SEO-oplossing, laten we beginnen met het maken van een lege Hoekige Js-toepassing.

ng new seo-friendly-app

het commando maakt een nieuwe Hoekige Js-applicatie waar we een eenvoudige startpagina en blogpagina maken, wat inhoud op de blogpagina weergeven met ButterCMS API ‘ s en ze SEO-vriendelijk maken.

laten we beginnen met het maken van pagina ‘ s en routes voor hetzelfde. Voer de onderstaande opdrachten uit in de terminal om uw home-en blogpagina ‘ s te maken.

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

Dit maakt de componenten aan en importeert ze in de app.module.ts dossier. Voeg nu de pagina ’s toe aan de routeringsmodule zodat we naar deze pagina’ s kunnen routeren. Wijzig uw app-routing.module.ts dossier.

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

bovenstaande code geeft de respectievelijke componenten aan met hun routes en stelt HomeComponent in als de standaardcomponent. Nu, wijzig de app.component.html-bestand dat slechts één regel code bevat.

<router-outlet></router-outlet>

voer ten slotte de toepassing uit met het onderstaande commando en controleer of uw toepassing correct is ingesteld. Zodra het commando door gaat, kun je op de URL localhost:4200 drukken om er zeker van te zijn dat alles goed is ingesteld. Je zou de tekst “home works!”.

ng serve

laten we nu een header toevoegen waarmee we door de pagina ‘ s kunnen navigeren. Maak een header-component aan met het onderstaande commando.

ng g c header --skipTests=true

wijzig vervolgens de inhoud van de header.component.html om de navigatie-elementen te bevatten.

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

ten slotte hebt u een volledige toepassing met twee pagina ’s en een eenvoudige niet-gestylede navigatie die u toelaat om tussen de pagina’ s te bewegen. Nu, laten we deze toepassing te analyseren vanuit een SEO perspectief. Klik met de rechtermuisknop op de browser en selecteer “Bekijk pagina bron”. Je moet in staat zijn om te zien hoe de zoekmachine crawlers zou uw pagina te zien zonder Javascript. De code lijkt op het onderstaande fragment.

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

navigeer nu naar de blogpagina en voer dezelfde actie uit en let op de pagina-inhoud. Het is vergelijkbaar. Dit omvat zowel de titel van de pagina als de body. Dit komt omdat Angular uw DOM wijzigt met behulp van javascript.

dynamische pagina ’s aanmaken

hierbij zijn we erin geslaagd om dit te implementeren op de statische pagina’ s. Laten we nu maken onze blogs en blog content pagina met behulp van ButterCMS API. Dit zal ons toelaten om SEO uit te voeren op zowel statische als dynamische web content. Voordat u ermee begint, registreer dan een gratis proefaccount met ButterCMS in staat zijn om dynamische inhoud gemakkelijk te maken.

om dit te doen, laten we ButterCMS plugin installeren met behulp van NPM.

npm install --save buttercms

Na installatie maken we een service-bestand aan op het pad services/butterCMS.dienst.ts en zet in de onderstaande inhoud in het bestand.

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

Vervang uw token in de bovenstaande code. Dit servicebestand zorgt ervoor dat het token globaal in één bestand wordt beheerd. We kunnen dit bestand importeren waar we de ButterCMS diensten nodig hebben. Nu, laten we snel implementeren van de onderstaande code in de blog.component.ts bestand om een lijst van berichten te krijgen.

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

ga nu naar de browser en inspecteer de console-uitvoer in de console. U moet in staat zijn om de lijst van uw berichten te zien in de browser console. Zoals u kunt zien in de code fragment hieronder, Dit toont twee van de berichten die ik heb gemaakt voor deze tutorial.

laten we nu deze inhoud weergeven op de blogpagina. Om dit te doen, update je blog.component.html-bestand met onderstaande code:

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

Dit zal de berichten van uw ButterCMS platform op de webpagina weergeven. Laten we nu begrijpen hoe je een aangepaste titel en meta-tags voor elke pagina in te stellen.

titel-en metatags instellen voor Angular SEO

Angular begrijpt dit probleem en heeft hier al een oplossing voor. Om metadata toe te voegen en de paginatitel dynamisch te wijzigen, hoeft u alleen deze modules uit Hoek te gebruiken. Update de code voor uw huis.component.TS bestand met de onderstaande. Voer soortgelijke wijzigingen uit op uw blog.component.ts ook.

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

zodra deze wijzigingen zijn opgeslagen, observeert u de titel op het tabblad browser. Het verandert dynamisch als je door pagina ‘ s navigeert. Bovendien, als u de code in de browserconsole inspecteert, zult u zien dat de bijbehorende metadata ook is bijgevoegd. Echter, als u de pagina bron de inhoud is nog steeds hetzelfde. Dit betekent dat als Javascript is toegestaan, we een dynamische titel en meta kunnen genereren, maar niet zonder.

daarom hebben we een manier nodig om de inhoud van deze gerenderde pagina naar de gebruiker te sturen. Dit proces heet pre-rendering van de inhoud, en het is van cruciaal belang voor het bereiken van een goede hoekige SEO. Er zijn verschillende methoden om pre-rendering uit te voeren. In de volgende sectie, zullen we een van hen te verkennen.

inzicht in de noodzaak van pre-rendering

Pre-rendering betekent in wezen dat de HTML-inhoud van de pagina van tevoren zou worden gecompileerd. Dit zou ervoor zorgen dat de titel en metadata van de pagina aanwezig zijn wanneer deze de client-kant bereikt. Met pre-rendering kunnen we de uiteindelijke HTML-inhoud blootstellen aan de crawler in plaats van lege HTML bloot te stellen.

implementatie van pre-rendering voor Hoekapplicaties

met de upgrades in Hoek, nu wordt het geleverd met een gestandaardiseerde oplossing voor pre-rendering ook. Het proces is vrij eenvoudig. We zouden het hoekige universele pakket gebruiken om pre-rendering van de pagina ‘ s te ondersteunen. Om het Angular universal package toe te voegen, voert u het onderstaande commando uit met de projectnaam die u gebruikte tijdens het maken van uw Angular app.

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

Dit zal enkele bestanden binnen het project aanmaken en uw project configureren om pre-rendering te ondersteunen met behulp van een NodeJS-server. Voer het onderstaande commando uit om dit uit te voeren.

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

Dit commando compileert, bouwt uw statische pagina ‘ s, plaatst ze in de dist map en dient ze door het draaien van een NodeJS server. Hiermee hebben we onze hoekige SEO sterk verbeterd door ervoor te zorgen dat onze applicatie op een SEO-vriendelijke manier is gebouwd en alle inhoud dynamisch wordt weergegeven.

uw SEO-vriendelijke Angular SPA valideren

om de implementatie te valideren, kunt u naar de browser gaan en de bron van de pagina voor elke pagina bekijken. Nu, zult u in staat zijn om te zien dat de browser maakt de EXACTE HTML-inhoud zoals je zou verwachten. Hiermee hebben we onze implementatie van een eenvoudige unstyled blog met een SEO-vriendelijke rendering op hoekige framework. Met ButterCMS, kunt u veel meer doen als dynamisch ophalen van de SEO-tags, meta-Beschrijvingen, en zelfs de pagina-inhoud zelf. Bekijk onze Angular API documentatie voor meer informatie.

Meld u aan om artikelen en tutorials over hoekige SEO te ontvangen.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.