Úhlové rámec je strukturální javascript-based framework pro webové aplikace. Používá se k vytváření dynamických webových stránek s obsahem poskytovaným prostřednictvím webových služeb. Úhlový rámec je velmi příjemný pro vývojáře. Existuje již několik let a nashromáždila silnou komunitu nástrojů a nástrojů, včetně úhlových nástrojů CMS, backendové rámce, a více.

úhlový ekosystém

aplikace vytvořené pomocí úhlového rámce se nazývají jednostránkové aplikace (SPAs) kvůli tomu, jak fungují. Úhlová aplikace, po načtení, vykresluje další stránky dynamicky bez opětovného načtení webových stránek znovu. Tato zkušenost je dodávána s výkonem rámce Angular javascript. Dynamicky upravuje stránky spuštěním kódu javascript nebo načtením pouze požadovaného obsahu. To dává uživateli hladký zážitek bez čekání na opětovné načtení. Úhlové stránky však mohou mít nepříznivé účinky na jejich optimalizaci pro vyhledávače (SEO).

v tomto článku formulujeme, jak Úhlové aplikace potřebují speciální SEO ošetření, a poskytujeme některé konkrétní pokyny pro nasazení, abychom usnadnili dobré Úhlové SEO.

porozumění prohledávačům vyhledávačů a SEO

než se budeme zabývat řešením, pochopme, jak prohledávače vyhledávačů (nebo roboty) skutečně fungují. Vyhledávače po celém světě procházejí vaše webové stránky, aby porozuměly stránkám a konečnému cíli vašeho podnikání. Za tímto účelem prohledávače čtou metadata stránek, jako je název, popis, značky obrázků a kategorie. Tato metadata musí být pro každou stránku odlišná, aby vyhledávače mohly porozumět záměru každé stránky.

Tradiční SEO - Search crawler výsledky

vyhledávač bot dosahuje konkrétní stránku, najde odkazy na stránky, čte metadata na stránce, a začne procházející přes hypertextové odkazy. Stále opakuje tento proces na vašem webu, dokud není schopen najít žádné nové odkazy. Během tohoto procesu bot stáhne statický obsah vašeho webu a rozumí stránce. Proto je důležité maximalizovat podrobnosti každé stránky v metadatech a statickém obsahu.

náš úhlový CMS umožňuje dynamický obsah, který mohou vaši obchodníci aktualizovat.

SEO se dnes stala jednou z nejdůležitějších investic pro jakékoli online podnikání. V minulosti byly vyvíjené webové aplikace poměrně jednoduché a obsahovaly převážně statické stránky. Tyto stránky obsahovaly všechny požadované informace předem zakódované do nich. Jak se vývoj webových aplikací vyvíjel, vstoupili jsme do éry dynamického vykreslování obsahu, kde je obsah webových stránek někde uložen a načten podle potřeby.

Existují dva způsoby, jak to udělat:

  1. Server-side vykreslování
  2. na straně Klienta vykreslování

Vzhledem k nedostatku sofistikované klientské straně vykreslování rámce v minulosti, server-side vykreslování stránek byl trend. Tam bylo mnoho jazyků a rámců zvládnout totéž. Například PHP, Java Spring, NodeJS s řídítky a další rámce vykreslují stránky předem a odesílají do frontendu pouze prostý obsah HTML.

Tento přístup zajišťuje, že stránka má právo meta tagy, a veškerý obsah poskytované před tím, než je obdržela vyhledávač crawler. Konvenční webové aplikace byly tedy prakticky jednoduché, pokud jde o SEO. Určitě však měli nevýhodu delší doby načítání. U low-end serverů se zpracování tisíců požadavků na stránky stalo obtížným. To přineslo frontendové rámce jako Angular do obrázku.

SEO pro Single Page Aplikace (Spa)

single page aplikace je koncept, kde aplikace základní rozložení je načten pouze jednou, a zbytek stránky a komponenty jsou načteny pouze podle potřeby. To je možné díky síle JavaScriptu, který dynamicky rozhoduje o tom, jaký obsah je vyžadován, načte data a vykreslí je v požadovaném formátu.

náš úhlový CMS umožňuje dynamický obsah, který mohou vaši obchodníci aktualizovat.

Výhody jednu stránku aplikace

