The playground

More information here

Angular Universal: Cosa devi sapere per SEO

Iscriviti ai nostri riassunti giornalieri del panorama del search marketing in continua evoluzione. Nota: Inviando questo modulo, accetti i termini di Third Door Media. Rispettiamo la tua privacy. John E Lincoln il 1 febbraio 2019 alle 9:53 Categorie:Tutte le cose SEO Colonna, Canale: SEO Se si utilizza Angular per alimentare il tuo sito web, allora […]

Iscriviti ai nostri riassunti giornalieri del panorama del search marketing in continua evoluzione.

Nota: Inviando questo modulo, accetti i termini di Third Door Media. Rispettiamo la tua privacy.

John E Lincoln il 1 febbraio 2019 alle 9:53

  • Categorie:Tutte le cose SEO Colonna, Canale: SEO
  • Se si utilizza Angular per alimentare il tuo sito web, allora avete un ostacolo in più da attraversare quando si tratta di SEO. Fortunatamente, Angular Universal rende facile saltare su di esso.

    Tieni presente che “facile” è un termine relativo qui. C’è un bel po ‘ di magia tecnica coinvolta.

    Avrai quasi certamente bisogno di coinvolgere un team di sviluppo.

    Ma una volta consegnato il prodotto finito, il tuo sito servirà pagine ottimizzate che i motori di ricerca individueranno e indicizzeranno facilmente.

    In questa guida, spiegherò Angular Universal e perché è importante per i marketer.

    Il problema SEO

    Angular è un framework fantastico per la fornitura di applicazioni web modulari e user-friendly. Sfortunatamente, è un po ‘ ostile al SEO.

    Questo è per due motivi.

    In primo luogo, Angular si basa molto sullo script per fornire contenuti. Di conseguenza, alcuni bot di ricerca non” vedono ” il contenuto che un utente vede.

    Dai un’occhiata alla documentazione universale angolare. Quella pagina è, non sorprende, resa con Angular.

    Mentre scorri verso il basso, vedrai un bel po ‘ di contenuti. Si potrebbe pensare che sia tutto indicizzabile.

    Non necessariamente. Fare clic destro sulla pagina e selezionare “Visualizza origine pagina” dal menu contestuale che appare.

    Ci sono solo 100 righe di codice sorgente. Da nessuna parte in là vedrai il contenuto che hai visto quando hai visualizzato normalmente la pagina.

    Questo, in poche parole, è il problema con Angular. I visitatori umani vedranno il contenuto, ma i bot di ricerca vedranno la fonte.

    E la fonte non ha il contenuto!

    C’è un altro problema SEO: velocità. Le app Angolari spesso non si caricano rapidamente.

    Alcuni siti visualizzeranno una schermata vuota per un paio di secondi prima di mostrare la home page. Che può causare i visitatori a cauzione come ottengono impaziente.

    La velocità del sito è un fattore di classifica mobile, quindi il tuo rango avrà un successo se il tuo sito non si carica rapidamente su piattaforme mobili.

    Ma Google dice Google

    Google sostiene che il suo bot può indicizzare siti basati su script. Ci sono molte prove a sostegno di ciò, ma ciò non significa che si possa evitare di fare il miglio supplementare quando si ottimizza un sito angolare.

    Per cominciare, Google non è l’unico motore di ricerca in città. Se vuoi che la tua app angolare si classifichi su Bing e DuckDuckGo, dovrai prendere provvedimenti per farlo accadere.

    Successivamente, potrebbe essere il caso che Google possa indicizzare alcuni siti Angolari, ma non il tuo. Non tutte le app Angolari sono create uguali. Il tuo potrebbe essere l’eccezione all’algoritmo di indicizzazione di Google.

    Nella mia esperienza, i siti che passano da HTML a Angular perdono traffico massiccio dal motore di ricerca la maggior parte del tempo. In effetti, ho avuto tre clienti nell’ultimo anno in cui abbiamo dovuto riparare il sito dopo le cadute dovute a Angular.

    Ci sono soluzioni

    Fortunatamente, ci sono modi per rendere il tuo sito angolare SEO friendly.

    Una delle opzioni più popolari è usare il rendering dinamico. Questo è quando si utilizza uno strumento come Puppeteer per generare file HTML statici che i crawler web possono consumare più facilmente.

    Quindi, configura il tuo server Web per indirizzare i bot di ricerca alle pagine pre-renderizzate mentre i visitatori umani navigano intorno alla normale app angolare.

    Questa è una soluzione decente, ma non risolve ancora il problema della velocità. Per questo, probabilmente vorrai andare con Angular Universal.

    Che cosa è angolare universale?

    Angular Universal esegue la tua app Web sul server anziché eseguirla nel browser.

    Questa è una distinzione importante. Normalmente, le app angolari sono applicazioni lato client.

    Il problema per i bot di ricerca è che non sempre “elaborano” il codice lato client come fa il tuo browser quando ti serve una pagina web. Ecco perché hai visto una discrepanza tra la pagina di documentazione universale angolare e il suo codice sorgente.

    Angular Universal gestisce il rendering lato server (SSR). Pre-rende il contenuto HTML e CSS mostrato all’utente prima del tempo.

    Ciò significa che un utente caricherà una pagina HTML statica invece del codice lato client. Di conseguenza, la pagina verrà caricata più rapidamente.

    Inoltre, poiché è HTML statico, i bot di ricerca possono indicizzare il contenuto.

    Tutti vincono.

    Perché è importante

    Se siete in marketing digitale, allora sapete già che gran parte della battaglia comporta guadagnando esposizione on-line. Ecco perché raggiungi gli influencer, pubblica aggiornamenti sui social media e ottimizza il tuo sito per classificarlo bene.

    In poche parole: il tuo sito non può classificare se non può essere indicizzato. Se Angular sta alimentando il tuo sito web, è necessario adottare ulteriori misure per assicurarsi che il suo contenuto appaia nei motori di ricerca.

    Ecco perché hai bisogno di una soluzione universale angolare.

    Il rovescio della medaglia, ovviamente, è che costerà denaro. Dovrai assumere un team di sviluppo qualificato per aggiungere SSR al tuo sito web.

    Questa è una spesa che dovrebbe più che pagare per se stessa nel tempo se il tuo sito si colloca bene per i termini di ricerca chiave relativi alla tua nicchia.

    Come eseguire un’app Angular su Angular Universal

    Se sei qualcuno a cui piace sporcarsi le mani con il codice, o vuoi solo risparmiare sui costi di sviluppo, puoi distribuire un’app lato server da solo.

    Prima di farlo, è meglio se si dispone di una conoscenza di base di Angular, l’interfaccia della riga di comando (CLI), TypeScript e server Web. Altrimenti, probabilmente lotterai.

    I passaggi per distribuire un’app universale angolare sono i seguenti:

    • Installare le dipendenze necessarie
    • Aggiornamento Angolare app
    • Utilizzare la CLI per costruire un Universale bundle
    • Impostare il server per eseguire una Universale bundle
    • Eseguire l’applicazione sul server

    C’è un po ‘ succedendo in questi cinque passi, così mi occuperò di loro a turno nelle sezioni seguenti.

    Installa le dipendenze

    Se hai esperienza con Angular, allora conosci già il nodo.js. Questo è il runtime che traspila il codice dattiloscritto in un’app JavaScript.

    Nodo.js viene fornito con un gestore di pacchetti, chiamato in modo inimmaginabile Node Package Manager o npm in breve. Lo userai per installare le dipendenze.

    Accendi la finestra della riga di comando ed esegui il seguente codice:

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

    Dagli qualche istante (o molti momenti) per installare tutto.

    Aggiorna la tua app Angular

    Successivamente, dovrai preparare la tua app Angular per la distribuzione universale. Ciò comporta quattro passaggi:

    • Aggiungi supporto universale. Apri il tuo modulo root (di solito AppModule) e aggiungi un ID applicazione all’importazione BrowserModule. Lo farai nella sezione “importazioni” appena sotto la dichiarazione @ NgModule.
    • Crea il modulo radice del server.Successivamente, è necessario creare un nuovo modulo denominato AppServerModule. Assicurati che importi ServerModule dalla dipendenza platform-server aggiunta nel passaggio precedente.
    • Crea il file principale. Avrai bisogno di un file principale per il tuo pacchetto universale. Crealo nella radice (nella cartella src) ed esporta la classe AppServerModule da quel file.
    • Crea un file di configurazione. La classe AppServerModule ha bisogno di un file di configurazione. Crearne uno in formato JSON. Dovrebbe essere simile a questo:

    Crea un nuovo target di build

    La tua directory di origine angolare dovrebbe includere un file chiamato angular.json. Dovrai aggiornare quel file nella sezione” architetto”.

    Sarà simile a questo:

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

    Nota l’attributo “builder” quattro righe in basso. Il valore dopo i due punti (“server”) è il nome del server. Puoi aggiornarlo se vuoi chiamarlo qualcos’altro.

    Ora puoi creare la tua app. Supponendo che tu abbia mantenuto il server chiamato “server”, vai alla riga di comando e digita quanto segue:

    ng eseguire il mio progetto:server

    Si dovrebbe avere un risultato simile a questo:

    Data: 2018-12-12T12:42:09.601 Z
    Hash: 1caced0e9434007fd7ac
    Ora: 4122ms
    chunk {0} main.js (principale) 9.49 kB
    stili chunk {1}.css (styles) 0 byte

    Impostare il server

    Successivamente, è necessario impostare un server universale per eseguire il bundle. È così che serializzerai l’app e la restituirai al browser.

    Per farlo, crea un nuovo file chiamato server.TS. All’interno di quel file, definirai il tuo motore di app.

    I dettagli di quel codice sono un po ‘ al di fuori dello scopo di questo tutorial. Sentiti libero di dare un’occhiata all’esempio nei documenti universali angolari.

    Esegui l’app sul server

    Dopo tutto ciò, sei finalmente a un punto in cui puoi eseguire l’app sul server.

    Per farlo, impostare un webpack che gestisce il server.ts file creato nel passaggio precedente.

    Assegna un nome al webpack del file di configurazione.server.config.js. Ancora una volta, controlla i documenti universali Angolari per il tipo esatto di codice che appartiene al file. Potrebbe essere necessario adattare quel codice alla propria convenzione di denominazione.

    Una volta che hai finito con il file, avrai due cartelle sotto la cartella dist: browser e server.

    Per eseguire il codice del server, basta digitare quanto segue nella riga di comando:

    node dist/server.js

    Congratulazioni! Ora stai eseguendo il codice lato server.

    Avvolgendolo

    Anche se Angular consente agli sviluppatori di produrre rapidamente applicazioni di alta qualità, non sempre gioca bene con i bot dei motori di ricerca.

    Fortunatamente, Angular Universal può pre-renderizzare le pagine delle app Angolari come HTML statico in modo che siano rilevabili e indicizzabili. Si caricheranno anche più velocemente.

    È sempre stata la mia raccomandazione di avere una base HTML e usare Angular per fornire gli altri elementi della pagina. Ho fatto questa raccomandazione su tutto ciò che riguarda JavaScript dal 2010. Questo processo di Universale angolare è lo stesso principale. Non posso dire che hai molti siti Angolari e le riprogettazioni JavaScript sono state distrutte. Fate attenzione con il vostro e sempre farlo vagliare da una società SEO prima del lancio.

    Iscriviti ai nostri riassunti giornalieri del panorama di search marketing in continua evoluzione.

    Nota: Inviando questo modulo, accetti i termini di Third Door Media. Rispettiamo la tua privacy.

    Informazioni sull’autore

    John E Lincoln

    John Lincoln è CEO di Ignite Visibility, un’agenzia di marketing digitale e Inc. 5000 società. Lincoln è costantemente nominato uno dei migliori esperti di marketing del settore. È stato un destinatario del Search Engine Land “Search Marketer of the Year” award, nominato il consulente SEO # 1 negli Stati Uniti da Clutch.co, CEO più ammirato e 40 sotto 40. Lincoln ha scritto due libri (The Forecaster Method e Digital Influencer) e realizzato due film (SEO: The Movie e Social Media Marketing: The Movie) sul marketing digitale.

    Lascia un commento

    Il tuo indirizzo email non sarà pubblicato.