Angular2 SEO – Come creare un’app angular 2 da sottoporre a scansione

Sto costruendo un’app Angular 2 usando il framework Angular-Meteor .

Mi piacerebbe ottenere indici rapidi e coerenti da google e altri motori di ricerca, e consentire a Facebook sharer e altri scrapers di generare anteprime dei miei contenuti generati da JS.

Solitamente le SPA utilizzano PhantomJS per rendere la pagina lato server e inviare l’HTML statico al client.

Naturalmente posso generare personalmente PhantomJS quando intercetto un _escaped_fragment_ o quando vedo il google o l’user agent di raschietto, ma ho sempre avuto perdite di memoria e istanze Phantom orfane quando ho generato PhantomJS direttamente su siti Web con un grande traffico (ho usato NodeJS e questo modulo ).

Per le app Angular 1, ho risolto questo problema con moduli angolari come Angular-SEO , ma mi sembra difficile convertire tale modulo in angular 2.

Non ho ancora trovato alcun modulo Angular 2 appropriato per questo. Dovrei costruirlo da solo, o c’è qualche altro buon modo per ottenere questo fino ad oggi?

Il bello di Angular2 è che quando viene triggersto, tutto il contenuto all’interno dell’elemento di app di root scompare. Ciò significa che puoi inserire tutto ciò che vuoi lì dal server che vuoi venga raccolto dai crawler.

Puoi generare questo contenuto utilizzando una versione del contenuto del server nella tua app o una logica personalizzata.

Puoi trovare ulteriori informazioni qui: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering e qui: https://github.com/angular/universal

Ho appena creato ng2-meta , un modulo Angular2 in grado di modificare i meta tag in base alla rotta corrente.

const routes: Routes = [ { path: 'home', component: HomeComponent, data: { meta: { title: 'Home page', description: 'Description of the home page' } } }, { path: 'dashboard', component: DashboardComponent, data: { meta: { title: 'Dashboard', description: 'Description of the dashboard page', 'og:image': 'http://example.com/dashboard-image.png' } } } ]; 

Puoi anche aggiornare i meta tag da componenti, servizi, ecc.

class ProductComponent { ... constructor(private metaService: MetaService) {} ngOnInit() { this.product = //HTTP GET for product in catalogue metaService.setTitle('Product page for '+this.product.name); metaService.setTag('og:image',this.product.imageURL); } }
class ProductComponent { ... constructor(private metaService: MetaService) {} ngOnInit() { this.product = //HTTP GET for product in catalogue metaService.setTitle('Product page for '+this.product.name); metaService.setTag('og:image',this.product.imageURL); } } 

Mentre questo si rivolge a crawler abilitati a Javascript (come Google), puoi impostare meta tag di riserva per i crawler non Javascript come Facebook e Twitter.

     ...  

È in corso il supporto per il rendering lato server.

Il rendering di Serverside non è un requisito per un ranking google decente …

Ho avuto un forum con circa 33.000 voci nei suoi file Sitemap di Google. Questo sito Web è stato scritto utilizzando i webform di asp.net e ha ricevuto un discreto stream di richieste in arrivo da google. Questo sito ha una pessima leggibilità sui dispositivi mobili (qualcosa che viene penalizzato da Google, in realtà lo ha menzionato nella mia “console di ricerca” di Google)

Ho riscritto tutto con angular (la versione distribuita è angular5). Sto usando i servizi Title e Meta per impostare il mio titolo e meta tag. Tutti i percorsi contengono parole chiave estratte dal contenuto effettivo. Inoltre ho fatto in modo che ogni elemento con un attributo [routeLink] fosse un tag A su cui ho anche specificato l’elemento href (è ciò che cerca un crawler …) E ovviamente ho prestato molta attenzione alla leggibilità dei dispositivi mobili.

Risultato: ottengo effettivamente più traffico in entrata rispetto a prima e nella console di ricerca vedo chiaramente che le mie pagine indicizzate sono aumentate: delle pagine 30k +, solo circa 10K sono state incluse nell’indice. Ora ho quasi 25k pagine nell’indice.

Non sto dicendo che il rendering serveride sia irrilevante. L’utilizzo di metodi universali o di altro tipo si tradurrà in tempi di download più rapidi, che porteranno probabilmente a un punteggio più alto. Ma Google è sicuramente in grado di indicizzare correttamente una SPA angular.

modifica: qualche prova: se si utilizza google “3ds max threadripper”, si noterà che supera di gran lunga uno dei più grandi siti di hardware su Internet.