The playground

More information here

Angular Universal: ce trebuie să știți pentru SEO

Înscrieți-vă pentru recapitulările noastre zilnice ale peisajului de marketing de căutare în continuă schimbare. Notă: Prin trimiterea acestui formular, sunteți de acord cu Termenii Third Door Media. Vă respectăm confidențialitatea. John E Lincoln pe februarie 1, 2019 la 9:53 AM Categorii:toate lucrurile SEO coloană, canal: SEO dacă utilizați Angular pentru a alimenta site-ul dvs., atunci […]

Înscrieți-vă pentru recapitulările noastre zilnice ale peisajului de marketing de căutare în continuă schimbare.

Notă: Prin trimiterea acestui formular, sunteți de acord cu Termenii Third Door Media. Vă respectăm confidențialitatea.

John E Lincoln pe februarie 1, 2019 la 9:53 AM

  • Categorii:toate lucrurile SEO coloană, canal: SEO
  • dacă utilizați Angular pentru a alimenta site-ul dvs., atunci aveți un obstacol suplimentar pentru a trece atunci când vine vorba de SEO. Din fericire, unghiular Universal face ușor să sari peste el.

    rețineți că „ușor” este un termen relativ aici. Există destul de un pic de vrăjitorie tehnică implicată.

    veți avea aproape sigur nevoie pentru a obține o echipă de dezvoltare implicat.dar odată ce produsul finit este livrat, site-ul dvs. va servi pagini optimizate pe care motoarele de căutare le vor localiza și indexa cu ușurință.

    în acest ghid, voi explica Angular Universal și de ce este important pentru marketing.

    problema SEO

    Angular este un cadru fantastic pentru furnizarea de aplicații web modulare, ușor de utilizat. Din păcate, este un pic ostil pentru SEO.

    asta din două motive.

    În primul rând, Angular se bazează foarte mult pe script pentru a livra conținut. Drept urmare, unii roboți de căutare nu „văd” conținutul pe care îl vede un utilizator.

    uitați-vă la documentația universală unghiulară. Această pagină este, în mod surprinzător, redată cu Angular.

    pe măsură ce derulați în jos, veți vedea destul de mult conținut. Ai crede că totul poate fi indexat.

    nu neapărat. Faceți clic dreapta pe pagină și selectați „Vizualizați sursa paginii” din meniul contextual care apare.

    există doar 100 de linii de cod sursă. Nicăieri nu veți vedea conținutul pe care l-ați văzut când ați vizualizat pagina în mod normal.

    asta, pe scurt, este problema cu Angular. Vizitatorii umani vor vedea conținutul, dar roboții de căutare vor vedea sursa.

    și sursa nu are conținutul!

    există o altă problemă SEO: viteza. Aplicațiile unghiulare de multe ori nu se încarcă rapid.

    unele site-uri vor afișa un ecran gol pentru câteva secunde înainte de a afișa pagina de pornire. Acest lucru poate determina vizitatorii să cauțiune ca ei a lua nerăbdător.

    viteza Site-ului este un factor de clasare mobil, astfel încât rangul dvs. va avea un succes dacă site-ul dvs. nu se încarcă rapid pe platformele mobile.

    dar Google spune…

    Google susține că botul său poate indexa site-urile bazate pe script. Există o mulțime de dovezi care să susțină acest lucru, dar nu înseamnă că puteți evita să mergeți în plus atunci când optimizați un site unghiular.

    Pentru început, Google nu este singurul motor de căutare din oraș. Dacă doriți ca aplicația dvs. unghiulară să se clasifice pe Bing și DuckDuckGo, va trebui să luați măsuri pentru a face acest lucru.

    în continuare, poate fi cazul în care Google poate indexa unele site-uri unghiulare, dar nu a ta. Nu toate aplicațiile unghiulare sunt create egale. A ta ar putea fi excepția de la algoritmul de indexare Google.

    Din experiența mea, Site-urile care trec de la HTML la unghiular pierd trafic masiv din motorul de căutare în majoritatea timpului. De fapt, am avut trei clienți vin în ultimul an în cazul în care am avut de a repara site-ul înapoi după picături din cauza Angular.

    există soluții

    Din fericire, există modalități de a face site-ul dvs. unghiular SEO prietenos.

    una dintre cele mai populare opțiuni este utilizarea randării dinamice. Atunci folosiți un instrument precum Puppeteer pentru a genera fișiere HTML statice pe care crawlerele web le pot consuma mai ușor.apoi, configurați-vă serverul web pentru a direcționa roboții de căutare către paginile pre-randate în timp ce vizitatorii umani navighează în jurul aplicației unghiulare normale.

    aceasta este o soluție decentă, dar încă nu abordează problema vitezei. Pentru asta, probabil că veți dori să mergeți cu Angular Universal.

    ce este universal unghiular?

    Angular Universal rulează aplicația web pe server, spre deosebire de rularea acesteia în browser.

    aceasta este o distincție importantă. În mod normal, aplicațiile Angular sunt aplicații din partea clientului.

    problema pentru roboții de căutare este că nu „procesează” întotdeauna codul din partea clientului, așa cum face browserul dvs. atunci când vă servește o pagină web. De aceea ați văzut o discrepanță între pagina de documentație universală unghiulară și codul sursă.

    Angular universal se ocupă de randare server-side (SSR). Acesta pre-face conținutul HTML și CSS prezentat utilizatorului înainte de timp.

    asta înseamnă că un utilizator va încărca o pagină HTML statică în loc de cod client-side. Ca urmare, pagina se va încărca mai repede.

    De asemenea, deoarece este HTML static, roboții de căutare pot indexa conținutul.

    toată lumea câștigă.

    De ce este important

    Dacă sunteți în marketingul digital, atunci știți deja că o mare parte din bătălie implică obținerea expunerii online. De aceea, ajungeți la influențatori, postați actualizări pe rețelele de socializare și optimizați site-ul dvs. pentru a vă clasifica bine.

    pur și simplu: site-ul dvs. nu poate fi clasat dacă nu poate fi indexat. Dacă Angular vă alimentează site-ul web, trebuie să luați măsuri suplimentare pentru a vă asigura că conținutul său apare în motoarele de căutare.

    De aceea aveți nevoie de o soluție universală unghiulară.

    dezavantajul, desigur, este că va costa bani. Va trebui să angajați o echipă de dezvoltare calificată pentru a adăuga SSR pe site-ul dvs. web.

    aceasta este o cheltuială care ar trebui să plătească mai mult de la sine în timp dacă site-ul dvs. se clasează bine pentru termenii cheie de căutare legați de nișa dvs.

    cum să rulați o aplicație Angular pe Angular Universal

    Dacă sunteți cineva căruia îi place să vă murdărească mâinile cu codul sau doriți doar să economisiți costurile de dezvoltare, puteți implementa o aplicație server-side pe cont propriu.

    înainte de a face acest lucru, este mai bine dacă aveți o înțelegere de bază a Angular, interfața liniei de comandă (CLI), TypeScript și serverele web. În caz contrar, veți lupta probabil.

    pașii pentru implementarea unei aplicații universale unghiulare sunt după cum urmează:

    • instalați dependențele necesare
    • actualizați aplicația unghiulară
    • utilizați CLI pentru a construi un pachet Universal
    • Configurați serverul pentru a rula un pachet Universal
    • rulați aplicația pe server

    se întâmplă destul de mult în acești cinci pași, așa că îi voi acoperi pe rând în secțiunile următoare.

    instalați dependențele

    Dacă aveți experiență cu Angular, atunci știți deja despre nod.js. Acesta este timpul de rulare care transpune codul TypeScript într-o aplicație JavaScript.

    nod.js vine cu un manager de pachete, numit neimaginat Node Package Manager sau NPM pe scurt. Veți folosi asta pentru a instala dependențele.

    porniți fereastra liniei de comandă și executați următorul cod:

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

    dați-i câteva momente (sau multe momente) pentru a instala totul.

    actualizați aplicația Angular

    apoi, va trebui să vă pregătiți aplicația Angular pentru implementarea universală. Aceasta implică patru pași:

    • adăugați suport Universal. Deschideți modulul rădăcină (de obicei AppModule) și adăugați un ID de aplicație la importul BrowserModule. Veți face acest lucru în secțiunea” importuri ” chiar sub declarația @NgModule.
    • creați modulul rădăcină server.Apoi, trebuie să creați un nou modul numit AppServerModule. Asigurați-vă că importă ServerModule din dependența platformă-server pe care ați adăugat-o în pasul anterior.
    • creați fișierul principal. Veți avea nevoie de un fișier principal pentru pachetul dvs. Universal. Creați asta în rădăcină (în folderul src) și exportați clasa AppServerModule din acel fișier.
    • creați un fișier de configurare. Clasa AppServerModule are nevoie de un fișier de configurare. Creați unul în format JSON. Ar trebui să arate cam așa:

    creați o nouă țintă de construire

    directorul sursă unghiular ar trebui să includă un fișier numit angular.json. Va trebui să actualizați acel fișier în secțiunea” arhitect”.

    va arăta cam așa:

    „architect”: {
    „build”: { … }
    „server”: {
    „builder”: „@angular-devkit/build-angular:server”,
    ” opțiuni”: {
    ” outputPath”:”dist/my-project-server”,
    ” principal”: „src/principal.server.ts”,
    „tsConfig”: „src/tsconfig.server.json”
    }
    }
    }

    notă atributul” builder ” patru linii în jos. Valoarea după colon („server”) este numele serverului. Puteți actualiza că, dacă doriți să-l nume altceva.

    acum, Puteți construi aplicația. Presupunând că ați păstrat serverul numit „server”, mergeți la linia de comandă și tastați următoarele:

    ng run my-project:server

    ar trebui să vedeți ieșirea care arată cam așa:

    Data: 2018-12-12T12:42:09.601 Z
    hash: 1caced0e9434007fd7ac
    timp: 4122ms
    bucată {0} principal.js (principal) 9.49 kB
    bucată {1} stiluri.css (stiluri) 0 octeți

    Configurați serverul

    apoi, trebuie să configurați un server Universal pentru a rula pachetul. Așa veți serializa aplicația și o veți returna în browser.

    pentru a face acest lucru, creați un nou fișier numit server.C. În acel fișier, veți defini motorul aplicației.

    detaliile acelui cod sunt puțin în afara domeniului de aplicare al acestui tutorial. Simțiți-vă liber să aruncați o privire la exemplul din Angular Universal docs.

    rulați aplicația pe server

    după toate acestea, sunteți în sfârșit într-un punct în care puteți rula aplicația pe server.

    pentru a face acest lucru, configurați un webpack care gestionează serverul.fișierul ts pe care l-ați creat în pasul anterior.

    denumiți fișierul de configurare webpack.server.config.js. Încă o dată, verificați documentele universale unghiulare pentru tipul exact de cod care aparține fișierului. S-ar putea să trebuiască să adaptați acel cod la propria convenție de denumire.

    după ce ați terminat cu fișierul, veți avea două foldere sub folderul dist: browser și server.

    pentru a rula codul serverului, trebuie doar să tastați următoarele la linia de comandă:

    node dist / server.js

    Felicitări! Acum rulezi codul de pe server.

    înfășurându-l

    deși Angular permite dezvoltatorilor să producă rapid aplicații de înaltă calitate, nu se joacă întotdeauna frumos cu roboții motoarelor de căutare.

    Din fericire, Angular Universal poate pre-reda paginile aplicației Angular ca HTML static, astfel încât să poată fi descoperite și indexabile. De asemenea, se vor încărca mai repede.

    a fost întotdeauna recomandarea mea de a avea o bază HTML și de a folosi Angular pentru a livra celelalte elemente de pe pagină. Am făcut această recomandare despre orice legătură JavaScript din 2010. Acest proces de Universal unghiular este același principal. Nu pot să vă spun că aveți multe site-uri unghiulare și reproiectări JavaScript au distrus. Fii atent cu a ta și întotdeauna să-l verificarea de către o companie de SEO înainte de lansare.

    Înscrieți-vă pentru recapitulările noastre zilnice ale peisajului în continuă schimbare al marketingului de căutare.

    Notă: Prin trimiterea acestui formular, sunteți de acord cu Termenii Third Door Media. Vă respectăm confidențialitatea.

    despre autor

    John E Lincoln

    John Lincoln este CEO al Ignite Visibility, o agenție de marketing digital și o Inc. Compania 5000. Lincoln este numit în mod constant unul dintre experții de marketing de top din industrie. El a fost un beneficiar al motorului de căutare Land” Search Marketer of the Year ” de atribuire, numit # 1 SEO consultant în SUA de către Clutch.co, cel mai admirat CEO și 40 Sub 40. Lincoln a scris două cărți (the Forecaster Method și Digital Influencer) și a realizat două filme (SEO: The Movie și Social Media Marketing: The Movie) despre marketingul digital.

    Lasă un răspuns

    Adresa ta de email nu va fi publicată.