the Angular framework on rakenteellinen javascript-pohjainen kehys verkkosovelluksille. Sitä käytetään luomaan dynaamisia verkkosivuja, joiden sisältö on renderoitu verkkopalvelujen kautta. Kulmikas kehys on hyvin kehittäjäystävällinen. Se on ollut olemassa useita vuosia ja on kertynyt vahva yhteisö työkaluja ja apuohjelmia, kuten Angular CMS työkalut, backend kehykset, ja enemmän.

kulmaekosysteemiä

Kulmakehyksen avulla rakennettuja sovelluksia kutsutaan yhden sivun sovelluksiksi (SPAs) niiden toimintatavan vuoksi. Kun Kulmikas sovellus on ladattu, se muuttaa muut sivut dynaamisesti lataamatta verkkosivuja uudelleen. Tämä kokemus toimitetaan voimalla Angular javascript framework. Se muokkaa sivuja dynaamisesti ajamalla javascript-koodia tai lataamalla vain vaadittua sisältöä. Tämä antaa käyttäjälle sujuvan kokemuksen odottamatta uudelleenlatausta. Kulmikkailla sivustoilla voi kuitenkin olla haitallisia vaikutuksia hakukoneoptimointiin (SEO).

tässä artikkelissa ilmaisemme, kuinka kulmikkaat sovellukset tarvitsevat erityistä SEO-käsittelyä, ja annamme joitakin erityisiä käyttöönottoohjeita hyvän kulmikkaan SEO: n helpottamiseksi.

hakukoneiden indeksoijien ja SEO: n ymmärtäminen

ennen kuin käsittelemme ratkaisua, ymmärtäkäämme, miten hakukoneiden indeksoijat (tai botit) todella toimivat. Hakukoneet ympäri maailmaa ryömiä sivustosi ymmärtää sivuja ja päätavoite yrityksesi. Tätä varten telaketjut lukevat läpi sivujen metatiedot, kuten otsikon, kuvauksen, kuvamerkit ja luokat. Tämän metatiedon on oltava erilainen jokaisella sivulla, jotta hakukoneet voivat ymmärtää kunkin sivun tarkoituksen.

perinteiset SEO - haun tulokset

hakukonebotti tavoittaa tietyn sivun, löytää sivulla olevat Hyperlinkit, lukee sivun metatiedot ja alkaa kulkea hyperlinkkien läpi. Se toistaa tämän prosessin sivustossasi, kunnes se ei pysty löytämään uusia linkkejä. Tämän prosessin aikana botti lataa sivustosi staattisen sisällön ja ymmärtää sivua. Näin ollen on tärkeää maksimoida kunkin sivun tiedot metatiedoissa ja staattisessa sisällössä.

Kulmikas CMS mahdollistaa dynaamisen sisällön, jota markkinoijat voivat päivittää.

SEO: sta on tullut yksi tärkeimmistä investoinneista minkä tahansa verkkoliiketoiminnan kannalta. Aiemmin kehitettävät verkkosovellukset olivat melko yksinkertaisia ja sisälsivät enimmäkseen staattisia sivuja. Nämä sivut sisälsivät kaikki tarvittavat tiedot valmiiksi koodattuna niihin. Web-sovelluskehityksen kehittyessä siirryimme dynaamisen sisällön renderöinnin aikakauteen, jossa verkkosivujen sisältö tallennetaan jonnekin ja noudetaan tarpeen mukaan.

tähän on kaksi tapaa:

  1. palvelinpuolen renderointi
  2. asiakaspuolen renderointi

koska aiemmin ei ollut kehittyneitä asiakaspuolen renderöintikehyksiä, oli trendinä palvelinpuolen renderöinti sivuista. Oli lukuisia kieliä ja kehyksiä käsitellä samaa. Esimerkiksi PHP, Java Spring, NodeJS ohjaustangolla ja muut kehykset tekevät sivut etukäteen ja lähettävät vain tavallisen HTML-sisällön frontendiin.

