Ustaw aplikację Angular na SEO (Angular 4 + Universal)

Jeśli wolisz oglądać wideo ..
Pobierz projekt i uruchom go
Utwórz moduł aplikacji serwera
Tworzenie serwera ekspresowego
Dostosowania konfiguracji TypeScript
Dostosuj skrypty uruchamiania
Generuj komponenty
Ustaw trasy
Szablon komponentu aplikacji
Dodawanie tytułu i metatagów do naszych komponentów
O komponencie
Uruchom!
Pomiń ręczne ustawienia

The Github Repo dla tego samouczka: Odwiedź repo

Domyślnie aplikacje Angular nie są przyjazne dla wyszukiwarek. Jeśli wyświetlisz źródło strony w przeglądarce zwykłej aplikacji Angular, pokaże ona tylko to, co znajduje się w regularnym indeksie.html - niesławną zawartość do załadowania .. Aby to naprawić, potrzebujemy, aby aplikacja była renderowana na serwerze, a następnie wyświetlana klientowi. W ten sposób Twoje treści dla każdej strony (każdego komponentu) są wypluwane przez przeglądarkę i tego uroczego Googlebota.

Ale dla początkującego pośrednika programistów Angular temat Angular SEO jest zazwyczaj mylący. Szybkie wyszukiwanie w Google ujawnia nieaktualne informacje i samouczki, które już nie działają.

Na szczęście jestem tutaj, aby zrobić wszystko, co w mojej mocy, aby wszystko było łatwe do zrozumienia i poprowadziło Cię przez proces instalacji za pomocą tego samouczka i samouczka wideo, który możesz obejrzeć poniżej (niektórzy wolą oglądać zamiast czytać!).

Więc zacznijmy.

Jeśli wolisz oglądać wideo ..

Upewnij się, że Zapisz się na oficjalny kanał Coursetro na YouTube, aby uzyskać więcej niesamowitych filmów.

Pobierz projekt i uruchom go

Jak zwykle rozpoczniemy projekt za pomocą Angular CLI. Sprawdź nasze Bezpłatny kurs kątowy jeśli jesteś nowy w CLI.

> ng nowy ang4-seo --routing> cd ang4-seo

Flaga --routing wygeneruje plik szybkich tras i doda go do naszego modułu aplikacji.

Gdy znajdziemy się w nowym folderze projektu, użyjemy npm do zainstalowania serwera platformy, który jest potrzebny do renderowania po stronie serwera i generowania stron HTML. Musimy także zainstalować pakiet animacji (nowy w Angular v4), w przeciwnym razie Twoja aplikacja spowoduje błąd:

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

Następnie przejdziemy do /src/app/app.module.ts i dokonamy niewielkiej korekty:

@NgModule ({declarations: [AppComponent], importuje: [BrowserModule.withServerTransition ({appId: 'ang4-seo-pre'}), FormsModule, HttpModule], provider: [], bootstrap: [AppComponent]})

Jedyną zmienioną linią jest moduł BrowserModule. Tutaj dodaliśmy .withServerTransition, który pobiera appId, który jest współużytkowany przez klienta i serwer. .withServerTransition pozwala Universal na zastąpienie wygenerowanego przez siebie kodu HTML.

Zapisz ten plik.

Utwórz moduł aplikacji serwera

Utwórz nowy plik o nazwie /src/app/app.server.module.ts i wklej następujący kod:

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

Służy do ładowania aplikacji z serwera. Jeśli porównasz to z /src/app/app.module.ts , są bardzo podobne. Głównym rozwiązaniem jest to, że ten moduł jest przeznaczony dla serwera.

Tworzenie serwera ekspresowego

Naturalnie potrzebujemy serwera do renderowania aplikacji przed przekazaniem jej do klienta. Utwórz nowy plik o nazwie /src/server.ts i wklej następujący tekst :

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

Nie będę szczegółowo omawiać wszystkiego, co się tutaj dzieje, ponieważ większość z nich jest specyficzna dla Expressa i wykracza poza zakres tego samouczka.

