Cum să faci un website prietenos Angular SEO cu Angular Universal?

Cum să faci un website prietenos Angular SEO cu Angular Universal?

De: Tree Web Solutions | Etichete: angular seo website, angular universal, meta taguri, titlu seo, angular seo prietenos, angular seo

Există multe Framework-uri JavaScript de randare pe partea de server și pe partea clientului, disponibile pentru dezvoltatori pentru a realiza aplicații web eficiente. Alegerea Framework-ului potrivit pentru nevoile proiectului dumneavoastră poate fi descurajantă și provocatoare. Alegerea unui Framework greșit poate afecta și capacitatea proiectului de a respecta termenele limită și așteptările clienților. Angular este un astfel de Framework open-source și full-stack Top-JavaScript, folosit pentru a crea aplicații cu o singură pagină, aplicații web și aplicații hibride. Google menține și acceptă Angular.

De ce Angular?

Majoritatea clienților și dezvoltatorilor sunt atrași de Angular deoarece acționează ca un set complet de instrumente care poate ajuta dezvoltatorii să construiască aplicații la scară largă. Companii de top precum Forbes, Xbox, BMW și altele folosesc Angular pentru cerințele lor de dezvoltare front-end. Angular este folosit în principal pentru a construi aplicații cu o singură pagină.

Aplicațiile Angular sunt numite Aplicații cu o singură pagină, deoarece atunci când se încarcă o aplicație Angular, ea redă alte pagini în mod dinamic, fără a reîncărca paginile web în mod repetat. Acest lucru este posibil cu Framework robust Angular care modifică dinamic paginile rulând coduri JavaScript sau încărcând doar conținutul specific. Acest lucru îi ajută pe utilizatori să obțină o experiență perfectă, fără a fi nevoie să aștepte ca paginile să se reîncarce.

Până acum, este destul de de înțeles că Angular este foarte ușor de utilizat. Ajută la crearea unor soluții de aplicații web impresionante, complet funcționale și scalabile. Aceasta înseamnă că ar trebui să fie una dintre cele mai bune alegeri pentru cerințele dvs. de dezvoltare a aplicației, nu? Ei bine aproape! Pentru ca orice aplicație să fie eficientă în obținerea de rezultate maxime, trebuie să fie ușor de utilizat și prietenoasă cu SEO.

Angular este, în general, privit cu dispreț pentru limitările sale SEO. Înainte de a înțelege provocările cu Angular și SEO , ne va ajuta să revizuim ce este SEO și de ce ar trebui să ne pese în primul rând.

De ce ar trebui să faceți site-ul dvs. prietenos cu crawler-ul pentru motoarele de căutare?

Crawlerele motoarelor de căutare mai sunt denumite și păianjeni sau roboți. Acestea sunt programe sau scripturi care răsfoiesc paginile de pe web pentru a citi paginile pe care le vizitează pentru a le adăuga la indexul motorului lor de căutare. Această activitate este esențială deoarece crawlerele motoarelor de căutare care indexează conținutul site-ului dvs. ajută motoarele de căutare populare să vă citească conținutul și să înțeleagă scopul final al companiei dvs. Motoarele de căutare potrivesc mai bine conținutul dvs. cu interogarea utilizatorului pe care o primește de la utilizatori atunci când caută ceva. Cu cât este mai ușor pentru crawlerii motoarelor de căutare să indexeze conținutul dvs., cu atât site-ul dvs. web se va clasa mai mult în primele rezultate ale căutării pentru serviciile dvs. Acest lucru vă va ajuta să generați un trafic mai bun către site-ul dvs. web, crescând astfel șansele de conversie și de succes general.

Provocări Angular SEO

1. Angular SEO Challenges – Conținut invizibil pentru boți

Știm că Angular nu reîncarcă paginile, decât dacă se spune în mod explicit să facă acest lucru din ceea ce am citit despre Angular mai sus. Acceptă modificarea dinamică a metadatelor paginilor web, dar aceasta se bazează în întregime pe JavaScript. Crawlerele motoarelor de căutare nu sunt mari fani ai JavaScript. Din acest motiv, aplicațiile Angular pot eșua în a reda conținutul corect sau metadatele lor. Majoritatea conținutului utilizatorului poate fi văzut pe un site web Angular sau pe o aplicație Angular; roboții nu îl pot vedea în timp ce preiau date de la sursă. Și Angular nu stochează date pe sursă. Aplicațiile cu o singură pagină apelează conținut prin conexiuni API; aceasta elimină tot conținutul accesabil cu crawlere din codul real al paginii. Majoritatea site-urilor web se bazează pe HTML, care are tot conținutul site-ului; în schimb, SPA-urile păstrează doar structura de bază a paginii. Formularea apar printr-un apel API dinamic. Prin urmare, nu există un cod HTML real în codul sursă pe care crawlerele Google îl pot accesa cu crawlere.