tällä lähestymistavalla varmistetaan, että sivulla on oikeat meta-Tunnisteet ja kaikki sisältö, joka on renderoitu ennen kuin hakukone crawler vastaanottaa sen. Niinpä perinteiset web-sovellukset olivat käytännössä yksinkertaisia, kun se tuli SEO. Niiden haittapuolena olivat kuitenkin varmasti pidemmät latausajat. Halvoilla palvelimilla tuhansien sivupyyntöjen käsittely kävi vaikeaksi. Tämä toi kuvaan kulmikkaan kaltaiset frontend-kehykset.

SEO Yksisivuisille sovelluksille (SPAs)

yksisivuinen sovellus on käsite, jossa sovelluskannan asettelu ladataan vain kerran ja loput sivut ja komponentit ladataan vain tarpeen mukaan. Tämä on mahdollista voimalla Javascript, joka dynaamisesti päättää, mitä sisältöä tarvitaan, hakee tiedot, ja tekee sen haluttuun muotoon.

Kulmikas CMS mahdollistaa dynaamisen sisällön, jota markkinoijat voivat päivittää.

yksisivuisen sovelluksen edut

dynaamisuutensa vuoksi yksisivuisella sovelluksella on paljon siihen liittyviä luontaisia etuja. Osa näistä on lueteltu alla:

  • nopeampi siirtymäaika, kun sovellus on ladattu
  • sujuvammat kokemukset verrattuna perinteiseen verkkosovellukseen
  • vähemmän kuormitusta palvelimelle, joka käsittelee sivuja
  • nopeampi kehitysaika hienostuneilla kehyksillä kuten Angular

näistä eduista huolimatta yksi merkittävä haaste yksisivuisilla sovelluksilla on SEO.

Angular SEO challenges

ymmärrettynä Angular ei lataa sivuja uudelleen, ellei sitä erikseen pyydetä. Angular tukee sivujen metatietojen muutosta dynaamisesti, mutta se riippuu täysin JavaScriptistä. Kuten aiemmin, hakukoneen tela ei yleensä viihdyttää Javascript. Tämä voi aiheuttaa sen, että kulmikkaat Sovellukset epäonnistuvat oikean sisällön tai metatiedon renderöinnissä.

Angular SEO - Hakukonetulokset

kuitenkin vuosien saatossa Angular SEO on kehittynyt ja yhteisö on tuonut ratkaisun tämän kiertämiseksi. Ratkaisu mahdollistaa staattisten sivujen luomisen kulmikkaista sivuista. Nämä staattiset sivut sisältävät oikeat metatiedot ja valmiiksi renderöidyn sisällön. Myöhemmin tässä artikkelissa, sukellamme tähän prosessiin ymmärtää haasteita ja toteuttaa taktiikkaa optimoida Kulmikas SEO.

Angular SEO: Developing search-friendly pages

ennen kuin alamme rakentaa toimivaa Angular SEO-ratkaisua, aloittakaamme luomalla tyhjä Angular JS-sovellus.

ng new seo-friendly-app

komento luo raikkaan kulmikkaan JS-sovelluksen, jossa luomme yksinkertaisen kotisivun ja blogisivun, renderoimme blogisivulle sisältöä ButterCMS-sovellusliittymien avulla ja teemme niistä SEO-ystävällisiä.

aloitetaan luomalla sivuja ja reittejä samalle. Suorita alla komentoja terminaalissa luoda kodin ja blogin sivuja.

ng g c pages/home --skipTests=trueng g c pages/blog --skipTests=true

Tämä luo komponentit ja tuo ne sovellukseen.moduuli.ts-tiedosto. Nyt, lisää sivut reititys moduuli, jotta voimme reitittää näille sivuille. Muokkaa sovelluksen reititystä.moduuli.ts-tiedosto.

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './pages/home/home.component';import { BlogComponent } from './pages/blog/blog.component';const routes: Routes = ;@NgModule({ imports: ,exports: })export class AppRoutingModule { }

