The playground

More information here

Angular Universal: HVA DU trenger Å vite FOR SEO

Registrer deg for våre daglige oppsummeringer av det stadig skiftende søkemarkedsføringslandskapet. Merk: ved å sende inn dette skjemaet, godtar Du Third Door Medias vilkår. Vi respekterer ditt privatliv. John E Lincoln februar 1, 2019 på 9:53 am Kategorier:ALLE TING SEO Kolonne, Kanal: SEO hvis du bruker Angular å drive ditt nettsted, så har du en […]

Registrer deg for våre daglige oppsummeringer av det stadig skiftende søkemarkedsføringslandskapet.

Merk: ved å sende inn dette skjemaet, godtar Du Third Door Medias vilkår. Vi respekterer ditt privatliv.

John E Lincoln februar 1, 2019 på 9:53 am

  • Kategorier:ALLE TING SEO Kolonne, Kanal: SEO
  • hvis du bruker Angular å drive ditt nettsted, så har du en ekstra hinder å krysse når DET kommer TIL SEO. Heldigvis Gjør Angular Universal det enkelt å hoppe over det.

    Husk at «lett» er et relativt begrep her. Det er ganske mye teknisk trolldom involvert.

    Du vil nesten helt sikkert trenger å få et utviklingsteam involvert.

    Men når det ferdige produktet er levert, vil nettstedet ditt tjene optimaliserte sider som søkemotorer enkelt finner og indekserer.

    i denne veiledningen skal jeg forklare Angular Universal og hvorfor det er viktig for markedsførere.

    SEO-problemet

    Angular er et fantastisk rammeverk for å levere modulære, brukervennlige webapper. Dessverre er DET litt fiendtlig FOR SEO.

    det er av to grunner.

    Først Er Angular avhengig av skript for å levere innhold. Som et resultat, noen søk roboter ikke » se » innholdet som en bruker ser.

    Ta en titt på Vinkel Universell dokumentasjon. Den siden er ikke overraskende gjengitt Med Vinkel.

    når du ruller ned, ser du ganske mye innhold. Du tror det er alt indekserbart.

    Ikke nødvendigvis. Høyreklikk på siden og velg» Vis sidekilde » fra kontekstmenyen som vises.

    det er bare 100 linjer med kildekode. Ingen steder der vil du se innholdet du så da du så på siden normalt.

    Det er i et nøtteskall problemet Med Angular. Menneskelige besøkende vil se innholdet, men søkebots vil se kilden.

    og kilden har ikke innholdet!

    DET er et ANNET SEO-problem: hastighet. Angular apps laster ofte ikke raskt.

    Noen nettsteder vil vise en tom skjerm i noen sekunder før de viser hjemmesiden. Det kan føre til at besøkende kausjon som de blir utålmodig.Nettstedshastighet er en mobil rangeringsfaktor, slik at rangen din vil ta en hit hvis nettstedet ditt ikke lastes raskt på mobile plattformer.

    Men Google sier …

    Google hevder at boten kan indeksere skriptdrevne nettsteder. Det er rikelig med bevis for å støtte det, men det betyr ikke at du kan unngå å gå den ekstra milen når du optimaliserer Et Vinkelområde.For det første Er Google Ikke Den eneste søkemotoren i byen. Hvis Du vil At Vinkelappen din skal rangere På Bing og DuckDuckGo, må du ta skritt for å få det til å skje.

    Neste, Det Kan være Slik At Google kan indeksere Noen Kantete nettsteder, men ikke din. Ikke alle Kantete apps er skapt like. Din kan være unntaket Til Googles indekseringsalgoritme.I min erfaring, nettsteder som flytter FRA HTML Til Kantete løs massiv trafikk fra søkemotor mesteparten av tiden. Faktisk, jeg har hatt tre klienter kommer i løpet av det siste året hvor vi måtte fikse området opp igjen etter dråpene På Grunn Av Angular.

    det finnes løsninger

    Heldigvis finnes det måter å gjøre Ditt Kantete NETTSTED SEO vennlig.

    et av de mest populære alternativene er å bruke dynamisk gjengivelse. Det er da du bruker et verktøy som Puppeteer til å generere statiske HTML-filer som web crawlere lettere kan konsumere.

    konfigurer deretter webserveren din til å dirigere søkebots til de forhåndsgjengitte sidene mens menneskelige besøkende navigerer rundt Den normale Angular-appen.

    Det er en anstendig løsning, men det løser fortsatt ikke hastighetsproblemet. For det vil du sannsynligvis ønske Å gå med Angular Universal.

    Hva Er Vinkel Universell?

    Angular Universal kjører webappen din på serveren i motsetning til å kjøre den i nettleseren.

    det er en viktig forskjell. Normalt Er Angular apps klient-side applikasjoner.

    problemet for søkebots er at de ikke alltid «behandler» klientkoden som nettleseren din gjør når den serverer deg en nettside. Det er derfor du så en uoverensstemmelse mellom Angular Universal documentation-siden og kildekoden.

    Vinkel Universal håndterer server-side gjengivelse (SSR). DET pre-gjengir HTML og CSS innhold vist til brukeren på forhånd.

    det betyr at en bruker vil laste inn en statisk HTML-side i stedet for klientsiden kode. Som et resultat vil siden lastes raskere.

    også, Fordi det er statisk HTML, søk roboter kan indeksere innholdet.

    alle vinner.

    Hvorfor det er viktig

    Hvis du er i digital markedsføring, så du allerede vet at mye av kampen innebærer å få eksponering online. Det er derfor du når ut til influencers, legger ut oppdateringer på sosiale medier og optimaliserer nettstedet ditt for å rangere godt.Enkelt sagt: nettstedet ditt kan ikke rangere hvis det ikke kan indekseres. Hvis Angular driver nettstedet ditt, må du ta ekstra skritt for å sikre at innholdet vises i søkemotorer.

    det er derfor Du trenger En Vinkel Universell løsning.

    ulempen er selvfølgelig at det kommer til å koste penger. Du må ansette et kvalifisert utviklingsteam for å legge TIL SSR på nettstedet ditt.

    det er en utgift som bør mer enn betale for seg selv over tid hvis nettstedet ditt rangerer godt for viktige søkeord relatert til din nisje.

    slik kjører Du En Angular App På Angular Universal

    hvis du er noen som liker å få hendene skitne med kode, eller du bare vil spare på utviklingskostnader, kan du distribuere en server-side app på egen hånd.

    før du gjør det, er det best hvis du har en grunnleggende forståelse Av Angular, kommandolinjegrensesnittet (cli), TypeScript og webservere. Ellers vil du sannsynligvis kjempe.

    trinnene for å distribuere En Vinkel Universell app er som følger:

    • Installer de nødvendige avhengighetene
    • Oppdater Vinkelappen
    • Bruk CLI til å bygge En Universell bunt
    • Sett opp serveren til å kjøre En Universell bunt
    • Kjør appen på serveren

    Det skjer ganske mye i de fem trinnene, så jeg dekker dem hver i sin tur i de følgende avsnittene.

    Installer avhengighetene

    hvis du har noen erfaring Med Angular, vet du allerede Om Node.js. Det er kjøretiden som transporterer TypeScript-koden til En JavaScript-app.

    Node.js kommer med en pakkebehandling, unimaginatively kalt Node Package Manager eller npm for kort. Du bruker det til å installere avhengighetene.

    Brann opp kommandolinjevinduet og kjør følgende kode:

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

    Gi det et øyeblikk (eller mange øyeblikk) for å installere alt.

    Oppdater Angular-Appen

    deretter må Du klargjøre Angular-appen For Universell distribusjon. Det innebærer fire trinn:

    • Legg Til Universell støtte. Åpne rotmodulen (Vanligvis AppModule) og legg til en program-ID Til BrowserModule import. Du gjør det i delen» import » like under @ NgModule-erklæringen .
    • Opprett serverrotmodulen.Deretter må du opprette En ny modul som heter AppServerModule. Kontroller at det importerer ServerModule fra plattform-server avhengighet som du la til i forrige trinn.
    • Opprett hovedfilen. Du trenger en hovedfil for Din Universelle bunt. Opprett det i roten (i src-mappen) og eksporter AppServerModule-klassen fra den filen.
    • Opprett en config-fil. AppServerModule-klassen trenger en config-fil. Lag en I JSON-format. Det skal se slik ut:

    Opprett et nytt byggemål

    Din Vinkelkildekatalog skal inneholde en fil som heter angular.json. Du må oppdatere denne filen i delen «arkitekt».

    Det vil se omtrent slik ut:

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

    Merk» builder » attributtet fire linjer ned. Verdien etter kolon («server») er navnet på serveren. Du kan oppdatere det hvis du vil nevne det noe annet.

    nå kan du bygge din app. Forutsatt at du holdt serveren kalt «server», bare gå over til kommandolinjen og skriv inn følgende:

    ng kjør mitt prosjekt:server

    du bør se utdata som ser omtrent slik ut:

    Dato: 2018-12-12t12:42:09.601 z
    hash: 1caced0e9434007fd7ac
    tid: 4122ms
    blings {0} hoved.js (hoved) 9.49 kB
    blings {1} stiler.css (styles) 0 byte

    Sett opp serveren

    Neste må du sette Opp En Universell server for å kjøre bunten. Slik serialiserer du appen og returnerer den til nettleseren.

    for å få det til å skje, opprett en ny fil som heter server.ts. Innenfor den filen definerer du app engine.

    detaljene i den koden er litt utenfor omfanget av denne opplæringen. Ta gjerne en titt på eksemplet I Angular Universal docs.

    Kjør appen på serveren

    etter alt dette er du endelig på et punkt der du kan kjøre appen på serveren.

    for å gjøre det, sett opp en webpack som håndterer serveren.ts-filen du opprettet i forrige trinn.

    Navn på config-filen webpack.server.konfig.js. Igjen, sjekk Ut Angular Universal docs for den eksakte typen kode som tilhører filen. Du må kanskje tilpasse den koden til din egen navnekonvensjon.

    når du Er ferdig med filen, har du to mapper under dist-mappen: nettleser og server.

    for å kjøre serverkoden, skriv bare inn følgende på kommandolinjen:

    node dist / server.js

    Gratulerer! Du kjører nå server – side kode.

    Wrapping it up

    Selv Om Angular gjør det mulig for utviklere å raskt produsere applikasjoner av høy kvalitet, spiller Det ikke alltid pent med søkemotorbots.Heldigvis Kan Angular Universal pre-gjengi Angular app-sider som statisk HTML, slik at de kan oppdages og indekseres. De vil også laste raskere.

    Det har alltid vært min anbefaling å ha EN HTML-base og bruke Angular for å levere de andre elementene på siden. Jeg har gjort denne anbefalingen om Noe JavaScript relatert siden 2010. Denne Prosessen Med Vinkel Universell er den samme rektor. Jeg kan ikke fortelle deg at mange nettsteder Angular Og JavaScript redesigner har ødelagt. Vær forsiktig med din og alltid få det vetting AV EN SEO selskap før lansering.

    Registrer deg for våre daglige oppsummeringer av det stadig skiftende søkemarkedsføringslandskapet.

    Merk: ved å sende inn dette skjemaet, godtar Du Third Door Medias vilkår. Vi respekterer ditt privatliv.

    Om Forfatteren

    John E Lincoln

    John E Lincoln Er ADMINISTRERENDE DIREKTØR I Ignite Visibility, et digitalt markedsføringsbyrå og En Inc. 5000 selskap. Lincoln er konsekvent kåret til en av de beste markedsføring eksperter i bransjen. Han har vært en mottaker Av Search Engine Land» Søk Markedsfører Av Året » award, kalt # 1 SEO konsulent I USA av Clutch.co, mest beundret ADMINISTRERENDE DIREKTØR og 40 under 40. Lincoln har skrevet to bøker (Forecaster Method Og Digital Influencer) og laget to filmer (SEO: The Movie og Social Media Marketing: The Movie) om digital markedsføring.

    Legg igjen en kommentar

    Din e-postadresse vil ikke bli publisert.