The playground

More information here

Angular Universal: What you need to know for SEO

Sign up for our daily recaps of the alati changing search marketing landscape. Huomautus: lähettämällä tämän lomakkeen hyväksyt Third Door Median ehdot. Kunnioitamme yksityisyyttäsi. John E Lincoln on February 1, 2019 at 9:53 am Categories:All Things SEO Column, Channel: SEO Jos käytät kulmikkuutta verkkosivujesi voimanlähteenä, sinulla on ylimääräinen este ylitettävänä SEO: n suhteen. Onneksi Angular […]

Sign up for our daily recaps of the alati changing search marketing landscape.

Huomautus: lähettämällä tämän lomakkeen hyväksyt Third Door Median ehdot. Kunnioitamme yksityisyyttäsi.

John E Lincoln on February 1, 2019 at 9:53 am

  • Categories:All Things SEO Column, Channel: SEO
  • Jos käytät kulmikkuutta verkkosivujesi voimanlähteenä, sinulla on ylimääräinen este ylitettävänä SEO: n suhteen. Onneksi Angular Universalin avulla sen yli on helppo loikata.

    muista, että ”helppo” on tässä suhteellinen termi. Siinä on aika paljon teknistä taikaa mukana.

    tarvitset melko varmasti kehitystiimin mukaan.

    mutta kun valmis tuote on toimitettu, sivustosi palvelee optimoituja sivuja, jotka hakukoneet löytävät ja indeksoivat helposti.

    tässä oppaassa kerron kulmikkaasta universaalista ja miksi se on tärkeää markkinoijille.

    SEO-ongelma

    Angular on loistava kehys modulaaristen, käyttäjäystävällisten verkkosovellusten toimittamiseen. Valitettavasti se on hieman vihamielinen SEO: lle.

    siihen on kaksi syytä.

    ensinnäkin Angular nojaa vahvasti käsikirjoitukseen sisällön toimittamisessa. Tämän seurauksena jotkut hakubotit eivät ”näe” käyttäjän näkemää sisältöä.

    Tutustu kulmikkaaseen universaaliin dokumentaatioon. Tuo sivu on, yllättävää kyllä, käännetty kulmikkaasti.

    kun vierität alas, näet melko paljon sisältöä. Luulisi, että kaikki on indeksoitavissa.

    ei välttämättä. Napsauta sivua hiiren kakkospainikkeella ja valitse ”Näytä sivun lähde” näkyviin tulevasta kontekstivalikosta.

    lähdekoodia on vain 100 riviä. Et näe missään sisältöä, jonka näit, kun katselit sivua normaalisti.

    se on pähkinänkuoressa kulmikkuuden ongelma. Ihmisvieraat näkevät sisällön, mutta hakubotit näkevät lähteen.

    ja lähteellä ei ole sisältöä!

    on toinenkin SEO-ongelma: nopeus. Kulmikkaat sovellukset eivät useinkaan lataudu nopeasti.

    joillakin sivustoilla näkyy tyhjä ruutu muutaman sekunnin ajan ennen etusivun näyttämistä. Se voi saada vierailijat häipymään, kun he tulevat kärsimättömiksi.

    Sivuston nopeus on mobiili ranking tekijä, joten sijoituksesi ottaa hitin, jos sivustosi ei lataudu nopeasti mobiilialustoille.

    mutta Google sanoo…

    Google väittää bottinsa pystyvän indeksoimaan skriptipohjaisia sivustoja. On paljon todisteita tukemaan, että, mutta se ei tarkoita, että voit välttää menee ylimääräistä mailia optimoimalla Kulmikas sivusto.

    alkajaisiksi Google ei ole kaupungin ainoa hakukone. Jos haluat Kulmikas sovellus sijoitus Bing ja DuckDuckGo, sinun täytyy ryhtyä toimiin, jotta se tapahtuu.

    seuraavaksi saattaa käydä niin, että Google voi indeksoida joitain kulmikkaita sivustoja, mutta ei sinun. Kaikki kulmikkaat sovellukset eivät ole tasavertaisia. Sinun saattaa olla poikkeus Googlen indeksointi algoritmi.

    kokemukseni mukaan HTML: stä kulmikkaaseen siirtyvillä sivustoilla on suurimman osan ajasta löyhää massiivista liikennettä hakukoneesta. Itse asiassa, minulla on ollut kolme asiakasta tullut viime vuoden aikana, jossa meidän piti korjata sivuston takaisin jälkeen pudotukset takia Kulmikas.

    on olemassa ratkaisuja

    onneksi on olemassa tapoja tehdä Kulmikas sivustosi SEO ystävälliseksi.

    yksi suositummista vaihtoehdoista on dynaamisen renderöinnin käyttö. Silloin käytät työkalua, kuten nukketeatteri luoda staattisia HTML-tiedostoja, että web indeksoijat voivat helpommin kuluttaa.

    määritä sitten www-palvelimesi ohjaamaan hakurobotit valmiiksi renderöidyille sivuille, kun taas ihmisvieraat navigoivat normaalin Kulmasovelluksen ympärillä.

    tuo on asiallinen ratkaisu, mutta se ei silti ratkaise nopeusongelmaa. Siitä, sinun luultavasti kannattaa mennä Kulmikas Universal.

    mikä on Angular Universal?

    Angular Universal ajaa verkkosovelluksesi palvelimella sen sijaan, että se ajettaisiin selaimessa.

    se on tärkeä ero. Normaalisti kulmikkaat sovellukset ovat asiakaspuolen sovelluksia.

    hakubottien ongelma on se, että ne eivät aina ”käsittele” asiakaspuolen koodia, kuten selaimesi tekee, kun se palvelee WWW-sivua. Siksi näit ristiriidan Angular Universal-dokumentaatiosivun ja sen lähdekoodin välillä.

    Angular Universal käsittelee PALVELINPUOLEISTA renderöintiä (SSR). Se esittää käyttäjälle etukäteen näytetyn HTML-ja CSS-sisällön etukäteen.

    tämä tarkoittaa, että käyttäjä lataa staattisen HTML-sivun asiakaspuolen koodin sijaan. Tämän seurauksena sivu latautuu nopeammin.

    myös, koska se on staattista HTML: ää, hakubotit voivat indeksoida sisällön.

    kaikki voittavat.

    miksi se on tärkeää

    Jos digimarkkinointi kiinnostaa, silloin jo tietää, että suuri osa taistelusta liittyy näkyvyyden saamiseen verkossa. Siksi tavoittelet vaikuttajia, julkaiset päivityksiä sosiaalisessa mediassa ja optimoit sivustosi sijoituksen hyvin.

    yksinkertaisesti sanottuna: sivustosi ei voi sijoittua, jos sitä ei voi indeksoida. Jos Angular antaa virtaa verkkosivustollesi, sinun on toteutettava lisätoimia varmistaaksesi, että sen sisältö näkyy hakukoneissa.

    siksi tarvitaan Kulmikas yleisratkaisu.

    huono puoli on tietysti se, että se tulee kalliiksi. Sinun täytyy palkata pätevä kehitystiimi lisäämään SSR sivustoosi.

    se on kustannuksella, että pitäisi enemmän kuin maksaa itsensä ajan, jos sivusto sijoittuu hyvin keskeisiä hakutermejä liittyvät kapealla.

    kuinka ajaa Angular-sovellusta Angular Universalilla

    Jos olet joku, joka haluaa Liata kätesi koodilla, tai haluat vain säästää kehityskuluissa, voit ottaa palvelinpuolen sovelluksen käyttöön itse.

    ennen kuin teet sen, on parasta, jos sinulla on perustiedot Angular, command-line interface (CLI), TypeScript, ja web-palvelimet. Muuten joudut todennäköisesti kamppailemaan.

    vaiheet Angular Universal-sovelluksen käyttöönotossa ovat seuraavat:

  • asenna tarvittavat riippuvuudet
  • Päivitä Kulmasovellus
  • käytä CLI: tä rakentaaksesi universaalin paketin
  • Määritä palvelin suorittamaan universaali nippu
  • Suorita sovellus palvelimella
  • noissa viidessä vaiheessa on aika paljon meneillään, joten käsittelen niitä kutakin vuorollaan seuraavissa jaksoissa.

    Asenna riippuvuudet

    Jos sinulla on kokemusta Kulmikkuudesta, niin tiedät jo solmusta.js. Se on runtime, joka siirtää TypeScript-koodin JavaScript-sovellukseen.

    solmu.js: n mukana tulee paketinhallinta, jota kutsutaan mielikuvituksettomasti Node Package manageriksi tai lyhyemmin npm: ksi. Käytät sitä riippuvuuksien asentamiseen.

    Käynnistä komentoriviikkuna ja suorita seuraava koodi:

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

    anna sille hetki (tai monta hetkeä) asentaa kaikki.

    Päivitä Kulmasovelluksesi

    Seuraavaksi sinun on valmisteltava Kulmasovelluksesi yleiseen käyttöön. Siihen kuuluu neljä vaihetta:

    • lisää yleinen tuki. Avaa pääkäyttömoduuli (yleensä AppModule) ja lisää sovellustunnus BrowserModule-tuontiin. Teet sen ”tuonti” – osiossa juuri @NgModule-ilmoituksen alapuolella.
    • luo palvelimen juurimoduuli.Seuraava, sinun täytyy luoda uusi moduuli nimeltään AppServerModule. Varmista, että se tuo Palvelinmoduuli Alustan ja palvelimen riippuvuudesta, jonka olet lisännyt edellisessä vaiheessa.
    • luo päätiedosto. Tarvitset päätiedoston Universal bundleen. Luo se juureen (src-kansiossa) ja vie AppServerModule-Luokka kyseisestä tiedostosta.
    • luo asetustiedosto. AppServerModule-luokka tarvitsee asetustiedoston. Luo yksi JSON-muodossa. Sen pitäisi näyttää jokseenkin tältä:

    Luo uusi koontikohde

    Angular-lähdehakemistosi tulisi sisältää angular-niminen tiedosto.json. Sinun täytyy päivittää tiedosto ”arkkitehti” – osiossa.

    se näyttää jokseenkin tältä:

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

    huomaa ”rakentaja” – attribuutti neljä riviä alaspäin. Kaksoispisteen (”server”) jälkeinen arvo on palvelimen nimi. Voit päivittää sen, jos haluat nimetä sen joksikin muuksi.

    nyt voit rakentaa sovelluksesi. Olettaen, että pidit palvelimen nimeltä ”server”, vain pään yli komentoriville ja kirjoita seuraava:

    ng run my-project:server

    sinun pitäisi nähdä ulostulo, joka näyttää jokseenkin tältä:

    Date: 2018-12-12T12:42:09.601 Z
    hash: 1caced0e9434007fd7ac
    Time: 4122ms
    chunk {0} main.js (main) 9,49 kB
    chunk {1} styles.css (styles) 0 tavua

    Määritä palvelin

    Seuraavaksi sinun täytyy perustaa yleispalvelin Bundlen ajamiseksi. Näin voit sarjailla sovelluksen ja palauttaa sen selaimeen.

    tehdäksesi tämän, Luo uusi tiedosto nimeltä palvelin.ts. Sen tiedoston sisällä määrität sovellusmoottorisi.

    kyseisen koodin yksityiskohdat ovat hieman tämän opetusohjelman ulkopuolella. Voit vapaasti katsoa esimerkkiä Angular Universal docs.

    Suorita sovellus palvelimella

    kaiken tämän jälkeen Olet vihdoin pisteessä, jossa voit ajaa sovelluksen palvelimella.

    tämän tehdäksesi, määritä webpack, joka käsittelee palvelinta.ts tiedosto luotu edellisessä vaiheessa.

    nimeä asetustiedosto webpack.palvelin.määritys.js. Jälleen kerran, tarkistaa Angular Universal docs tarkka sellainen koodi, joka kuuluu tiedostoon. Sinun on ehkä sovitettava koodi omaan nimeämiskäytäntöösi.

    kun olet tehnyt tiedoston, sinulla on kaksi kansiota dist-kansion alla: selain ja palvelin.

    suorittaaksesi palvelinkoodin kirjoita komentoriville seuraava:

    node dist / server.js

    Onneksi olkoon! Käytät palvelinpuolen koodia.

    paketointi

    vaikka Angular antaa kehittäjille mahdollisuuden tuottaa nopeasti laadukkaita sovelluksia, se ei aina pelaa mukavasti hakukonebottien kanssa.

    onneksi Angular Universal voi esirenderoida Angular app-sivut staattisiksi HTML: ksi, joten ne ovat löydettävissä ja indeksoitavissa. Ne myös latautuvat nopeammin.

    se on aina ollut minun suositus HTML-pohja ja käyttää Angular toimittaa muut elementit sivulla. Olen tehnyt tämän suosituksen mitään JavaScript liittyvät vuodesta 2010. Tämä prosessi kulma Universal on sama principal. En voi kertoa sinulla on monia sivustoja Angular ja JavaScript redesigns ovat tuhonneet. Ole varovainen omasi kanssa ja hanki se aina SEO-yrityksen tarkastuksesta ennen lanseerausta.

    Rekisteröidy päivittäisiin kertauksiimme alati muuttuvasta hakumarkkinointimaisemasta.

    Huomautus: lähettämällä tämän lomakkeen hyväksyt Third Door Median ehdot. Kunnioitamme yksityisyyttäsi.

    tekijästä

    John E Lincoln

    John Lincoln on digitaalisen markkinointitoimiston Ignite Visibilityn toimitusjohtaja. 5000 komppaniaan. Lincoln on johdonmukaisesti nimetty yhdeksi alan parhaista markkinoinnin asiantuntijoista. Hän on ollut vastaanottaja hakukone maa ”Search Marketer of the Year” award, nimetty #1 SEO konsultti Yhdysvalloissa Clutch.co, ihailluin toimitusjohtaja ja 40 alle 40-vuotias. Lincoln on kirjoittanut kaksi kirjaa (The Forecaster Method ja Digital Influencer) ja tehnyt kaksi elokuvaa (SEO: The Movie ja Social Media Marketing: The Movie) digitaalisesta markkinoinnista.

    Vastaa

    Sähköpostiosoitettasi ei julkaista.