2. Provocări unghiulare SEO – Limitarea vitezei de încărcare

O altă limitare semnificativă a aplicațiilor Angular care le face mai puțin prietenoase cu SEO este viteza. Aplicațiile Angular sunt scalabile, ușor de utilizat și robuste. Ceea ce nu sunt în general este viteza optimizată. Cele mai multe site-uri unghiulare se încarcă ca ecrane goale timp de câteva secunde ciudate înainte de a reda pagina de pornire. Acest lucru face ca vizitatorii să salveze site-ul chiar înainte de a ajunge la el sau de a-l experimenta.

Conform unui studiu realizat de Statisitcbrain – durata medie de atenție a unei persoane este de doar 8 secunde. Deci, dacă nu captivați atenția utilizatorului în acest interval de atenție, este posibil să vedeți mai multe rate de respingere, care din nou afectează negativ clasamentele SEO.

Cum să faci Angular SEO prietenos?

Din fericire, există soluții și soluții pentru a rezolva acest conflict SEO cu aplicațiile Angular. Angular este una dintre cele mai populare tehnologii JS front-end, așa că au realizat aceste limitări și au câteva soluții eficiente pentru ca dvs. să aveți un site web ușor de utilizat și prietenos cu SEO. Să vedem soluțiile posibile:

1. Angular SEO – Dynamic Rendering

După cum am discutat mai sus, limitarea majoră a site-urilor web Angular în ceea ce privește SEO este că preia date prin apeluri API și nu are multe fișiere HTML pe care Google să le acceseze cu crawlere. O soluție ușoară la această problemă poate fi utilizarea unui instrument de randare dinamică care vă poate ajuta să creați fișiere HTML statice pe care crawlerele web le vor putea consuma și indexa cu ușurință. După aceasta, vă puteți configura serverul web pentru a direcționa crawlerele motoarelor de căutare către paginile pre-rendate, iar vizitatorii umani vor fi redirecționați către site-ul web normal Angular. Problema rezolvata, nu? Nu chiar. Încă nu am abordat problema vitezei cu această soluție. Vom aborda acest lucru mai târziu pe blog.

2. Angular SEO – Setarea titlurilor și metadatelor

Crawlerele motoarelor de căutare preiau date din toate titlurile și metadatele disponibile pe pagina web. Pentru a adăuga metadate și a modifica în mod dinamic titlul paginii în aplicația Angular, tot ce trebuie să faceți este să utilizați aceste module Angular.

Accesați home.components.tsfișierul și actualizați-l cu următoarele modificări:

import { Component, OnInit } from '@angular/core';
import { Meta,Title } from '@angular/platform-browser';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private meta: Meta,private title: Title) {
    this.meta.addTags([
      {name: 'description', content: 'Home page of SEO friendly app'},
      {name: 'author', content: 'buttercms'},
      {name: 'keywords', content: 'Angular, ButterCMS'}
    ]);
    this.setTitle('Home Page');
  }
  public setTitle( newTitle: string) {
    this.title.setTitle( newTitle );
    }
  ngOnInit() {
  }
}

Odată ce aceste modificări sunt făcute, observați țiglă din fila browser. Se va schimba dinamic pe măsură ce utilizatorul navighează prin pagini. Și dacă inspectați codul în consola browserului, veți găsi metadatele corespunzătoare atașate. Cu toate acestea, conținutul sursei paginii este în continuare același. Aceasta înseamnă că, dacă JavaScript este permis, putem crea titluri și metadate dinamice, dar nu în absența acestuia. Așa că trebuie să găsim o modalitate de a prelua acest conținut al paginii redate și de a-l trimite utilizatorilor. Acest lucru este cunoscut sub numele de pre-rendare.

Acum am discutat până acum două soluții, iar una încă nu rezolvă problema vitezei de încărcare, iar cealaltă are limitarea pre-rendării. Putem rezolva ambele probleme cu Angular Universal.

3. Angular SEO – Înțelegerea Angular Universal

Ce este Angular Universal?

Angular Universal este o tehnologie furnizată de Angular pentru redarea aplicațiilor dvs. Angular pe server. Acest instrument permite serverului să vă prealeze aplicația Angular atunci când utilizatorul vă vizitează site-ul pentru prima dată. Există multe beneficii SEO ale utilizării Angular Universal. De asemenea, ajută la îmbunătățirea performanței generale și a accesibilității aplicației dvs. web Angular.

Cum funcționează Angular Universal?

