the Angular framework is a structural javascript-based framework for web applications. Służy do tworzenia dynamicznych stron internetowych z treścią renderowaną za pośrednictwem serwisów internetowych. Angular framework jest bardzo przyjazny dla programistów. Istnieje już od kilku lat i zgromadził silną społeczność narzędzi i narzędzi, w tym Narzędzia Angular CMS, struktury zaplecza i inne.

ekosystem kątowy

aplikacje zbudowane przy użyciu frameworka kątowego nazywane są aplikacjami Jednostronicowymi (spa) ze względu na sposób ich działania. Aplikacja Angular, po załadowaniu, renderuje inne strony dynamicznie bez ponownego ładowania stron internetowych. To doświadczenie jest dostarczane z mocą Angular javascript framework. Dynamicznie modyfikuje strony uruchamiając kod javascript lub ładując tylko wymaganą zawartość. Daje to użytkownikowi płynne wrażenia bez czekania na przeładowanie. Jednak witryny kątowe mogą mieć niekorzystny wpływ na ich optymalizację pod kątem wyszukiwarek (SEO).

w tym artykule wyjaśniamy, jak aplikacje Angular wymagają specjalnego traktowania SEO i dostarczamy konkretne instrukcje wdrażania, aby ułatwić dobre Angular SEO.

zrozumienie wyszukiwarek indeksujących i SEO

zanim zajmiemy się rozwiązaniem, pozwól nam zrozumieć, jak faktycznie działają Wyszukiwarki indeksujące (lub boty). Wyszukiwarki na całym świecie indeksują Twoje witryny, aby zrozumieć strony i końcowy cel twojej firmy. W tym celu roboty czytają metadane stron, takie jak tytuł, opis, tagi obrazów i kategorie. Te metadane muszą być różne dla każdej strony, aby umożliwić wyszukiwarkom zrozumienie intencji każdej strony.

tradycyjne wyniki wyszukiwania SEO

bot Wyszukiwarki dociera do określonej strony, znajduje hiperłącza na stronie, odczytuje metadane na stronie i zaczyna przechodzić przez hiperłącza. Powtarza ten proces na twojej stronie, dopóki nie będzie w stanie znaleźć żadnych nowych linków. Podczas tego procesu bot pobiera statyczną zawartość twojej witryny i rozumie stronę. Dlatego ważne staje się zmaksymalizowanie szczegółów każdej strony w metadanych i zawartości statycznej.

nasz Angular CMS umożliwia dynamiczną treść, którą marketerzy mogą aktualizować.

SEO stało się dziś jedną z najważniejszych inwestycji dla każdego biznesu online. W przeszłości rozwijane aplikacje internetowe były dość proste i zawierały głównie statyczne strony. Strony te zawieraĺ ’ y wszystkie wymagane informacje zakodowane w nich. Wraz z rozwojem aplikacji internetowych wkroczyliśmy w erę dynamicznego renderowania treści, w którym zawartość stron internetowych jest gdzieś przechowywana i pobierana w razie potrzeby.

można to zrobić na dwa sposoby:

  1. renderowanie po stronie serwera
  2. renderowanie po stronie klienta

ze względu na brak wyrafinowanych RAM renderowania po stronie klienta w przeszłości, renderowanie stron po stronie serwera było trendem. Było wiele języków i frameworków do obsługi tego samego. Na przykład PHP, Java Spring, NodeJS z kierownicą i inne frameworki renderują strony z wyprzedzeniem i wysyłają tylko zwykłą zawartość HTML do interfejsu.

takie podejście zapewnia, że strona ma odpowiednie metatagi i całą zawartość renderowaną przed jej odebraniem przez wyszukiwarkę. Tak więc konwencjonalne aplikacje internetowe były praktycznie proste, jeśli chodzi o SEO. Jednak z pewnością miały one minusy dłuższych czasów ładowania. Dzięki serwerom low-end przetwarzanie tysięcy zapytań o Strony stało się trudne. Dzięki temu pojawiły się frameworki frontendowe, takie jak Angular.

SEO dla aplikacji Single Page (Spa)

aplikacja single page to koncepcja, w której układ podstawowy aplikacji jest ładowany tylko raz, a reszta stron i komponentów jest ładowana tylko w razie potrzeby. Jest to możliwe dzięki mocy Javascript, który dynamicznie decyduje, jaka zawartość jest wymagana, pobiera dane i renderuje je w żądanym formacie.

nasz Angular CMS umożliwia dynamiczną treść, którą marketerzy mogą aktualizować.

zalety aplikacji jednostronicowej

