Блог уютное место для бесед Обратно в студию

Сышышь ты, выходи сюда,
поговорим !

Jak uczynić swoją aplikację Angular 4 SEO przyjazną

  1. Rozpoczęcie pracy z przyjazną dla SEO aplikacją Angular 4
  2. Konfigurowanie naszej aplikacji testowej Angular 4
  3. Ułatwianie SEO aplikacji Angular 4
  4. Testowanie naszej przyjaznej dla SEO aplikacji Angular 4
  5. Wniosek

Aplikacje Angular 4 ładują pierwszą nagą zawartość HTML przed pobraniem treści HTML dla ładowanej strony przy użyciu XMLHttpRequest. Aplikacje na jednej stronie są niesamowite! Szybko się ładują i dają dużą kontrolę nad sposobem uruchamiania aplikacji. Są analizowane przez przeglądarkę i dzięki temu masz kontrolę nad elementami DOM i całą tą dobrocią.

Jednak SPA nie są przyjazne dla SEO, ponieważ muszą dynamicznie zmieniać metatagi i treść za pomocą JavaScript, a ta zmiana nie jest zazwyczaj wybierana przez bota wyszukiwarki. Ponieważ niektóre boty wyszukiwania nie mogą analizować JavaScript podczas indeksowania witryny, za pierwszym razem zobaczą pierwszą nagą treść.

Mimo że Google mówi ich boty są teraz zdolne do renderowania JavaScript, nadal jest to niejasny obszar i błądzenie się po stronie ostrożności byłoby lepszym sposobem na osiągnięcie tego celu. Istnieją również inne wyszukiwarki, które nie obsługują JavaScript. Ten artykuł omawia, w jaki sposób uczynić program Angular 4 przyjaznym dla SEO i tym samym łatwiejszym do wykorzystania przez boty wyszukiwarek.

Orial To nie jest samouczek Angular 4 i nie będziemy opisywać szczegółów w ramach Angular 4. Będziemy po prostu pokazywać, jak używać renderowania po stronie serwera do obsługi w pełni wygenerowanej strony HTML.

Rozpoczęcie pracy z przyjazną dla SEO aplikacją Angular 4

Zanim zaczniemy samouczek, zbudujmy prostą aplikację, której będziemy używać do testowania naszej implementacji. Aplikacja będzie stroną zawierającą listę tematów na stronie głównej. Nie będziemy łączyć się z żadnym źródłem danych, ale zamiast tego będziemy kodować dane w komponencie.

Konfigurowanie naszej aplikacji testowej Angular 4

Aby skonfigurować naszą aplikację Angular, będziemy używać ng-cli i będziemy dzwonić do aplikacji Blogist .

Tworzenie nowej aplikacji za pomocą ng-cli
Aby skonfigurować, użyjemy polecenia ng new, aby utworzyć aplikację Angular 4.

$ ng nowy Blogista

⚠️ Uwaga: Aby aplikacja działała poprawnie, potrzebna będzie najnowsza wersja Angular CLI. Najnowsza wersja to 1.3.x jak w momencie pisania tego artykułu.

Następnie utworzymy komponent, w którym będziemy mogli dodać logikę naszego kodu do. W tym celu użyjemy polecenia komponentu ng g:

$ ng g komponent ./blog/posts

Dodawanie fałszywych danych do naszego komponentu PostComponent
Ze względu na zwięzłość nie będziemy łączyć się z zewnętrznym interfejsem API. Zamiast tego będziemy tworzyć tylko pozorowane dane i wykorzystywać te dane w naszej aplikacji.

Otwórz plik ./src/app/blog/posts.component.ts, dodamy trochę kodu do kodu, aby upewnić się, że działa tak, jak tego chcemy. Po pierwsze, napiszmy trochę danych do pliku. Dodaj nową metodę o nazwie postsData do komponentu.

