The playground

More information here

Angular Universal: vad du behöver veta för SEO

registrera dig för våra dagliga återblickar av det ständigt föränderliga sökmarknadsföringslandskapet. Obs: Genom att skicka in detta formulär godkänner du Third Door Medias villkor. Vi respekterar din integritet. John E Lincoln den 1 februari 2019 kl 9:53 kategorier:alla saker SEO kolumn, kanal: SEO om du använder Angular för att driva din webbplats har du ett […]

registrera dig för våra dagliga återblickar av det ständigt föränderliga sökmarknadsföringslandskapet.

Obs: Genom att skicka in detta formulär godkänner du Third Door Medias villkor. Vi respekterar din integritet.

John E Lincoln den 1 februari 2019 kl 9:53

  • kategorier:alla saker SEO kolumn, kanal: SEO
  • om du använder Angular för att driva din webbplats har du ett extra hinder att korsa när det gäller SEO. Lyckligtvis gör Angular Universal det enkelt att hoppa över det.

    Tänk på att ”lätt” är en relativ term här. Det finns en hel del tekniska trollkarlar inblandade.

    Du kommer nästan säkert att behöva få ett utvecklingsteam involverat.

    men när den färdiga produkten har levererats kommer din webbplats att tjäna optimerade sidor som sökmotorer enkelt hittar och indexerar.

    i den här guiden förklarar jag Angular Universal och varför det är viktigt för marknadsförare.

    SEO-problemet

    Angular är ett fantastiskt ramverk för att leverera modulära, användarvänliga webbappar. Tyvärr är det lite fientligt mot SEO.

    det är av två skäl.

    För det första är Angular starkt beroende av skript för att leverera innehåll. Som ett resultat ”ser” vissa sökrobotar inte innehållet som en användare ser.

    ta en titt på den vinklade universella dokumentationen. Den sidan är inte överraskande gjord med Angular.

    När du bläddrar ner ser du en hel del innehåll. Man skulle kunna tro att allt är indexerbart.

    inte nödvändigtvis. Högerklicka på sidan och välj ”Visa sidkälla” från snabbmenyn som visas.

    det finns bara 100 rader källkod. Ingenstans där ser du innehållet som du såg när du tittade på sidan normalt.

    det är i ett nötskal problemet med Angular. Mänskliga besökare kommer att se innehållet, men sökrobotar kommer att se källan.

    och källan har inte innehållet!

    det finns ett annat SEO-problem: hastighet. Angular-appar laddas ofta inte snabbt.

    vissa webbplatser visar en tom skärm i några sekunder innan startsidan visas. Det kan leda till att besökare borgar när de blir otåliga.

    webbplatshastighet är en mobil rankningsfaktor så din rang kommer att ta en träff om din webbplats inte laddas snabbt på mobila plattformar.

    men Google säger …

    Google hävdar att dess bot kan indexera skriptdrivna webbplatser. Det finns gott om bevis för att stödja det, men det betyder inte att du kan undvika att gå den extra milen när du optimerar en Vinkelplats.

    till att börja med är Google inte den enda sökmotorn i stan. Om du vill att din Angular-app ska rankas på Bing och DuckDuckGo måste du vidta åtgärder för att få det att hända.

    därefter kan det vara så att Google kan indexera vissa vinklade webbplatser, men inte din. Inte alla vinklade appar skapas lika. Din kan vara undantaget från Googles indexeringsalgoritm.

    enligt min erfarenhet, webbplatser som flyttar från HTML till vinkel lös massiv trafik från sökmotorn en majoritet av tiden. Faktum är att jag har haft tre kunder som kommer in under det senaste året där vi var tvungna att fixa webbplatsen igen efter dropparna på grund av Angular.

    det finns lösningar

    lyckligtvis finns det sätt att göra din vinklade webbplats SEO-vänlig.

    ett av de mer populära alternativen är att använda dynamisk rendering. Det är då du använder ett verktyg som Puppeteer för att generera statiska HTML-filer som webbsökare lättare kan konsumera.

    konfigurera sedan din webbserver för att rikta sökrobotar till de förrenderade sidorna medan mänskliga besökare navigerar runt den normala Vinkelappen.

    det är en anständig lösning, men det tar fortfarande inte upp hastighetsproblemet. För det vill du förmodligen gå med Angular Universal.

    Vad är Angular Universal?

    Angular Universal kör din webbapp på servern i motsats till att köra den i webbläsaren.

    det är en viktig skillnad. Normalt är Angular-appar applikationer på klientsidan.

    problemet för sökrobotar är att de inte alltid ”bearbetar” kod på klientsidan som din webbläsare gör när den serverar en webbsida. Därför såg du en skillnad mellan Angular Universal documentation-sidan och dess källkod.

    Angular Universal hanterar rendering på serversidan (SSR). Det Pre-gör HTML och CSS innehåll som visas för användaren i förväg.

    det betyder att en användare laddar en statisk HTML-sida istället för kod på klientsidan. Som ett resultat laddas sidan snabbare.

    också, eftersom det är statisk HTML, kan sökrobotar indexera innehållet.

    alla vinner.

    varför det är viktigt

    Om du är i digital marknadsföring, då vet du redan att mycket av slaget innebär att få exponering på nätet. Det är därför du når ut till influencers, publicerar uppdateringar på sociala medier och optimerar din webbplats för att rankas bra.

    enkelt uttryckt: din webbplats kan inte rankas om den inte kan indexeras. Om Angular driver din webbplats måste du vidta extra steg för att se till att innehållet visas i sökmotorer.

    det är därför du behöver en vinkel universell lösning.

    nackdelen är naturligtvis att det kommer att kosta pengar. Du måste anställa ett kvalificerat utvecklingsteam för att lägga till SSR på din webbplats.

    det är en kostnad som borde mer än betala för sig själv över tiden om din webbplats rankas bra för viktiga söktermer relaterade till din nisch.

    hur man kör en Angular App på Angular Universal

    Om du är någon som gillar att få händerna smutsiga med kod, eller om du bara vill spara på utvecklingskostnader, kan du distribuera en server-side app på egen hand.

    innan du gör det är det bäst om du har en grundläggande förståelse för Angular, command-line interface (CLI), TypeScript och webbservrar. Annars kommer du troligen att kämpa.

    stegen för att distribuera en Angular Universal app är följande:

    • installera nödvändiga beroenden
    • uppdatera Angular-appen
    • använd CLI för att bygga en universell bunt
    • Ställ in servern för att köra en universell bunt
    • Kör appen på servern

    det händer en hel del i de fem stegen, så jag täcker dem i tur och ordning i följande avsnitt.

    installera beroenden

    Om du har någon erfarenhet av Angular, vet du redan om Node.js. Det är körtiden som transpilerar TypeScript-koden till en JavaScript-app.

    nod.js levereras med en pakethanterare, fantasilöst namngiven Node Package Manager eller npm för kort. Du använder det för att installera beroenden.

    Starta kommandoradsfönstret och kör följande kod:

    npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

    ge det några ögonblick (eller många ögonblick) för att installera allt.

    uppdatera din Angular App

    Därefter måste du förbereda din Angular app för universell distribution. Det innebär fyra steg:

    • Lägg till universellt stöd. Öppna din rotmodul (vanligtvis AppModule) och Lägg till ett program-ID i import av Webbläsarenmodule. Du gör det i avsnittet” import ” strax under @NgModule-deklarationen.
    • skapa serverns rotmodul.Därefter måste du skapa en ny modul med namnet AppServerModule. Se till att den importerar ServerModule från plattformsserverberoendet som du lade till i föregående steg.
    • skapa huvudfilen. Du behöver en huvudfil för ditt universella paket. Skapa det i roten (i src-mappen) och exportera appservermodule-klassen från den filen.
    • skapa en konfigurationsfil. Klassen AppServerModule behöver en konfigurationsfil. Skapa en i JSON-format. Det ska se ut så här:

    skapa ett nytt byggmål

    din Vinkelkällkatalog ska innehålla en fil med namnet angular.json. Du måste uppdatera den filen i avsnittet” arkitekt”.

    det kommer att se ut så här:

    ”arkitekt”: {
    ”build”: { … }
    ”server”: {
    ”builder”: ”@angular-devkit / build-angular: server”,
    ”options”: {
    ”outputPath”: ”dist/my-project-server”,
    ”main”: ”src/main.Server.ts”,
    ”tsConfig”: ”src/tsconfig.Server.json ”
    }
    }
    }

    notera attributet” builder ” fyra rader nedåt. Värdet efter kolon (”server”) är namnet på servern. Du kan uppdatera det om du vill namnge det något annat.

    Nu kan du bygga din app. Förutsatt att du behöll servern som heter ”server”, gå bara över till kommandoraden och skriv följande:

    ng kör mitt projekt:server

    Du bör se utdata som ser ut så här:

    datum: 2018-12-12t12:42:09.601 Z
    hash: 1caced0e9434007fd7ac
    tid: 4122ms
    Bit {0} Huvud.js (main) 9.49 kB
    bit {1} stilar.css (styles) 0 byte

    Ställ in servern

    Därefter måste du ställa in en universell server för att köra buntet. Det är så du serialiserar appen och returnerar den till webbläsaren.

    för att få det att hända, skapa en ny fil som heter server.ts. Inom den filen definierar du din appmotor.

    detaljerna i den koden ligger lite utanför ramen för denna handledning. Ta gärna en titt på exemplet i Angular Universal docs.

    Kör appen på servern

    Efter allt detta är du äntligen på en punkt där du kan köra appen på servern.

    för att göra det, skapa en webpack som hanterar servern.ts-fil du skapade i föregående steg.

    namnge konfigurationsfilen webpack.Server.konfiguration.js. Återigen, kolla in Angular Universal docs för den exakta typen av kod som hör hemma i filen. Du kan behöva anpassa den koden till din egen namnkonvention.

    När du är klar med filen har du två mappar under dist-mappen: webbläsare och server.

    för att köra serverkoden, skriv bara följande på kommandoraden:

    node dist/server.js

    Grattis! Du kör nu kod på serversidan.

    Wrapping it up

    Även om Angular gör det möjligt för utvecklare att snabbt producera högkvalitativa applikationer, spelar det inte alltid bra med sökmotorns bots.

    lyckligtvis kan Angular Universal Pre-render Angular app-sidor som statisk HTML så att de är upptäckbara och indexerbara. De kommer också att ladda snabbare.

    det har alltid varit min rekommendation att ha en HTML-bas och använda Angular för att leverera de andra elementen på sidan. Jag har gjort denna rekommendation om allt JavaScript relaterat sedan 2010. Denna process av vinkel Universal är samma princip. Jag kan inte säga att du har många platser vinkel och JavaScript redesigns har förstört. Var försiktig med din och alltid få det prövning av ett SEO-företag innan lanseringen.

    registrera dig för våra dagliga återblickar av det ständigt föränderliga sökmarknadsföringslandskapet.

    Obs: Genom att skicka in detta formulär godkänner du Third Door Medias villkor. Vi respekterar din integritet.

    om författaren

    John E Lincoln

    John Lincoln är VD för Ignite Visibility, en digital marknadsföringsbyrå och en Inc. 5000 företag. Lincoln är konsekvent utnämnd till en av de bästa marknadsföringsexperterna i branschen. Han har varit mottagare av Search Engine Land” Search Marketer of The Year ” – priset, som heter # 1 SEO-konsulten i USA av Clutch.co, mest beundrade VD och 40 under 40. Lincoln har skrivit två böcker (The Forecaster Method och Digital Influencer) och gjort två filmer (SEO: The Movie och Social Media Marketing: The Movie) om digital marknadsföring.

    Lämna ett svar

    Din e-postadress kommer inte publiceras.