ze względu na swój dynamiczny charakter, aplikacja jednostronicowa ma wiele nieodłącznych korzyści z nią związanych. Niektóre z nich są wymienione poniżej:

  • szybszy czas przejścia po załadowaniu aplikacji
  • płynniejsze wrażenia w porównaniu do konwencjonalnej aplikacji internetowej
  • mniejsze obciążenie serwera www przetwarzającego strony
  • szybszy czas rozwoju dzięki zaawansowanym frameworkom, takim jak Angular

pomimo tych korzyści, jednym z istotnych wyzwań w przypadku aplikacji jednostronicowych jest SEO.

Angular SEO challenges

jak rozumiem, Angular nie przeładowuje stron, chyba że wyraźnie o to poproszono. Angular obsługuje dynamiczną zmianę metadanych stron, ale całkowicie zależy to od JavaScript. Jak wspomniano wcześniej, roboty wyszukiwarek zwykle nie obsługują Javascript. Może to spowodować błąd aplikacji Angular w renderowaniu właściwej zawartości lub metadanych.

Angular SEO - wyniki wyszukiwania w wyszukiwarkach

jednak na przestrzeni lat Angular SEO ewoluowało, a społeczność przyniosła rozwiązanie, aby to obejść. Rozwiązanie pozwala na tworzenie statycznych stron ze stron kątowych. Te statyczne strony zawierają odpowiednie metadane i wstępnie renderowaną zawartość. W dalszej części tego artykułu zagłębimy się w ten proces, aby zrozumieć związane z tym wyzwania i wdrożyć taktyki w celu optymalizacji kątowego SEO.

Angular SEO: tworzenie stron przyjaznych wyszukiwarkom

zanim zaczniemy budować działające rozwiązanie Angular SEO, zacznijmy od stworzenia pustej aplikacji Angular JS.

ng new seo-friendly-app

polecenie tworzy świeżą aplikację Angular JS, w której stworzymy prostą stronę domową i blogową, wyrenderujemy zawartość na stronie bloga za pomocą API ButterCMS i uczynimy je przyjaznymi SEO.

zacznijmy od stworzenia stron i tras dla tego samego. Wykonaj poniższe polecenia w Terminalu, aby utworzyć Strony domowe i blogowe.

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

spowoduje to utworzenie komponentów i zaimportowanie ich do aplikacji.moduł.akta ts. Teraz dodaj strony do modułu routingu, aby umożliwić nam przekierowanie do tych stron. Zmodyfikuj routing aplikacji.moduł.akta 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 { }

powyższy kod mapuje odpowiednie komponenty z ich trasami i zestawamiHomeComponent jako komponent domyślny. Teraz zmodyfikuj aplikację.komponent.plik html zawierający tylko jeden wiersz kodu.

<router-outlet></router-outlet>

na koniec uruchom aplikację za pomocą poniższego polecenia i sprawdź, czy aplikacja jest poprawnie skonfigurowana. Po wykonaniu polecenia możesz nacisnąć adres URL localhost: 4200, aby upewnić się, że wszystko jest dobrze skonfigurowane. Powinieneś zobaczyć tekst ” home works!”.

ng serve

Teraz dodajmy nagłówek, który pozwala nam poruszać się po stronach. Utwórz komponent nagłówka za pomocą poniższego polecenia.

ng g c header --skipTests=true

następnie zmodyfikuj zawartość nagłówka.komponent.html zawierający elementy nawigacji.

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

wreszcie, masz kompletną aplikację, w której masz dwie strony i prostą, niestandardową nawigację, która pozwala poruszać się między stronami. Teraz przeanalizujmy tę aplikację z perspektywy SEO. Kliknij prawym przyciskiem myszy przeglądarkę i wybierz „Wyświetl źródło strony”. Powinieneś być w stanie zobaczyć, jak roboty wyszukiwarek będą widzieć Twoją stronę bez Javascript. Kod wygląda jak Poniższy fragment.

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

teraz przejdź do strony bloga i wykonaj tę samą akcję i zwróć uwagę na zawartość strony. Jest podobnie. Obejmuje to zarówno tytuł strony, jak i treść. Dzieje się tak, ponieważ Angular modyfikuje twój DOM za pomocą javascript.

tworzenie stron dynamicznych

tym razem udało nam się to zaimplementować na stronach statycznych. Renderujmy teraz nasze blogi i zawartość bloga za pomocą ButterCMS API. Pozwoli nam to na SEO zarówno na statycznych, jak i dynamicznych treściach internetowych. Zanim zaczniesz z nim, zarejestruj bezpłatne konto próbne z ButterCMS, aby móc łatwo tworzyć dynamiczne treści.

aby to zrobić, zainstalujmy wtyczkę ButterCMS za pomocą NPM.

npm install --save buttercms