private postsData () {return [{"title": "Dokonywanie Angular.js w czasie rzeczywistym z witrynami internetowymi przez marmur", "pubDate": "2017-08-23 14:41:52", "link": "https: // blog.pusher.com/making-angular-js-realtime-with-pusher/#comment-10372 "," guid ":" http://blog.pusher.com/?p=682#comment-10372 "," autor ":" marmur "," miniaturka ":" "," opis ":" zawsze wielkim fanem linkowania do blogerów, które lubię, ale nie cieszę się dużą ilością linków z "," treści ":" <p> zawsze wielkim fanem linkowania do blogerów, które lubię, ale nie cieszę się zbytnio dużym zainteresowaniem ze strony </p> "," enclosure ": []," kategorie ": []}, {" title ":" Making Angular .js realtime z Websockets przez pasek bez ramiączek na "," pubDate ":" 2017-08-23 05:05:08 "," link ":" https://blog.pusher.com/making-angular-js-realtime -z-pusher / # comment-10371 ”,„ guid ”:„ http://blog.pusher.com/?p=682#comment-10371 ”,„ autor ”:„ pasek bez ramiączek ”,„ miniatura ”: „”, „opis”: „bardzo kilka stron internetowych, które ukazują się poniżej, z naszego punktu widzenia niewątpliwie warto sprawdzić „,” treść ”:„ <p> kilka stron internetowych, które są szczegółowo opisane poniżej, z naszego punktu widzenia są niewątpliwie warte sprawdzenia </p> ”,„ obudowa ”: [], „kategorie”: []}, {„title”: „Dokonywanie Angular.js w czasie rzeczywistym z Websockets przez ograniczenia bondage”, „pubDate”: „2017-08-22 17:09:17”, „link”: „https://blog.pusher.com/making-angular-js-realtime-with-pusher/#comment-10370”, „guid”: „http://blog.pusher.com/?p=682#comment -10370 "," autor ":" ograniczenia bondage "," thumbnail ":" "," description ":" bardzo wiele stron internetowych, które występują poniżej, z naszego punktu widzenia są niewątpliwie warte sprawdzenia " , „content”: „<p> bardzo wiele stron internetowych, które pojawiają się poniżej, z naszego punktu widzenia są niewątpliwie warte sprawdzenia </p>”, „enclosure”: [], „kategorie”: []}]; }

Aby użyć naszych fałszywych danych utworzonych powyżej, zastąp metodę konstruktora klasy PostsComponent poniższym kodem:

posty publiczne; constructor () {this.posts = this.postsData (); }

W powyższym kodzie po prostu przypisaliśmy właściwość posts do wartości zwracanej postData, która jest naszą symulowaną odpowiedzią na wywołanie API.

Tworzenie widoku dla naszego PostsComponent
Teraz, gdy mamy nasze fałszywe posty, dane. Stworzymy widok, który wyświetli wszystkie posty z naszych udawanych danych.

Otwórz swój widok ./app/blog/posts.component.html i wprowadź poniższy kod:

<div class = "jumbotron"> <h1> Blogista </h1> <p> To najlepsze źródło najlepszych postów do tworzenia stron internetowych. </p> </div> <div class = "row"> <klasa div = "col-xs-12 col-md-12"> <ul class = "list-group"> <li class = "list-group-item" * ngFor = "let post of posts"> <h4> {{ post.title}} </h4> </li> </ul> </div> </div>

Powyższy kod po prostu pobiera dane z postów i zapętla je; za każdym razem wyświetlając tytuł postu.

Następnie otwórz plik index.html, aw <head> zastąp zawartość następującym kodem. W zasadzie używa Bootstrap i dodaje fałszywy pasek nawigacyjny:

<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Blogista </title> <base href = "/"> <meta name = "viewport" treść = "width = szerokość urządzenia, initial-scale = 1"> <link rel = "icon" type = "image / x-icon" href = "favicon.ico"> <link rel = "styleheet" href = "https : //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css "> </head> <body> <nav class =" navbar navbar-default "> <div class = "container-fluid"> <div class = "navbar-header"> <a class="navbar-brand" href="#"> Blogista </a> </div> <ul class = "nav navbar- nav "> <li class =" active "> <a href="#"> Posty </a> </li> <li> <a href="#"> Tworzenie stron internetowych </a> </li> < li> <a href="#"> Projekt graficzny </a> </li> </ul> </div> </nav> <div class = "container"> <app-root> Ładowanie ... < / app-root> </div> </body> </html>

Rejestracja PostsComponent w naszym module aplikacji
Następną rzeczą, którą zrobimy, jest rejestracja PostsComponent w naszym module aplikacji.

💡 Uwaga za pomocą polecenia ** ng g component ** automatycznie zarejestruje komponent w module aplikacji. Więc nie musisz tego robić ponownie. Jeśli zostało to zrobione dla ciebie, możesz pominąć ten krok.

Jeśli nie został zarejestrowany automatycznie, otwórz plik ./src/app/app.module.ts i zaimportuj komponent PostsComponent:

import {PostsComponent} z './blog/posts.component';

Następnie w tablicy deklaracji NgModule dodaj do listy PostsComponent:

@NgModule ({deklaracje: [... PostsComponent,], ...})

Wyświetlanie aplikacji Angular
Po zarejestrowaniu naszego komponentu Posty dołączymy go do naszego pliku ./src/app/app.component.html, aby wyświetlić komponent postów. Otwórz plik ./src/app/app.component.html i dodaj do niego następujący kod:

<app-posts> </app-posts>

To wszystko!