După cum am menționat mai sus, atunci când folosim Angular Universal, redăm fișierele HTML și CSS afișate utilizatorilor din timp. Putem implementa acest lucru în timpul construirii sau, de asemenea, pe serverul fly-on odată ce utilizatorul solicită pagina. Făcând acest lucru, utilizatorul va primi inițial fișierul HTML și CSS, permițându-i să vadă un anumit conținut de pe site-ul web pe măsură ce îl vizitează. Cu randarea pe partea serverului, rezolvăm problema timpilor lungi de încărcare care pot deranja vizitatorii atunci când vizitează un site web Angular. Cu toate acestea, aceasta este doar jumătate din poveste. Cu un HTML redat pe partea de server, vom livra și o aplicație angulară normală pe partea clientului către browser. Aplicația din partea clientului va prelua pagina, iar apoi aplicația va funcționa ca aplicația dvs. obișnuită cu o singură pagină, cu randarea în timp de execuție pe partea clientului.

Cum se implementează Angular Universal?

Pasul 1 - Creați o nouă aplicație Angular

Creați o nouă aplicație Angular folosind comanda:

ng new project-name --style=scss

Pasul 2 – Instalați Angular Universal și actualizați fișierele de proiect

Folosiți Angular Schematics pentru a adăuga Angular Universal la proiectul dvs. cu o singură comandă:

ng add @nguniversal/express-engine --clientProject project-name

Când executați comanda la pasul 2, aplicația dvs. Angular creează și actualizează aceste fișiere în aplicația dvs.:

CREATE src/main.server.ts (298 bytes)

CREATE src/app/app.server.module.ts (318 bytes)

CREATE tsconfig.server.json (325 bytes)

CREATE server.ts (2015 bytes)

UPDATE package.json (2110 bytes)

UPDATE angular.json (5247 bytes)

UPDATE src/main.ts (432 bytes)

UPDATE src/app/app.module.ts (359 bytes)

Pasul 3 – Testează-ți aplicația

Unul dintre cele mai importante aspecte ale oricărui proiect de dezvoltare a aplicației este testarea aplicației. După ce ați făcut corect toți pașii menționați mai sus, testați aplicația cu această comandă:

npm run build:SSR && npm run serve:SSR

Angular Universal – Instrumentul de pre-rendare pentru Angular SEO

Acum că știm cum să folosim Angular Universal, ar trebui să ne concentrăm pe cum să-l folosim ca instrument de pre-rendare în scopuri SEO. Angular Universal este cunoscut ca instrumentul de randare pe partea serverului care permite dezvoltatorilor Angular să pre-renda aplicațiile Angular atunci când utilizatorul vă vizitează site-ul pentru prima dată. Există multe avantaje SEO, accesibilitate și performanță ale randării pe server.

Angular Universal – Proces de pre-rendare

Începeți prin a rula comanda prerander – npm rulează prerander pe proiect și utilizați guess-parser pentru a ghici rutele aplicației. Fiecare rută este pre-redată în HTML și acel fișier HTML este salvat ca propriul director în dist/<project name>/browser/. Generatorul de prerendare este prezent în angular.json aplicația/site-ul dumneavoastră Angular. Acest constructor are o opțiune de rute care le permite dezvoltatorilor să specifice rutele paginilor aplicației pe care doresc să le prealeze.

"prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "universal-app:build:production",
            "serverTarget": "universal-app:server:production",
            "routes": [
              "/",
              "/about-us",
              "/contact-us"
            ]
          },
          "configurations": {
            "production": {}
          }
        }

Dacă există multe pagini de aplicație pe care doriți să le pre-rendați, dar nu doriți să adăugați rute manual, puteți schimba routesopțiunea la routesFileopțiune. routesFileOpțiunea permite dezvoltatorilor să indice o adresă URL relativă care conține toate rutele predefinite pentru toate paginile pe care doriți să pre-redat în timp construi. Acest fișier poate fi completat cu rutele dorite folosind script sau orice altă metodă.

/
/about-us
/contact-us

pre-randare-rute.txt

"prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "universal-app:build:production",
            "serverTarget": "universal-app:server:production",
            "routesFile": "./pre-render-routes.txt"
          },
          "configurations": {
            "production": {}
          }
        }

angular.json cu opțiunea routesFile

Angular SEO – Cum să inserați meta-etichete pentru site-ul Angular?

