The playground

More information here

Angular Universal: hvad du behøver at vide for SEO

Tilmeld dig vores daglige resumeer af det stadigt skiftende søgemarkedsføringslandskab. Bemærk: ved at indsende denne formular accepterer du Third Door Medias vilkår. Vi respekterer dit privatliv. John E Lincoln den 1.februar 2019 kl 9:53 kategorier:alle ting SEO kolonne, kanal: SEO Hvis du bruger Angular til at drive din hjemmeside, så har du en ekstra forhindring […]

Tilmeld dig vores daglige resumeer af det stadigt skiftende søgemarkedsføringslandskab.

Bemærk: ved at indsende denne formular accepterer du Third Door Medias vilkår. Vi respekterer dit privatliv.

John E Lincoln den 1.februar 2019 kl 9:53

  • kategorier:alle ting SEO kolonne, kanal: SEO
  • Hvis du bruger Angular til at drive din hjemmeside, så har du en ekstra forhindring at krydse, når det kommer til SEO. Heldigvis gør Angular Universal det nemt at springe over det.

    Husk, at” let ” er et relativt udtryk her. Der er en hel del teknisk trylleri involveret.

    du bliver næsten helt sikkert nødt til at få et udviklingsteam involveret.

    men når det færdige produkt er leveret, vil din hjemmeside tjene optimerede sider, søgemaskiner vil nemt finde og indeksere.

    i denne vejledning forklarer jeg Angular Universal, og hvorfor det er vigtigt for marketingfolk.

    SEO-problemet

    Angular er en fantastisk ramme for levering af modulære, brugervenlige internetapps. Desværre er det lidt fjendtligt over for SEO.

    det er af to grunde.

    for det første er Angular stærkt afhængig af script for at levere indhold. Som et resultat “ser” nogle søgebots ikke det indhold, som en bruger ser.

    Tag et kig på den kantede universelle dokumentation. Denne side er ikke overraskende gengivet med Vinkel.

    Når du ruller ned, vil du se en hel del indhold. Man skulle tro, at det hele kan indekseres.

    ikke nødvendigvis. Højreklik på siden og vælg “Vis sidekilde” i den kontekstmenu, der vises.

    der er kun 100 linjer kildekode. Ingen steder derinde vil du se det indhold, du så, da du så siden normalt.

    det er i en nøddeskal problemet med Vinkel. Menneskelige besøgende vil se indholdet, men søgebots vil se kilden.

    og kilden har ikke indholdet!

    der er et andet SEO-problem: hastighed. Vinkelapps indlæses ofte ikke hurtigt.

    nogle steder viser en tom skærm i et par sekunder, før startsiden vises. Det kan få besøgende til at kautionere, da de bliver utålmodige.

    site speed er en mobil ranking faktor, så din rang vil tage et hit, hvis din hjemmeside ikke indlæses hurtigt på mobile platforme.

    men Google siger…

    Google hævder, at dens bot kan indeksere scriptdrevne sider. Der er masser af beviser til støtte for det, men det betyder ikke, at du kan undgå at gå den ekstra mil, når du optimerer et Vinkelsted.

    for det første er Google ikke den eneste søgemaskine i byen. Hvis du vil have din Angular app til at rangere på Bing og DuckDuckGo, skal du tage skridt til at få det til at ske.

    dernæst kan det være tilfældet, at Google kan indeksere nogle Vinkelsteder, men ikke dine. Ikke alle Vinkelapps oprettes ens. Din kan være undtagelsen fra Googles indekseringsalgoritme.

    i min erfaring, sites, der flytter fra HTML til kantede løs massiv trafik fra søgemaskine et flertal af tiden. Faktisk har jeg haft tre klienter kommet ind i løbet af det sidste år, hvor vi var nødt til at rette siden op igen efter dråberne på grund af Angular.

    der er løsninger

    heldigvis er der måder at gøre din Vinkelside SEO venlig.

    en af de mere populære muligheder er at bruge dynamisk gengivelse. Det er, når du bruger et værktøj som Puppeteer til at generere statiske HTML-filer, som internetsøgere lettere kan forbruge.

    konfigurer derefter din internetserver til at dirigere søgebots til de præ-gengivne sider, mens menneskelige besøgende navigerer rundt i den normale Vinkelapp.

    det er en anstændig løsning, men det løser stadig ikke hastighedsproblemet. Til det vil du sandsynligvis gå med Angular Universal.

    Hvad er vinkel Universal?

    Angular Universal kører din internetapp på serveren i modsætning til at køre den i Bro.sereren.

    det er en vigtig forskel. Normalt er Vinkelapps applikationer på klientsiden.

    problemet med søgebots er, at de ikke altid “behandler” klientsidekode, som din bro.ser gør, når den tjener dig en hjemmeside. Derfor så du en uoverensstemmelse mellem siden Angular Universal documentation og dens kildekode.

    vinkel Universal håndterer server-side rendering (SSR). Det pre-gengiver HTML og CSS indhold vist til brugeren forud for tid.

    det betyder, at en bruger vil indlæse en statisk HTML-side i stedet for klient-side kode. Som et resultat indlæses siden hurtigere.

    fordi det er statisk HTML, kan søgebots indeksere indholdet.

    alle vinder.

    hvorfor det er vigtigt

    Hvis du er til digital markedsføring, så ved du allerede, at meget af kampen indebærer at få eksponering online. Derfor når du ud til influencere, sender opdateringer på sociale medier og optimerer din side til at rangere godt.

    kort sagt: din side kan ikke rangere, hvis den ikke kan blive indekseret. Hvis Angular driver din hjemmeside, skal du tage ekstra skridt for at sikre, at dens indhold vises i søgemaskiner.

    derfor har du brug for en vinkel universel løsning.

    ulempen er selvfølgelig, at det kommer til at koste penge. Du skal ansætte et kvalificeret udviklingsteam for at tilføje SSR til din hjemmeside.

    det er en udgift, der mere end skal betale for sig selv over tid, hvis din side rangerer godt for nøglesøgeudtryk relateret til din niche.

    Sådan kører du en Angular App på Angular Universal

    Hvis du er nogen, der kan lide at få dine hænder beskidte med kode, eller du bare vil spare på udviklingsomkostninger, kan du implementere en server-side app på egen hånd.

    før du gør det, er det bedst, hvis du har en grundlæggende forståelse af Angular, kommandolinjegrænsefladen (CLI), TypeScript og internetservere. Ellers vil du sandsynligvis kæmpe.

    trinene til implementering af en Angular Universal app er som følger:

    • installer de nødvendige afhængigheder
    • Opdater Vinkelappen
    • brug CLI til at opbygge et universelt bundt
    • Opsæt serveren til at køre et universelt bundt
    • Kør appen på serveren

    der foregår en hel del i disse fem trin, så jeg dækker dem hver efter tur i de følgende afsnit.

    installer afhængighederne

    Hvis du har nogen erfaring med Angular, så ved du allerede om Node.js. Det er den runtime, der overfører TypeScript-koden til en JavaScript-app.

    Node.js leveres med en pakkehåndtering, ufatteligt navngivet Node Package Manager eller npm for kort. Du bruger det til at installere afhængighederne.

    fyr dit kommandolinjevindue op og kør følgende kode:

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

    giv det et øjeblik (eller mange øjeblikke) for at installere alt.

    Opdater din Angular App

    Dernæst skal du forberede din Angular app til universel implementering. Det indebærer fire trin:

    • Tilføj universel support. Åbn dit rodmodul (normalt AppModule), og tilføj et program-ID til Importmulighederne. Du gør det i afsnittet” import ” lige under @NgModule-erklæringen.
    • Opret serverrotmodulet.Dernæst skal du oprette et nyt modul ved navn AppServerModule. Sørg for, at den importerer ServerModule fra den platform-serverafhængighed, som du tilføjede i det foregående trin.
    • Opret hovedfilen. Du skal bruge en hovedfil til din Universal bundle. Opret det i roden (i src-mappen) og eksporter klassen AppServerModule fra den pågældende fil.
    • Opret en konfigurationsfil. Appservermodule-klassen har brug for en konfigurationsfil. Opret en i JSON-format. Det skal se sådan ud:

    Opret et nyt build-mål

    din Vinkelkildekatalog skal indeholde en fil med navnet angular.json. Du skal opdatere denne fil i afsnittet” arkitekt”.

    det vil se sådan ud:

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

    Bemærk attributten “builder” fire linjer ned. Værdien efter tyktarmen (“server”) er navnet på serveren. Du kan opdatere det, hvis du vil navngive det noget andet.

    nu Kan du bygge din app. Forudsat at du holdt serveren ved navn “server”, skal du bare gå over til din kommandolinje og skrive følgende:

    ng run my-project:server

    Du skal se output, der ser sådan ud:

    Dato: 2018-12-12T12:42:09.601
    hash: 1caced0e9434007fd7ac
    tid: 4122ms
    chunk {0} main.js (main) 9.49 kB
    chunk {1} stilarter.css (styles) 0 bytes

    Opsæt serveren

    Dernæst skal du oprette en universel server til at køre bundtet. Det er sådan, du serialiserer appen og returnerer den til bro.sereren.

    for at få det til at ske skal du oprette en ny fil kaldet server.ts. Inden for denne fil definerer du din appmotor.

    detaljerne i denne kode er lidt uden for rammerne af denne tutorial. Du er velkommen til at se på eksemplet i Angular Universal docs.

    Kør appen på serveren

    efter alt dette er du endelig på et punkt, hvor du kan køre appen på serveren.

    for at gøre det skal du oprette en internetpakke, der håndterer serveren.ts-fil, du oprettede i det foregående trin.

    navngiv konfigurationsfilen.server.konfigurationsfil.js. Endnu en gang skal du tjekke Angular Universal docs for den nøjagtige type kode, der hører til i filen. Du skal muligvis tilpasse koden til din egen navngivningskonvention.

    når du er færdig med filen, har du to mapper under dist-mappen: bro.ser og server.

    for at køre serverkoden skal du bare skrive følgende på kommandolinjen:

    node dist/server.js

    Tillykke! Du kører nu server-side kode.

    indpakning af det

    selvom Angular gør det muligt for udviklere hurtigt at producere applikationer af høj kvalitet, spiller det ikke altid pænt med søgemaskinens bots.

    heldigvis kan Angular Universal pre-render Angular app sider som statisk HTML, så de er synlige og indekserbare. De vil også indlæse hurtigere.

    det har altid været min anbefaling at have en HTML-base og bruge Angular til at levere de andre elementer på siden. Jeg har lavet denne anbefaling om noget JavaScript relateret siden 2010. Denne proces af vinkel universel er den samme hovedstol. Jeg kan ikke fortælle dig, at mange sider kantet, og JavaScript-redesign er ødelagt. Vær forsigtig med din og få det altid undersøgt af et SEO-firma inden lanceringen.

    Tilmeld dig vores daglige resumeer af det stadigt skiftende søgemarkedsføringslandskab.

    Bemærk: ved at indsende denne formular accepterer du Third Door Medias vilkår. Vi respekterer dit privatliv.

    om forfatteren

    John E Lincoln

    John Lincoln er administrerende direktør for Ignite Visibility, et digitalt marketingbureau og et Inc. 5000 selskab. Lincoln er konsekvent udnævnt til en af de bedste marketingeksperter i branchen. Han har været modtager af prisen Search Engine Land “Search Marketer of The Year”, navngivet # 1 SEO konsulent i USA af Clutch.co, mest beundrede CEO og 40 under 40. Lincoln har skrevet to bøger (Forecaster-metoden og Digital Influencer) og lavet to film (SEO: filmen og Social Media Marketing: filmen) om digital markedsføring.

    Skriv et svar

    Din e-mailadresse vil ikke blive publiceret.