Teraz, gdy uruchomisz ng, podaj i przejdź do adresu URL podanego na twoim terminalu. Powinieneś zobaczyć stronę z naszymi postami:

Świetnie, dokładnie tego oczekiwaliśmy. Jednak podczas przeglądania źródła URL zauważysz, że brakuje całego ciała i że widoczna jest tylko część <app-root> ładowanie… </app-root>.

Wynika to ze sposobu działania Angulara. Najpierw ładowałby szablon nadrzędny, a potem sam ładował się.

Następnie rozpocznie proces manipulacji DOM, który wstawi zawartość każdej kolejnej strony w tagu <app-root>.

Stąd, gdy bot wyszukiwarki zażąda tej strony, otrzyma powyższy HTML <app-root> Loading… </app-root>, a zawartość strony, która powinna przyczynić się do SEO, jest teraz nieznana silnikowi.

Ułatwianie SEO aplikacji Angular 4

Teraz, gdy zbudowaliśmy przykładową aplikację, od razu widać, że nie jest ona przyjazna SEO. Będziemy więc używać uniwersalnego serwera platformy Angular do wstępnego renderowania szablonów po stronie serwera i obsługiwać go po załadowaniu strony.

Project Projekt Angular Universal składa się z interfejsu API platformy podstawowej i narzędzi otaczających, które umożliwiają programistom renderowanie po stronie serwera (lub wstępne renderowanie) aplikacji Angular.

Na początek będziemy instalować pakiet angular / platform-server oraz pakiet angular / animations. Oba są wymagane, aby serwer platformy działał poprawnie. Serwer platformy będzie tym, który zapewnia renderowanie po stronie serwera.

Uruchom poniższe polecenie na terminalu, aby zainstalować zależności wymagane do renderowania aplikacji Angular po stronie serwera:

$ npm install --save @ angular / platform-server @ angular / animations

Po pomyślnym zainstalowaniu pakietów przy użyciu NPM otwórz plik ./src/app.modules.ts i wykonaj następującą modyfikację deklaracji BrowserModule:

@NgModule ({... importuje: [BrowserModule.withServerTransition ({appId: 'blogist'})], ...})

W powyższym kodzie dodaliśmy metodę withServerTransition do BrowserModule i tam przekazaliśmy aplikację, która jest równa nazwie blogisty aplikacji. Ten dodatek „konfiguruje aplikację opartą na przeglądarce na przejście z aplikacji renderowanej przez serwer, jeśli jest ona obecna na stronie”.

Następną rzeczą, którą zrobimy, jest utworzenie modułu serwera aplikacji. Utwórz nowy plik ./src/app/app-server.module.ts

import {NgModule} z '@ angular / core'; import {AppModule} z './app.module'; import {AppComponent} z './app.component'; import {ServerModule} z '@ angular / platform-server'; @NgModule ({import: [ServerModule, AppModule,], bootstrap: [AppComponent]}) klasa eksportu AppServerModule {}

Jest to podstawowy moduł Angular, który będzie działał jako nasz moduł serwera. Najważniejszą rzeczą, o której należy pamiętać, jest to, że importujemy nasz moduł AppModule do modułu serwera, dzięki czemu będzie on teraz częścią modułu AppServerModule. Ten moduł będzie tam, gdzie załadujemy naszą aplikację z serwera.

Dodawanie tytułu i metatagów do naszej aplikacji Angular
Ostatnią rzeczą, którą dodamy do aplikacji, jest obsługa tagów Meta i tytułu na każdej stronie. Z uniwersalnym Angularem jest to bardzo proste.

Otwórz plik ./src/app/blog/posts.component.ts i wewnątrz wykonaj następujące czynności:

Importuj Meta i tytuł z pakietu @ angular / platform-browser:

import {Meta, Title} z '@ angular / platform-browser';

Teraz w metodzie konstruktora dodaj następujące wiersze kodu:

konstruktor (meta: Meta, tytuł: Tytuł) {this.posts = this.postsData (); // Ustawia <title> </title> title.setTitle („Blogist”); // Ustawia tag <meta> dla strony meta.addTags ([{nazwa: 'autor', treść: 'Blogist'}, {nazwa: 'opis', treść: 'To jest opis.'},]) ; }

Powyższy kod pozwala ustawić tytuł dla każdej tworzonej strony i będzie on wstępnie renderowany przy użyciu Angular Universal. Pozwala to na lepszą kontrolę nad metą i tytułem różnych stron.

Tworzenie serwera Express, aby Twoja aplikacja Angular była przyjazna dla SEO
Utwórzmy serwer Express. Umożliwi to zasadniczo renderowanie strony po stronie serwera.

Utwórz nowy plik w pliku ./src/server.ts, a następnie dodaj zawartość poniżej:

import „reflect-metadata”; import 'zone.js / dist / zone-node'; import {renderModuleFactory} z '@ angular / platform-server' import {enableProdMode} z '@ angular / core' import * jako express z 'express'; importuj {join} z 'path'; import {readFileSync} z 'fs'; import {AppServerModuleNgFactory} z '../dist/ngfactory/src/app/app-server.module.ngfactory' enableProdMode () const PORT = process.env.PORT || 4000 const DIST_DIR = join (__ nazwa_katalogu, '..', 'dist') const app = express (); const template = readFileSync (join (DIST_DIR, 'index.html')). toString () app.engine ('html', (_, opcje, callback) => {const newOptions = {document: template, url: options. req.url}; renderModuleFactory (AppServerModuleNgFactory, newOptions) .then (html => callback (null, html))}) app.set ('views', 'src') app.set ('view engine', 'html' ) app.get ('*. *', express.static (DIST_DIR)) app.get ('*', (req, res) => {res.render ('index', {req})}). listen (PORT, () => {console.log (`Aplikacja nasłuchująca na http: // localhost: $ {PORT}!`)});

W tym pliku zaimportowaliśmy wszystkie pakiety potrzebne do uruchomienia naszego serwera Express. W szczególności importujemy AppServerModuleNgFactory, plik, który jeszcze nie istnieje, ale zostanie wygenerowany podczas naszego procesu budowania.

Następnie włączamyrodekProdMode (), który po prostu włącza tryb produkcji w naszej aplikacji. Używamy również [renderModuleFactory] (https://angular.io/api/platform-server/renderModuleFactory) do analizowania kodu HTML i renderowania strony ładowanej po stronie serwera. Każda rzecz w kodzie ma związek z Express.

Następną rzeczą, którą chcemy teraz zrobić, jest otwarcie naszego pliku ./src/tsconfig.app.json i dodanie serwera.ts do sekcji wykluczeń pliku.

„wyklucz”: [„serwer.ts”, ...]

Property Właściwość exclude określa listę plików, które mają zostać wykluczone z kompilacji.

Otwórz również plik ./tsconfig.json i dodaj poniższy fragment do pliku w katalogu głównym projektu tuż pod właściwością compilerOptions:

... "lib": ["es2016", "dom"]}, "angularCompilerOptions": {"genDir": "./dist/ngfactory", "entryModule": "./src/app/app.module# AppModule „}}

Ir GenDir to miejsce, w którym wszystko, co generowane, będzie się działo. Moduł entryModule akceptuje ścieżkę naszego głównego modułu bootstrapped. #AppModule na końcu ścieżki jest nazwą eksportowanej klasy.

Ostatnim krokiem jest zaktualizowanie właściwości scripts w naszym pliku ./package.json. Powinieneś zamienić lub dołączyć to do kluczy już w właściwości skryptów:

{... "skrypty": {"prestart": "ng build --prod && ./node_modules/.bin/ngc", "start": "ts-node src / server.ts"}, ...}

Mamy komendy zarejestrowane w skryptach start i prestart w pliku ./package.json. Ponieważ dodaliśmy pre do początku nazwy, zostanie ona uruchomiona automatycznie przed wywołaniem skryptu startowego .

Testowanie naszej przyjaznej dla SEO aplikacji Angular 4

Po zakończeniu wprowadzania zmian w aplikacji przejdź do terminalu i uruchom następujące polecenie:

$ npm uruchom start

Spowoduje to uruchomienie skryptu prestartu, który zawiera polecenia ng build --prod && ./node_modules/.bin/ngc, a następnie uruchom skrypt, który zawiera polecenie ts-node src / server.ts. Po zakończeniu poleceń powinieneś zobaczyć wyjście blisko tego na swoim terminalu:

Gdy odwiedzisz stronę, powinieneś nadal widzieć ten sam wynik, co wcześniej. Jednak gdy przeglądasz źródło, powinieneś zobaczyć w pełni renderowany HTML. W ten sposób boty wyszukiwarki będą widzieć stronę.

Wniosek

W tym artykule przyjrzeliśmy się, w jaki sposób zoptymalizować SEO dla aplikacji Angular 4 Single Page (SPA) przy użyciu Angular 4 Universal. Mamy nadzieję, że nauczyliście się czegoś, a strach przed złą optymalizacją SEO nie powstrzyma was już przed używaniem Angular 4 dla swoich aplikacji.

Kod źródłowy tej aplikacji można znaleźć na stronie GitHub . Oznaczaj gwiazdkami i zostawiaj opinie, problemy lub komentarze. Jeśli masz jakieś pytania, możesz je zostawić poniżej.

Com/?
Com/?
Com/?