yllä oleva koodi kartoittaa vastaavat komponentit reiteineen ja joukkoineen HomeComponent oletuskomponenttina. Nyt, muokata sovellusta.komponentti.html-tiedosto, joka sisältää vain yhden rivin koodia.

<router-outlet></router-outlet>

suorita sovellus lopuksi alla olevalla komennolla ja tarkista, että sovellus on määritetty oikein. Kun komento menee läpi, voit lyödä URL localhost: 4200 varmistaa, että asiat ovat hyvin. Sinun pitäisi nähdä teksti ” koti toimii!”.

ng serve

nyt lisätään otsikko, jonka avulla voidaan selata sivuja. Luo otsikkokomponentti alla olevalla komennolla.

ng g c header --skipTests=true

muokkaa seuraavaksi otsikon sisältöä.komponentti.html sisältää navigointielementit.

<div><a ="">Home</a></div><div><a ="">Blog</a></div>

lopuksi käytössä on täydellinen sovellus, jossa on kaksi sivua ja yksinkertainen kääntämätön navigointi, jolla voi liikkua sivujen välillä. Nyt, olkaamme analysoida tätä sovellusta SEO näkökulmasta. Napsauta hiiren kakkospainikkeella selainta ja valitse ”Näytä sivun lähde”. Sinun pitäisi pystyä näkemään, miten hakukoneen indeksoijat näkisivät sivusi ilman Javascript. Koodi näyttää alla olevalta pätkältä.

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>SeoFriendlyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root></app-root><script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body></html>

nyt siirry blogisivulle ja suorita sama toiminto ja huomaa sivun sisältö. Se on samanlainen. Tämä sisältää sivun otsikko sekä elin. Tämä johtuu siitä, että Angular muokkaa DOM: ia JavaScriptin avulla.

dynaamisten sivujen luominen

näin onnistuimme toteuttamaan tämän staattisilla sivuilla. Olkaamme nyt tehdä blogit ja blogin sisältöä sivu käyttäen ButterCMS API. Näin voimme suorittaa SEO staattinen sekä dynaaminen web-sisältöä. Ennen kuin aloitat sen, älä rekisteröi ilmainen kokeilutili ButterCMS pystyä luomaan dynaamista sisältöä helposti.

voit tehdä tämän asentamalla ButterCMS-liitännäisen NPM: n avulla.

npm install --save buttercms

kun se on asennettu, luodaan palvelutiedosto path services / butterCMS-sivustolle.palvelu.ts ja laittaa alla sisältöä tiedoston sisällä.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

korvaa tunnuksesi yllä olevassa koodissa. Tämä palvelutiedosto varmistaa, että tunnusta hallitaan maailmanlaajuisesti yhdessä tiedostossa. Voimme tuoda tämän tiedoston sinne, missä meidän täytyy käyttää ButterCMS-palveluita. Nyt, olkaamme nopeasti toteuttaa alla koodi blogissa.komponentti.ts-tiedosto saada luettelo viroista.

import { Component, OnInit } from '@angular/core';import { butterService } from '../../services/butter-cms.service';@Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrls: })export class BlogComponent implements OnInit { posts:any; constructor() { this.fetchPosts(); } private fetchPosts() { butterService.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log('Content from ButterCMS'); console.log(res); this.posts = res.data.data; }); } ngOnInit() { }}

nyt, mene selaimeen ja tarkasta konsolin ulostulo konsolista. Sinun pitäisi pystyä näkemään luettelo viroista selainkonsolissa. Kuten näette koodi pätkä alla, tämä osoittaa kaksi virkaa, jotka olen luonut tämän opetusohjelma.

nyt, renderöikäämme Tämä sisältö blogin sivulle. Voit tehdä niin päivittämällä blogiasi.komponentti.html-tiedosto alla olevalla koodilla:

<div *ngIf="posts!=undefined"><div *ngFor="let post of posts.data"> <hr> <h1>{{post.title}}</h1> <div ="post.body"></div></div></div> 

Tämä muuttaa viestit ButterCMS-alustalta verkkosivulle. Olkaamme nyt ymmärtää, miten asettaa mukautetun otsikko ja metatunnisteita jokaiselle sivulle.