Jednak sercem tego, co jest specyficzne dla renderowania po stronie serwera (Universal), jest metoda renderModuleFactory .

To wymaga AppServerModuleNgFactory, że serwer generuje po zbudowaniu projektu, który jest skompilowaną aplikacją Angular:

import {AppServerModuleNgFactory} z '../dist/ngfactory/src/app/app.server.module.ngfactory'

Zauważ, że znajduje się w folderze standardowym / dist, który jest generowany po uruchomieniu komendy ng build . Następnie służy jako HTML.

Dostosowania konfiguracji TypeScript

Otwórz /src/tsconfig.app.json i dodaj plik server.ts utworzony wcześniej jako wykluczenie:

{"extends": "../tsconfig.json", "compilerOptions": {"outDir": "../out-tsc/app", "module": "es2015", "baseUrl": "", " typy ": []}," wyklucz ": [" serwer.ts ", // tutaj" test.ts "," ** / *. spec.ts "]}

Następnie otwórz /tysconfig.json i dodaj angularCompilerOptions :

{"compileOnSave": false, "compilerOptions": {"outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "deklaracja": false, "moduleResolution": „node”, „emitDecoratorMetadata”: true, „experimentalDecorators”: true, „target”: „es5”, „typeRoots”: [„node_modules / @ types”], „lib”: [„es2016”, „dom”] }, "angularCompilerOptions": {// Tutaj "genDir": "./dist/ngfactory", "entryModule": "./src/app/app.module#AppModule"}}

angularCompilerOptions pozwala nam określić właściwość genDir , czyli miejsce, w którym zostaną wygenerowane pliki ngfactory dla komponentów i modułów, oraz moduł wejściowy, który akceptuje ścieżkę naszego głównego modułu bootstrapped. #AppModule na końcu ścieżki jest nazwą eksportowanej klasy.

Dostosuj skrypty uruchamiania

Wewnątrz /package.json dostosujemy właściwość skryptów :

{// // Inne właściwości usunięte dla zwięzłości // "skrypty": {"prestart": "ng build --prod && ngc", "start": "ts-node src / server.ts"}, // / / Inne właściwości usunięte dla zwięzłości //}

Dodajemy pre przed poleceniem start, aby najpierw uruchomić komendę ng build --prod && ngc . Następnie uruchamia serwer na podstawie naszej konfiguracji server.ts .

Teraz możesz wykonać następujące polecenie w konsoli, aby uruchomić aplikację!

> npm uruchom start

Jeśli wszystko pójdzie gładko, wynik będzie wyglądał mniej więcej tak:

> [email protected] prestart C: Użytkownicy Gary kod ang4-seo-pre> ng build --prod && ngc Hash: 831974a6aced5d532e0d Czas: 6395ms fragment {0} polyfills.6ce0bf58446ef5c2585b.bundle.js (polifills) 157 kB {4} [początkowy] [renderowany] fragment {1} main.94206ad8fdce0f306470.bundle.js (główny) 21,3 kB {3} [początkowy] [renderowany] fragment {2} styles.d41d8cd98f00b204e980.bundle.css (style) 69 bajtów {4} [początkowy] [renderowany] fragment {3} vendor.20c071d0dcfbd58f1c48.bundle.js (sprzedawca) 1,1 MB [początkowy] [renderowany] fragment {4} inline.6729d86a888b9e64ae89.bundle.js (inline) 0 bajtów [wpis] [świadczonych]> [email protected] start C: Użytkownicy Gary kod ang4-seo-pre> ts-node src / server.ts nasłuchuje na http: // localhost: 4000!

Jeśli odwiedzisz http: // localhost: 4000 w przeglądarce, możesz wyświetlić źródło strony, a teraz źródło rzeczywiście pokazuje działanie aplikacji! kiedy zazwyczaj wyświetlałoby się domyślne ładowanie .. tekst zdefiniowany w index.html.

Lepiej przetestujmy i wygenerujmy kilka komponentów z trasami. Dodamy nawet niestandardowy tytuł i metatagi dla każdej strony.

Generuj komponenty

Używanie CLI do generowania komponentów jest łatwe, ale kiedy uruchomisz standardowe polecenie, takie jak ng gc home , możesz napotkać błąd:

> ng gc home installation component Błąd lokalizowania modułu do deklaracji SilentError: Znaleziono wiele plików modułów:

Aby tego uniknąć, możemy określić moduł, dodając flagę. Uruchom następujące polecenia, aby wygenerować 2 składniki:

> ng gc home --module = app.module.ts> ng gc about --module = app.module.ts

Ustaw trasy

Przejdźmy do pliku /src/app/app-routing.module.ts , który został wygenerowany przez CLI za pomocą flagi --routing :

import {NgModule} z '@ angular / core'; import {Routes, RouterModule} z '@ angular / router'; import {AboutComponent} z './about/about.component'; import {HomeComponent} z './home/home.component'; const route: Routes = [{ścieżka: '', komponent: HomeComponent}, {ścieżka: 'about', komponent: AboutComponent}]; @NgModule ({import: [RouterModule.forRoot (route)], export: [RouterModule]}) export class AppRoutingModule {}

Tutaj importujemy wygenerowane przez nas komponenty About i Home i dodajemy je do Routes .

Szablon komponentu aplikacji

Odwiedźmy plik /src/app.component.html i zmieńmy go na ten:

<ul> <li> <a routerLink="/"> Strona główna </a> </li> <li> <a routerLink="about"> Informacje o </a> </li> </ul> <router- outlet> </router-outlet>

Tworzymy nawigację z gniazdem routera dla naszego domu i komponentów.

Dodawanie tytułu i metatagów do naszych komponentów

Podstawą czynników SEO na stronie są unikalne tytuły, opisy meta i słowa kluczowe meta. Na szczęście proces definiowania tych elementów jest prosty dla każdego komponentu.

W /src/app/home/home.component.ts zaimportuj górę:

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

Następnie w konstruktorze:

klasa eksportu HomeComponent implementuje konstruktor OnInit {meta: Meta, title: Title) {title.setTitle ('My Spiffy Home Page'); meta.addTags ([{name: 'author', content: 'Coursetro.com'}, {name: 'keywords', content: 'angular seo, angular 4 universal, etc'}, {name: 'description', content : „To jest moja aplikacja Angular SEO, ciesz się nią!”}]); } ngOnInit () {}}

Używamy wstrzykiwania zależności w celu utworzenia instancji zarówno Meta, jak i tytułu , a następnie używamy obu do ustawiania tytułów i różnych metatagów, które chcemy uwzględnić w tym komponencie.

Zapisz to.

O komponencie

Teraz powtórzymy ten sam dokładnie proces powyżej dla pliku /src/app/about/about.component.ts . Po prostu zmień tytuł i metatagi na coś wyjątkowego, abyśmy mogli zobaczyć, jak zmieniają się na chwilę.

Zmieńmy też nieco szablon w /src/app/about/about.component.html :

<p> I to jest mój piękny opis, który chcę zobaczyć w Google! </p>

Uruchom!

Odwiedź konsolę, naciśnij ctrl-c , jeśli serwer nadal działa, a następnie uruchom:

> npm uruchom start

Przy odrobinie szczęścia będzie działać bezbłędnie i możesz zobaczyć źródło strony pierwszej strony i zauważyć, że tytuł i 3 meta słowa kluczowe są określone w komponencie domowym.

Następnie kliknij link o i ponownie sprawdź źródło strony. Wala!

Miejmy nadzieję, że ten poradnik pomógł ci trochę i postawił cię na drodze do sukcesu SEO.

Ten samouczek jest w dużej mierze oparty na przykład tutaj jednak brakowało jakiegokolwiek wyjaśnienia. Kudos do Éverton Roberto Auler!

Pomiń ręczne ustawienia

Projekt, który właśnie stworzyłem, można sklonować w Github. Właśnie odwiedź ten link i możesz być szybki!