Angular & SEO – Making Angular 6 Single-Page Web Apps Search-Engine Friendly
W poniższym tutorialu przyjrzymy się najprostszemu podejściu, które jest dostępne, aby pozbyć się tego ograniczenia dla twojej aplikacji Angular 6 poprzez użycie renderowania po stronie serwera z Angular Universal.
Aby zacząć, najpierw skonfigurujmy nową aplikację Angular w następujących krokach.
Aby skonfigurować nową aplikację Angular, używamy Angular CLI. Aby zainstalować Angular CLI w swoim systemie użyj Node.js Package Manager w następujący sposób w wierszu poleceń:
$ npm install -g @angular/cli
Po pomyślnym zainstalowaniu Angular CLI możliwe jest użycie nowego polecenia ng do skonfigurowania nowego projektu Angular od podstaw:
$ ng new ngseo --routing
Z opcją new mówimy, że należy utworzyć nowy projekt Angular, ngseo to nazwa nowego projektu, a używając opcji – routing upewniamy się, że do projektu zostanie dodana również podstawowa konfiguracja routingu.
Po pomyślnym skonfigurowaniu projektu jesteśmy w stanie przejść do nowo utworzonego folderu projektu:
$ cd ngseo
I uruchomić deweloperski serwer WWW za pomocą Angular CLI ponownie w następujący sposób:
$ ng serve -o
Powinieneś teraz być w stanie zobaczyć następujący wynik w przeglądarce:
How Crawlers See Single-Page Web Apps
Teraz, gdy mamy działającą aplikację Angular zbadajmy, jak crawlery wyszukiwarek widzą naszą stronę. Mamy dobre wrażenie, gdy używamy narzędzia wiersza poleceń curl, aby uzyskać dostęp do naszej witryny:
$ curl localhost:4200
Wynik, który otrzymujemy z powrotem powinien wyglądać podobnie do poniższego:
W tym miejscu możesz zauważyć, że główna treść strony nie jest częścią tego dokumentu HTML. Zamiast tego znajdziesz element placeholder <app-root> wewnątrz sekcji body. To właśnie Angular wstawia zawartość strony, gdy wykonywany jest kod JavaScript strony. Jednak crawler nie jest w stanie zobaczyć tej zawartości, ponieważ kod JavaScript nie jest wykonywany.
Angular Universal For Server-Side Rendering
Co więc może być rozwiązaniem tego problemu? Tak, jest to renderowanie po stronie serwera (SSR). Kiedy renderowanie po stronie serwera jest wykonywane, kod JavaScript aplikacji Angular jest już wykonywany na serwerze, a kompletna struktura HTML i zawartość będzie dostępna również dla robotów indeksujących.
Technologia, która umożliwia renderowanie po stronie serwera dla aplikacji Angular, nazywa się Angular Universal. Angular Universal generuje statyczne strony aplikacji na serwerze poprzez proces zwany renderowaniem po stronie serwera.
Szczegółowy opis tego, jak używać Angular Universal, jest dostępny na stronie https://angular.io/guide/universal. Istnieje jednak inne podejście, które sprawia, że dodanie Angular Universal jest bardzo proste: użycie pakietu @ng-toolkit/universal.
Adding Angular Universal With @ng-toolkit/universal To Make Your Angular Application Search-Engine Friendly
Pakiet @ng-toolkit/universal jest dodawany do naszego projektu poprzez ponowne użycie polecenia ng w następujący sposób:
$ ng add @ng-toolkit/universal
Po dodaniu pakietu, otwórz package.json i upewnij się, że pakiet webpack-cli jest wymieniony w sekcji zależności z co najmniej wersją 3.1:
"webpack-cli": "^3.1.0"
Jeśli tak nie jest zmień odpowiednio ten wpis i wykonaj następujące polecenie:
$ npm install
Następnie, zamiast uruchamiać ng serve -o uruchamiasz:
$ npm run build:prod
i
$ npm run server
Serwer jest uruchamiany na localhost:8080 i jeśli uzyskujesz dostęp do tego adresu URL w przeglądarce, powinieneś być w stanie ponownie zobaczyć stronę domyślnej aplikacji kątowej.
Spróbujmy ponownie uzyskać dostęp do strony internetowej poprzez curl:
$ curl localhost:8080
Wyjście powinno teraz wyglądać tak, jak to widać na poniższym zrzucie ekranu:
Tym razem dołączona jest pełna zawartość strony HTML. Powodem tego jest to, że strona HTML została wyrenderowana jako część procesu budowania (po stronie serwera) i jest teraz dostępna bez potrzeby wykonywania kodu JavaScript po stronie klienta. Dzięki temu crawler wyszukiwarki jest w stanie znaleźć zawartość strony i może upewnić się, że jest ona poprawnie dodana do wyników wyszukiwania.
Wnioski
Domyślnie Angular używa renderowania po stronie klienta, co stanowi problem, gdy Twoja strona powinna być wyświetlana w wynikach wyszukiwarki. Rozwiązaniem jest renderowanie aplikacji po stronie serwera i generowanie końcowych elementów HTML, które wyszukiwarki mogą łatwo zinterpretować.
Renderowanie po stronie serwera dla aplikacji Angular można osiągnąć za pomocą Angular Universal. Dodanie Angular Universal do istniejącej aplikacji Angular jest bardzo proste dzięki użyciu pakietu @ng-toolkit/universal.
Ten post został opublikowany po raz pierwszy na CodingTheSmartWay.com.
#1 Angular 6 – The Complete Guide
Master Angular (Angular 2+, incl. Angular 6) i buduj niesamowite, reaktywne aplikacje internetowe z następcą Angular.js
Go To Course …
Zastrzeżenie: Ten post zawiera linki partnerskie, co oznacza, że jeśli klikniesz na jeden z linków do produktów, otrzymam niewielką prowizję. To pomaga wspierać ten blog!