The playground

More information here

Angular Universal: wat u moet weten voor SEO

Meld u aan voor onze dagelijkse samenvattingen van het steeds veranderende search marketing landschap. opmerking: door dit formulier in te dienen, gaat u akkoord met de voorwaarden van Third Door Media. Wij respecteren uw privacy. John E Lincoln op 1 februari 2019 om 9:53 uur Categories:All Things SEO Column, Channel: SEO Als u Angular gebruikt […]

Meld u aan voor onze dagelijkse samenvattingen van het steeds veranderende search marketing landschap.

opmerking: door dit formulier in te dienen, gaat u akkoord met de voorwaarden van Third Door Media. Wij respecteren uw privacy.

John E Lincoln op 1 februari 2019 om 9:53 uur

  • Categories:All Things SEO Column, Channel: SEO
  • Als u Angular gebruikt om uw website van stroom te voorzien, dan hebt u een extra horde over te steken als het gaat om SEO. Gelukkig maakt Angular Universal het gemakkelijk om er overheen te springen.

    Houd er rekening mee dat” gemakkelijk ” hier een relatieve term is. Er is nogal wat technische tovenarij bij betrokken.

    u zult vrijwel zeker een ontwikkelteam erbij moeten betrekken.

    maar zodra het eindproduct is afgeleverd, zal uw site geoptimaliseerde pagina ‘ s bevatten die zoekmachines gemakkelijk kunnen vinden en indexeren.

    In deze gids zal ik Angular Universal uitleggen en waarom het belangrijk is voor marketeers.

    het SEO probleem

    hoek is een fantastisch kader voor het leveren van modulaire, gebruiksvriendelijke web apps. Helaas, het is een beetje vijandig voor SEO.

    dat is om twee redenen.

    ten eerste vertrouwt Angular sterk op script om inhoud te leveren. Als gevolg daarvan ,sommige zoek bots niet “zien” de inhoud die een gebruiker ziet.

    kijk eens naar De hoekige Universele documentatie. Die pagina is, niet verwonderlijk, weergegeven met hoekig.

    terwijl u naar beneden scrolt, ziet u heel wat inhoud. Je zou denken dat het allemaal indexeerbaar is.

    niet noodzakelijk. Klik met de rechtermuisknop op de pagina en selecteer “view page source” in het contextmenu dat verschijnt.

    Er zijn slechts 100 regels broncode. Nergens ziet u de inhoud die u zag toen u de pagina normaal bekeken.

    dat, in een notendop, is het probleem met hoek. Menselijke bezoekers zullen de inhoud zien, maar zoekrobots zullen de bron zien.

    en de bron heeft de inhoud niet!

    Er is nog een SEO probleem: snelheid. Hoekige apps vaak niet snel laden.

    sommige sites zullen een paar seconden lang een leeg scherm laten zien voordat ze de startpagina tonen. Dat kan ervoor zorgen dat bezoekers zich terugtrekken als ze ongeduldig worden.

    Site snelheid is een mobiele ranking factor, zodat uw rang zal een hit als uw site niet snel laden op mobiele platforms.

    maar Google zegt …

    Google beweert dat zijn bot scriptgestuurde sites kan indexeren. Er is genoeg bewijs om dat te ondersteunen, maar het betekent niet dat je kunt voorkomen dat het gaan van de extra mijl bij het optimaliseren van een hoekige site.

    om te beginnen is Google niet de enige zoekmachine in de stad. Als u wilt dat uw hoekige app te rang op Bing en DuckDuckGo, je moet stappen ondernemen om dat te laten gebeuren.

    vervolgens kan Google sommige hoekige sites indexeren, maar niet de jouwe. Niet alle hoekige apps zijn gelijk gemaakt. De jouwe zou de uitzondering op Google ‘ s indexering algoritme.

    in mijn ervaring verliezen sites die van HTML naar hoekig bewegen massaal verkeer van de zoekmachine. In feite, ik had drie klanten komen in het afgelopen jaar waar we moesten de site te herstellen back-up na de druppels als gevolg van hoekige.

    er zijn oplossingen

    gelukkig zijn er manieren om uw hoekige site SEO vriendelijk te maken.

    een van de meest populaire opties is het gebruik van Dynamische rendering. Dat is wanneer je een tool als Puppeteer gebruiken om statische HTML-bestanden die web crawlers gemakkelijker kunnen consumeren genereren.

    configureer vervolgens uw webserver om zoekrobots naar de vooraf gerenderde pagina ‘ s te leiden terwijl menselijke bezoekers door de normale hoekige app navigeren.

    dat is een goede oplossing, maar het pakt het probleem van de snelheid nog steeds niet aan. Voor dat, zult u waarschijnlijk wilt gaan met Angular Universal.

    Wat is universeel?

    Angular Universal draait uw web-app op de server in tegenstelling tot het uitvoeren van het in de browser.

    dat is een belangrijk onderscheid. Normaal, hoekige apps zijn client-side toepassingen.

    het probleem voor zoekrobots is dat ze niet altijd client-side code “verwerken” zoals uw browser doet wanneer het u een webpagina bedient. Daarom zag je een discrepantie tussen De hoekige universele documentatiepagina en de broncode.

    Angular Universal handles server-side rendering (SSR). Het maakt vooraf de HTML-en CSS-inhoud getoond aan de gebruiker van tevoren.

    dat betekent dat een gebruiker een statische HTML-pagina zal laden in plaats van de client-side code. Hierdoor wordt de pagina sneller geladen.

    ook, omdat het statische HTML is, kunnen search bots de inhoud indexeren.

    Iedereen wint.

    waarom het belangrijk is

    als je van digitale marketing houdt, dan weet je al dat veel van de strijd gepaard gaat met online blootstelling. Dat is de reden waarom je uit te reiken naar influencers, post updates op sociale media en het optimaliseren van uw site om goed te rangschikken.

    simpel gezegd: uw site kan niet rangschikken als het niet geïndexeerd kan worden. Als Angular uw website van stroom voorziet, moet u extra stappen ondernemen om ervoor te zorgen dat de inhoud ervan in zoekmachines wordt weergegeven.

    daarom heb je een hoekige universele oplossing nodig.

    het nadeel is natuurlijk dat het geld gaat kosten. U moet een gekwalificeerd ontwikkelingsteam inhuren om SSR aan uw website toe te voegen.

    dat is een uitgave die meer dan zichzelf moet betalen na verloop van tijd als uw site goed gelederen voor belangrijke zoektermen met betrekking tot uw niche.

    hoe een Angular App draaien op Angular Universal

    Als u iemand bent die graag uw handen vuil maakt met code, of u wilt gewoon besparen op ontwikkelingskosten, kunt u een server-side app op uw eigen implementeren.

    voordat u dat doet, is het het beste als u een basiskennis hebt van Angular, de command-line interface (CLI), TypeScript en webservers. Anders zul je waarschijnlijk worstelen.

    de stappen om een hoekige Universele app te implementeren zijn als volgt:

    • installeer de benodigde afhankelijkheden
    • Update de Angular app
    • gebruik de CLI om een universele bundel te bouwen
    • Stel de server in om een universele bundel te draaien
    • start de app op de server

    er gebeurt nogal wat in deze vijf stappen, dus Ik zal ze elk afzonderlijk behandelen in de volgende secties.

    installeer de afhankelijkheden

    Als u ervaring hebt met Angular, dan weet u al van Node.js. Dat is de runtime die de TypeScript-code omzet in een JavaScript-app.

    Node.js wordt geleverd met een package manager, fantasieloos genaamd Node Package Manager of kortweg npm. Je zal dat gebruiken om de afhankelijkheden te installeren.

    start uw commandoregelvenster en voer de volgende code uit:

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

    geef het een paar momenten (of vele momenten) om alles te installeren.

    Update uw Angular App

    vervolgens moet u uw Angular app voorbereiden op universele implementatie. Dat omvat vier stappen:

    • universele ondersteuning toevoegen. Open je root module (meestal AppModule) en voeg een applicatie-ID toe aan de BrowserModule import. Dat doe je in de sectie” imports ” net onder de @NgModule declaratie.
    • maak de server root module aan.Vervolgens moet u een nieuwe module genaamd AppServerModule maken. Zorg ervoor dat het importeert ServerModule van de platform-server afhankelijkheid die u hebt toegevoegd in de vorige stap.
    • Maak het hoofdbestand aan. Je hebt een hoofdbestand nodig voor je universele bundel. Maak dat aan in de root (in de src-map) en exporteer de appservermodule-klasse uit dat bestand.
    • Maak een configuratiebestand aan. De appservermodule klasse heeft een configuratiebestand nodig. Maak er een in JSON-formaat. Het zou er ongeveer zo uit moeten zien:

    Maak een nieuw build doel

    uw Angular bronmap moet een bestand met de naam angular bevatten.json. Je moet dat bestand bijwerken in de “architect” sectie.

    het ziet er ongeveer zo uit:

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

    Noteer het attribuut” builder ” vier regels lager. De waarde na de dubbele punt (“server”) is de naam van de server. Je kunt dat bijwerken als je het iets anders wilt noemen.

    nu kunt u uw app bouwen. Ervan uitgaande dat je de server met de naam “server” hield, ga je gewoon naar je opdrachtregel en typ het volgende:

    ng run my-project:server

    u zou uitvoer moeten zien die er ongeveer zo uitziet:

    Datum: 2018-12-12T12:42:09.601 Z
    Hash: 1caced0e9434007fd7ac
    tijd: 4122ms
    chunk {0} main.js (main) 9.49 kB
    chunk {1} stijlen.css (styles) 0 bytes

    de server instellen

    vervolgens moet u een universele server instellen om de bundel uit te voeren. Dat is hoe je de app serialiseren en terug te keren naar de browser.

    om dat mogelijk te maken, maak je een nieuw bestand aan met de naam server.ts. In dat bestand, u zult uw App engine te definiëren.

    de details van die code vallen een beetje buiten het bereik van deze tutorial. Neem gerust een kijkje in het voorbeeld in de Angular Universal docs.

    start de app op de server

    na dit alles, bent u eindelijk op een punt waar u de app op de server kunt draaien.

    om dat te doen, stel een webpack in die de server afhandelt.ts-bestand dat u in de vorige stap hebt aangemaakt.

    noem het configuratiebestand webpack.server.configuratiebestand.js. Nogmaals, check out De hoekige Universal docs voor de exacte soort code die hoort in het bestand. Misschien moet je die code aanpassen aan je eigen naamgevingsconventie.

    als je klaar bent met het bestand, heb je twee mappen onder de dist map: browser en server.

    om de servercode uit te voeren, typt u het volgende op de opdrachtregel:

    node dist/server.js

    Gefeliciteerd! Je draait nu server-side code.

    het inpakken

    hoewel Angular ontwikkelaars in staat stelt om snel applicaties van hoge kwaliteit te produceren, speelt het niet altijd goed met de zoekmachine bots.

    gelukkig kan Angular Universal Angular app-pagina ‘ s vooraf renderen als statische HTML, zodat ze vindbaar en indexeerbaar zijn. Ze zullen ook sneller laden.

    het is altijd mijn aanbeveling geweest om een HTML-basis te hebben en hoekig te gebruiken om de andere elementen op de pagina te leveren. Ik heb het maken van deze aanbeveling over alles wat JavaScript gerelateerd sinds 2010. Dit proces van hoekige Universele is hetzelfde principe. Ik kan niet zeggen dat je veel sites hoekig en JavaScript herontwerpen hebben vernietigd. Wees voorzichtig met de jouwe en krijg altijd het doorlichten door een SEO bedrijf voor de lancering.

    Meld u aan voor onze dagelijkse samenvattingen van het steeds veranderende search marketing landschap.

    opmerking: door dit formulier in te dienen, gaat u akkoord met de voorwaarden van Third Door Media. Wij respecteren uw privacy.

    over de auteur

    John E Lincoln

    John Lincoln is CEO van Ignite Visibility, een digitaal marketingbureau en een Inc. 5000 Compagnie. Lincoln is consequent uitgeroepen tot een van de top marketing experts in de industrie. Hij is een ontvanger van de Search Engine Land “Search marketeer van het Jaar” award, uitgeroepen tot de # 1 seo consultant in de VS door Clutch.co, meest bewonderde CEO en 40 onder de 40. Lincoln heeft twee boeken geschreven (the Forecaster Method en Digital Influencer) en twee films gemaakt (SEO: The Movie en Social Media Marketing: The Movie) over digitale marketing.

    Geef een antwoord

    Het e-mailadres wordt niet gepubliceerd.