Vzhledem ke své dynamické povaze, a single page aplikace má spoustu vlastní výhody s ním spojené. Některé z nich jsou uvedeny níže:

  • Rychlejší čas přechodu jakmile je aplikace byl načten
  • Hladší zkušenosti ve srovnání s konvenční webové aplikace
  • Menší zátěž na webserver zpracování stránek
  • Rychlejší čas na vývoj sofistikovaných rámců, jako Úhlové

i Přes tyto výhody, jedním z významných problémů s single page aplikací je SEO.

Úhlové SEO výzvy

Jak je zřejmé, Úhlové nebude reload stránky, pokud není výslovně požádán, aby. Angular podporuje dynamickou změnu metadat pro stránky, ale zcela závisí na JavaScriptu. Jak již bylo uvedeno výše, prohledávače vyhledávačů obvykle nebaví Javascript. To může způsobit selhání úhlových aplikací při vykreslování správného obsahu nebo metadat.

Angular SEO - Search engine crawler results

v průběhu let se však Angular SEO vyvinul a komunita přinesla řešení, jak to obejít. Řešení nám umožňuje vytvářet statické stránky mimo Úhlové stránky. Tyto statické stránky obsahují správná metadata a předem vykreslený obsah. Později v tomto článku se ponoříme do tohoto procesu, abychom porozuměli souvisejícím výzvám a implementovali taktiku pro optimalizaci úhlového SEO.

Angular SEO: vývoj stránek vhodných pro vyhledávání

než začneme vytvářet funkční řešení Angular SEO, začněme vytvořením prázdné aplikace Angular JS.

ng new seo-friendly-app

příkaz vytvoří nový Úhlový JS aplikace, kde jsme se vytvořit jednoduchý domovské stránky a stránky blogu, poskytují nějaký obsah na stránce blogu pomocí ButterCMS Api a učinit je SEO-friendly.

začněme vytvořením stránek a tras pro stejné. Proveďte níže uvedené příkazy v terminálu a vytvořte své domovské a blogové stránky.

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

tím vytvoříte komponenty a importujete je do aplikace.modul.soubor ts. Nyní přidejte stránky do směrovacího modulu, abyste nám umožnili směrovat na tyto stránky. Upravte směrování aplikací.modul.soubor ts.

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 { }

výše uvedený kód mapy jednotlivých komponent s jejich trasy a nastaví HomeComponent jako výchozí složka. Nyní upravte aplikaci.součást.html soubor obsahuje pouze jeden řádek kódu.

<router-outlet></router-outlet>

nakonec spusťte aplikaci pomocí níže uvedeného příkazu a zkontrolujte, zda je vaše aplikace správně nastavena. Jakmile příkaz projde, můžete kliknout na adresu URL localhost: 4200, abyste zajistili, že jsou věci nastaveny dobře. Měli byste vidět text “ domácí práce!“.

ng serve

nyní přidáme záhlaví, které nám umožní procházet stránkami. Vytvořte komponentu záhlaví pomocí níže uvedeného příkazu.

ng g c header --skipTests=true

dále upravte obsah záhlaví.součást.html obsahuje navigační prvky.

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

Konečně, budete mít kompletní aplikace, kde máte dvě stránky a jednoduché unstyled navigaci, která umožňuje pohyb mezi stránkami. Nyní analyzujme tuto aplikaci z pohledu SEO. Klepněte pravým tlačítkem myši na prohlížeč a vyberte „Zobrazit zdroj stránky“. Měli byste být schopni vidět, jak prohledávače vyhledávačů uvidí vaši stránku bez JavaScriptu. Kód vypadá jako níže uvedený úryvek.

<!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>

Nyní přejděte na stránku blogu a proveďte stejnou akci a všimněte si obsahu stránky. Je to podobné. To zahrnuje název stránky i tělo. Je to proto, že Angular upravuje váš DOM pomocí JavaScriptu.

vytvoření dynamických stránek

tímto se nám to podařilo implementovat na statické stránky. Pojďme nyní vykreslit naše blogy a stránku s obsahem blogu pomocí rozhraní ButterCMS API. To nám umožní provádět SEO na statickém i dynamickém webovém obsahu. Než začnete s tím, zaregistrujte si bezplatný zkušební účet u ButterCMS, abyste mohli snadno vytvářet dynamický obsah.

Chcete-li to provést, pojďme nainstalovat ButterCMS plugin pomocí NPM.

npm install --save buttercms