Po zainstalowaniu utwórzmy plik Usługi w ścieżce services / butterCMS.serwis.ts i umieścić w poniższej treści wewnątrz pliku.

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

Zastąp token w powyższym kodzie. Ten plik usługi zapewnia, że token jest zarządzany globalnie w jednym pliku. Możemy zaimportować ten plik wszędzie tam, gdzie potrzebujemy skorzystać z usług ButterCMS. Teraz szybko zaimplementujmy poniższy kod na blogu.komponent.plik ts, aby uzyskać listę postów.

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

Teraz przejdź do przeglądarki i sprawdź wyjście konsoli w konsoli. Powinieneś być w stanie zobaczyć listę swoich postów w konsoli przeglądarki. Jak widać w poniższym fragmencie kodu, pokazuje to dwa posty, które stworzyłem dla tego samouczka.

teraz renderujmy tę treść na stronie bloga. Aby to zrobić, Zaktualizuj swój blog.komponent.plik html z poniższym kodem:

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

spowoduje to renderowanie postów z twojej platformy ButterCMS na stronę internetową. Pozwól nam teraz zrozumieć, jak ustawić niestandardowy tytuł i meta tagi dla każdej strony.

ustawienie title i meta tagów dla Angular SEO

Angular rozumie ten problem i już ma na to rozwiązanie. Aby dodać metadane i dynamicznie zmodyfikować tytuł strony, wystarczy wykorzystać te moduły z Angular. Zaktualizuj kod swojego domu.komponent.plik ts z poniższym. Wykonaj podobne zmiany na swoim blogu.komponent.ts również.

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

Po zapisaniu tych zmian należy obserwować tytuł na karcie przeglądarki. Zmienia się dynamicznie podczas poruszania się po stronach. Dodatkowo, jeśli sprawdzisz kod w konsoli przeglądarki, zobaczysz, że odpowiednie metadane również zostały dołączone. Jeśli jednak sprawdzisz źródło strony, zawartość jest nadal taka sama. Oznacza to, że jeśli Javascript jest dozwolony, możemy wygenerować dynamiczny tytuł i meta, ale nie bez niego.

dlatego potrzebujemy sposobu na pobranie zawartości tej renderowanej strony i przesłanie jej do użytkownika. Proces ten nazywa się pre-renderingiem treści i ma kluczowe znaczenie dla osiągnięcia dobrego kątowego SEO. Istnieje kilka metod do wykonania pre-renderingu. W następnej sekcji przyjrzymy się jednemu z nich.

zrozumienie potrzeby wstępnego renderowania

wstępne renderowanie zasadniczo oznacza, że zawartość HTML strony zostanie wcześniej skompilowana. Zapewni to, że tytuł i metadane strony będą obecne po stronie klienta. Dzięki Pre-renderowaniu możemy wystawiać ostateczną zawartość HTML na robota, zamiast wystawiać pusty HTML.

implementacja pre-renderingu dla aplikacji Angular

wraz z aktualizacjami w Angular, teraz pochodzi ze znormalizowanym rozwiązaniem do pre-renderingu. Proces jest dość prosty. Użylibyśmy pakietu Angular Universal do obsługi wstępnego renderowania stron. Aby dodać pakiet Angular universal, wykonaj poniższe polecenie z nazwą projektu użytą podczas tworzenia aplikacji Angular.

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

spowoduje to utworzenie niektórych plików w projekcie i skonfigurowanie projektu do obsługi wstępnego renderowania za pomocą serwera NodeJS. Aby to uruchomić, wykonaj poniższe polecenie.

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

To polecenie kompiluje, buduje Twoje statyczne strony, umieszcza je w folderze dist i służy im poprzez uruchomienie serwera NodeJS. Dzięki temu znacznie ulepszyliśmy nasze Angular SEO, zapewniając, że nasza aplikacja jest zbudowana w sposób przyjazny SEO, a cała jej zawartość jest dynamicznie renderowana.

sprawdzanie poprawności twojego SEO-friendly Angular SPA

aby zweryfikować implementację, możesz przejść do przeglądarki i wyświetlić źródło strony dla każdej strony. Teraz będziesz mógł zobaczyć, że przeglądarka renderuje dokładną zawartość HTML tak, jak byś się tego spodziewał. Dzięki temu stworzyliśmy naszą implementację prostego, nieścisłego bloga z przyjaznym dla SEO renderowaniem na Angular framework. Dzięki ButterCMS możesz zrobić o wiele więcej, na przykład dynamicznie pobierać tagi SEO, meta opisy, a nawet samą zawartość strony. Sprawdź naszą dokumentację API Angular, aby dowiedzieć się więcej.

Zarejestruj się, aby otrzymywać artykuły i tutoriale na temat pozycjonowania stron internetowych.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.