Angular SEO: n otsikon ja metatunnisteiden asettaminen

Angular ymmärtää tämän ongelman ja sillä on jo ratkaisu tähän. Lisätäksesi metatietoja ja muokataksesi sivun otsikkoa dynaamisesti, sinun tarvitsee vain käyttää näitä Angular-moduuleja. Päivitä kotisi koodi.komponentti.ts tiedosto alla. Suorita samanlaisia muutoksia blogissasi.komponentti.samoin.

import { Component, OnInit } from '@angular/core';import { Meta,Title } from '@angular/platform-browser';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: })export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags(); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { }}

kun nämä muutokset on tallennettu, seuraa otsikkoa selaimen välilehdellä. Se muuttuu dynaamisesti, kun selaat sivuja. Lisäksi, jos tarkastat koodin selainkonsolissa näet, että vastaava metadata on myös liitetty. Kuitenkin, jos tarkistat sivun lähde sisältö on edelleen sama. Tämä tarkoittaa, että jos Javascript on sallittu, voimme luoda dynaaminen otsikko ja meta, mutta ei ilman sitä.

näin ollen tarvitsemme tavan ottaa tämän renderöidyn sivun sisältö ja lähettää se käyttäjälle. Tätä prosessia kutsutaan sisällön esirenderöinniksi, ja se on ratkaisevan tärkeää hyvän kulmikkaan SEO: n saavuttamiseksi. Esirenderöintiin on useita menetelmiä. Seuraavassa jaksossa tutustumme yhteen niistä.

Esirenderöinnin tarpeen ymmärtäminen

esirenderöinnin tarve tarkoittaa käytännössä sitä, että sivun HTML-sisältö koottaisiin etukäteen. Näin varmistetaan, että sivun nimi ja metatiedot ovat läsnä, kun se saapuu asiakaspuolelle. Esirenderöinnillä voimme altistaa lopullisen HTML-sisällön telaketjulle tyhjän HTML: n sijaan.

toteuttaa esirenderöinnin Kulmasovelluksiin

Kulmasovellusten päivitysten myötä, nyt mukana on standardoitu ratkaisu myös esirenderöintiin. Prosessi on melko yksinkertainen. Hyödyntäisimme Angular Universal-pakettia tukemaan sivujen esirenderointia. Jos haluat lisätä Angular universal-paketin, suorita alla oleva komento projektin nimellä, jota käytit Angular-sovelluksen luomisessa.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

Tämä luo joitakin tiedostoja projektiin ja määrittää projektisi tukemaan esirenderointia NodeJS-palvelimella. Suorittaaksesi tämän, suorita alla oleva komento.

npm run build:ssr && npm run serve:ssr

Tämä komento kokoaa, rakentaa staattiset sivusi, sijoittaa ne dist-kansioon ja palvelee niitä ajamalla NodeJS-palvelinta. Tämän avulla olemme parantaneet huomattavasti kulmikasta SEO: ta varmistamalla, että sovelluksemme on rakennettu SEO-ystävällisellä tavalla ja kaikki sen sisältö on dynaamisesti renderoitu.

validoimalla SEO-ystävällisen Kulmikas SPA

toteutuksen validoimiseksi voit mennä selaimeen ja tarkastella kunkin sivun sivulähdettä. Nyt, voit nähdä, että selain tekee tarkka HTML-sisältöä kuin voit odottaa sen. Tämän avulla perustimme yksinkertaisen unstyled-blogin, jossa on SEO-ystävällinen renderöinti Angular frameworkissa. ButterCMS, voit tehdä paljon enemmän kuin dynaamisesti hakemalla SEO tunnisteet, meta kuvaukset, ja jopa sivun sisältöä itse. Tutustu Angular API-dokumentaatioon saadaksesi lisätietoja.

Rekisteröidy vastaanottamaan artikkeleita ja opetusohjelmia Angular SEO: sta.

Vastaa

Sähköpostiosoitettasi ei julkaista.