Po instalaci vytvoříme soubor služby na cestě služby / butterCMS.Služba.ts a vložte níže uvedený obsah do souboru.

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

nahraďte token ve výše uvedeném kódu. Tento soubor služby zajišťuje, že token je spravován globálně v jednom souboru. Tento soubor můžeme importovat všude tam, kde potřebujeme používat Služby ButterCMS. Nyní, pojďme rychle implementovat níže uvedený kód v blogu.součást.ts soubor získat seznam příspěvků.

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() { }}

Nyní přejděte do prohlížeče a zkontrolujte výstup konzoly v konzole. Měli byste mít možnost vidět seznam vašich příspěvků v konzole prohlížeče. Jak můžete vidět v úryvku kódu níže, To ukazuje dva příspěvky, které jsem vytvořil pro tento tutoriál.

nyní vykreslujme tento obsah na stránce blogu. Chcete-li tak učinit, aktualizujte svůj blog.součást.html soubor s níže uvedeným kódem:

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

tím se vykreslí příspěvky z vaší platformy ButterCMS na webovou stránku. Pojďme nyní pochopit, jak nastavit vlastní název a metaznačky pro každou stránku.

nastavení názvu a metaznaček pro Angular SEO

Angular chápe tento problém a již má řešení. Chcete-li přidat metadata a dynamicky upravit název stránky, stačí použít tyto moduly od společnosti Angular. Aktualizujte kód pro váš domov.součást.ts soubor s níže. Proveďte podobné změny na svém blogu.součást.ts také.

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() { }}

jakmile jsou tyto změny uloženy, Sledujte název na kartě prohlížeče. Dynamicky se mění při procházení stránkami. Pokud navíc zkontrolujete kód v konzole prohlížeče, uvidíte, že byla také připojena odpovídající metadata. Pokud však zkontrolujete zdroj stránky, obsah je stále stejný. To znamená, že pokud je povolen Javascript, můžeme vygenerovat dynamický název a meta, ale ne bez něj.

potřebujeme tedy způsob, jak vzít obsah této vykreslené stránky a odeslat ji uživateli. Tento proces se nazývá předběžné vykreslování obsahu a je rozhodující pro dosažení dobrého úhlového SEO. Existuje několik způsobů provedení předběžného Vykreslování. V další části prozkoumáme jednu z nich.

pochopení potřeby předrenderování

Předrenderování v podstatě znamená, že HTML obsah stránky by byl sestaven předem. To by zajistilo, že název a metadata stránky jsou přítomny, když se dostanou na stranu klienta. S předběžným vykreslením můžeme konečný obsah HTML vystavit prohledávači spíše než vystavit prázdný HTML.

Provádění pre-rendering pro Úhlové aplikace

S upgrady v Úhlové, nyní přichází s standardizované řešení pro pre-rendering stejně. Tento proces je poměrně jednoduchý. Využili bychom balíček Angular Universal k podpoře předběžného vykreslování stránek. Chcete-li přidat balíček Angular universal, spusťte níže uvedený příkaz s názvem projektu, který jste použili při vytváření aplikace Angular.

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

To bude vytvořit nějaké soubory v rámci projektu a konfiguraci projektu na podporu pre-rendering pomocí NodeJS server. Chcete-li to spustit, spusťte níže uvedený příkaz.

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

Tento příkaz sestavuje, vytváří statické stránky, umístí je do složky dist a slouží jim spuštěním serveru NodeJS. Díky tomu jsme výrazně vylepšili naše Úhlové SEO tím, že jsme zajistili, že naše aplikace je postavena způsobem šetrným k SEO a veškerý její obsah je dynamicky vykreslen.

ověření vašeho SEO-friendly Angular SPA

Chcete-li ověřit implementaci, můžete přejít do prohlížeče a zobrazit zdroj stránky pro každou stránku. Nyní uvidíte, že prohlížeč vykreslí přesný obsah HTML tak,jak byste očekávali. Díky tomu jsme založili naši implementaci jednoduchého nestylovaného blogu s vykreslováním vhodným pro SEO na Angular framework. S ButterCMS, můžete udělat mnohem víc, jako dynamicky načítání SEO tagy, meta popisy, a dokonce i obsah stránky sám. Podívejte se na naši úhlovou dokumentaci API a dozvíte se více.

přihlaste se k odběru článků a návodů na Úhlové SEO.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.