Metaetichetele sunt fragmente de text care descriu conținutul unei pagini web. Metaetichetele nu apar numai în codul sursă al paginii și nu pe pagina web în sine. Aceștia funcționează ca descriptori de conținut care ajută motoarele de căutare să înțeleagă relevanța și contextul unei pagini web pentru a înțelege mai bine informațiile acesteia. Aceasta este o practică SEO foarte importantă pentru ca site-ul dvs. să se poziționeze bine pe motoarele de căutare. Când vă construiți site-urile Angular, ar trebui să inserați și etichete meta, pentru a vă clasa mai bine decât concurenții. Adăugarea de meta-etichete pe site-urile web Angular poate fi puțin dificilă dacă sunteți nou la Angular. Lasă-ne să-l defalcăm pentru tine -

Angular SEO – Meta Services

Angular oferă servicii Title și Meta. Aceste etichete sunt similare cu cum ar arăta metaetichetele HTML. Caracteristica meta a lui Angular aparține unei familii de clasă. Angular are prevederi pentru diferite meta servicii pentru a citi, actualiza, adăuga și elimina meta elemente HTML.

Acestea sunt diferitele servicii Meta oferite de Angular -

Setarea etichetelor meta și a titlului SEO în Angular SEO

1. Importul Angular Meta Services

După cum am discutat mai devreme, pentru orice practică Angular SEO, am configurat aplicația Angular Universal. După ce ați terminat de configurat aplicația Angular Universal, accesați fișierul app/app.component.ts și importați serviciul Angular Meta. Acest serviciu Angular Meta permite dezvoltatorilor Angular să adauge roboți, cuvinte cheie, dată, fereastră de vizualizare și set de caractere într-o aplicație Angular. Importă Angular Meta Services folosind această linie de cod –

import { Meta } from '@angular/platform-browser';

Odată ce ați terminat de utilizat, injectați  private metaTagService: Metaîn constructor și folosiți addTags()metoda serviciilor Angular Meta pentru configurarea următoarelor atribute meta HTML -

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private metaTagService: Meta
  ) { }

  ngOnInit() {
    this.metaTagService.addTags([
      { name: 'keywords', content: 'Angular SEO, Angular Universal' },
      { name: 'robots', content: 'index, follow' },
      { name: 'author', content: 'Ronak Patel' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'date', content: '2021-05-17', scheme: 'YYYY-MM-DD' },
      { charset: 'UTF-8' }
    ]);
  }
}

2. Adăugarea titlului SEO și a descrierii meta în Componenta Angular

În continuare, ne vom concentra pe setarea meta-decrierii și a titlului SEO pentru aplicația noastră Angular Universal. Pentru aceasta, importăm mai întâi Title, Meta din @angular/platform-browser. Pentru aceasta, trebuie să accesați fișierul app/components/add-car/add-car.component.ts și apoi adăugați următorul cod acolo -

import { Title, Meta } from '@angular/platform-browser';
@Component({
  selector: 'app-add-car',
  templateUrl: './add-car.component.html',
  styleUrls: ['./add-car.component.css']
})
export class AddCarComponent implements OnInit {
  title = 'Add Car - Angular Universal Car App';
  constructor(
    private titleService: Title,
    private metaTagService: Meta
  ) { }
  ngOnInit() {
    this.titleService.setTitle(this.title);
    this.metaTagService.updateTag(
      { name: 'description', content: 'Add car template' }
    );
  }
}

Acum, am definit titlul SEO și l-am declarat folosind setTitle()metoda în interiorul ngOnInitcârligului ciclului de viață. Apoi, am declarat și descrierea Meta în Angular folosind updateTag()metoda lui Meta .

Încheiați-l cu o listă rapidă de verificare Angular SEO!

Acestea sunt modalitățile de top de a implementa practicile Angular SEO pentru a face site-urile dvs. Angular și aplicațiile web Angular prietenoase cu SEO. Există multe beneficii ale utilizării Angular pentru proiectele dvs. de dezvoltare a aplicațiilor! Puteți folosi această listă de verificare Angular SEO pentru a vă asigura că aplicația dvs. Angular este prietenoasă cu SEO:

• Analizați și studiați arhitectura și funcționalitatea existente ale aplicației.
• Verificați funcționalitățile SEO anterioare (dacă există).
• Dacă aplicația este o aplicație moștenită, actualizați versiunea Angular.

Este întotdeauna o practică bună să vă actualizați în mod regulat aplicația cu cea mai recentă versiune Angular pentru a profita de cele mai noi îmbunătățiri disponibile în versiunile mai recente. După ce actualizați aplicația la cea mai recentă versiune de Angular, asigurați-vă că:

• Faceți modificările necesare în aplicație conform actualizării.
• Aplicați modificări adecvate pentru SEO în fișierul rădăcină al aplicației.
• Activați încărcarea Angular SSR utilizând Angular Universal.
• Tally SEO configurație cu cerințele de afaceri.

Sursa: https://aglowiditsolutions.com