Зробити своє кутове додаток SEO-Friendly (кутовий 4 + універсальний)

Якщо ви бажаєте переглядати відео.
Отримати проект і працювати
Створіть модуль сервера
Створення сервера Express
Налаштування конфігурації TypeScript
Налаштуйте сценарії запуску
Створення компонентів
Налаштуйте маршрути
Шаблон компонента програми
Додавання назв і мета-тегів до наших компонентів
Про компонент
Запустіть його!
Пропустіть налаштування вручну

Повтор Github для цього підручника: Відвідайте репо

За замовчуванням програми Angular не є дружніми до пошукової системи. Якщо ви переглядаєте джерело сторінки в браузері звичайної програми Angular, воно буде показувати лише те, що знаходиться всередині звичайного index.html - сумнозвісного вмісту для завантаження . Щоб виправити це, нам потрібно, щоб програма відображалася на сервері, а потім відображалася клієнту. Таким чином, ваш вміст для кожної сторінки (кожного компонента) буде виведено на веб-переглядач, а цей чудовий робот Google - для перегляду.

Але для початківця-проміжного розробника Angular, тема Angular SEO зазвичай є заплутаною. Швидкі пошукові запити Google виявляють застарілу інформацію та навчальні посібники, які більше не працюють.

На щастя, я тут, щоб зробити все можливе, щоб зробити все легким для розуміння і пройти через процес налаштування через написаний підручник, а також відео-підручник, який можна подивитися нижче (деякі люди вважають за краще дивитися замість читання!).

Отже, давайте почнемо.

Якщо ви бажаєте переглядати відео.

Обов'язково Підпишіться на офіційний канал Coursetro на Youtube для більш дивним відео.

Отримати проект і працювати

Як завжди, ми почнемо проект за допомогою Angular CLI. Перевірте наші Вільний кутовий курс якщо ви новачок у CLI.

> ng new ang4-seo - маршрутизація> cd ang4-seo

Прапор --routing створить файл швидких маршрутів і додасть його до нашого модуля додатків.

Після того, як ми ввійдемо до нової папки проекту, ми будемо використовувати npm для встановлення сервера-платформи, який необхідний для рендеринга на стороні сервера та створення HTML-сторінок. Ми також повинні встановити пакет анімації (новий у Angular v4), інакше ваша програма призведе до помилки:

> npm install --save @ angular / платформа-сервер @ кутовий / анімація

Далі ми перейдемо до /src/app/app.module.ts і зробимо невелике коригування:

@NgModule ({декларації: [AppComponent], імпорт: [BrowserModule.withServerTransition ({appId: 'ang4-seo-pre'}), FormsModule, HttpModule], постачальники: [], завантажувальний засіб: [AppComponent]})

Єдиною зміненою лінією є BrowserModule. Тут ми додали .withServerTransition, який приймає appId, який спільно використовується клієнтом і сервером. .withServerTransition дозволяє універсальним засобам замінити HTML, який він створює, самостійно.

Збережіть цей файл.

Створіть модуль сервера

Створіть новий файл з назвою /src/app/app.server.module.ts і вставте наступний код:

імпортувати {NgModule} з '@ angular / core'; імпортувати {ServerModule} з '@ angular / platform-server'; імпортувати {AppModule} з "./app.module"; імпортувати {AppComponent} з "./app.component"; @NgModule ({імпортує: [ServerModule, AppModule], bootstrap: [AppComponent]}) клас експорту AppServerModule {}

Це використовується для завантаження програми з сервера. Якщо порівняти його з /src/app/app.module.ts , вони дуже схожі. Головний висновок тут полягає в тому, що цей модуль призначений для сервера.

Створення сервера Express

Природно, нам потрібен сервер, щоб відтворити додаток перед тим, як натиснути його на клієнта. Отже, створіть новий файл з назвою /src/server.ts і вставте наступне:

імпортувати "reflection-metadata"; імпортувати "zone.js / dist / zone-node"; import {platformServer, renderModuleFactory} з '@ angular / server-server' import {enableProdMode} з '@ angular / core' import {AppServerModuleNgFactory} з '../dist/ngfactory/src/app/app.server.module.ngfactory імпортувати як експрес із "express"; імпортувати {readFileSync} з 'fs'; імпортувати з 'шляху'; const PORT = 4000; enableProdMode (); const app = express (); let template = readFileSync (приєднатися (__ dirname, '..', 'dist', 'index.html')) toString (); app.engine ('html', (_, options, callback) => {const opts = {документ: шаблон, url: options.req.url}; renderModuleFactory (AppServerModuleNgFactory, opts). потім (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 ('прослуховування на http: // localhost: $ {PORT}!');});

Я не буду вдаватися до подробиць про все, що відбувається тут, оскільки більша частина його є специфічною для експресу та виходить за рамки цього підручника.

Але серцем того, що є специфічним для візуалізації на стороні сервера (Universal), є метод renderModuleFactory .

В AppServerModuleNgFactory, який генерує сервер після побудови проекту, який є складеним Angular app:

імпортувати {AppServerModuleNgFactory} з "../dist/ngfactory/src/app/app.server.module.ngfactory"

Зауважте, що він розташований у стандартній / dist папці, яка генерується після запуску команди ng build . Потім він служить йому як HTML.

Налаштування конфігурації TypeScript

Відкрийте /src/tsconfig.app.json і додайте файл server.ts, який ми створили раніше, як виняток :

{"extends": "../tsconfig.json", "compilerOptions": {"outDir": "../out-tsc/app", "module": "es2015", "baseUrl": "", " Типи ": []}," виключити ": [" server.ts ", // Право тут" test.ts "," ** / *. spec.ts "]}

Потім відкрийте /tysconfig.json і додайте angularCompilerOptions :

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

angularCompilerOptions дозволяє вказати властивість genDir , в якій будуть згенеровані сформовані файли ngfactory для компонентів і модулів, а також entryModule, який приймає шлях до нашого основного модуля завантаження. #AppModule в кінці шляху є ім'ям експортованого класу.

Налаштуйте сценарії запуску

Усередині /package.json налаштуємо властивість сценаріїв :

{// // Інші властивості видалені для стислості // "скрипти": {"prestart": "ng build --prod && ngc", "start": "ts-node src / server.ts"}, // / / Інші властивості, видалені для стислості //}

Ми додаємо перед командою start попередню команду ng build --prod && ngc . Після цього він запускає сервер на основі конфігурації нашого server.ts .

Тепер ви можете виконати наступну команду в консолі для запуску програми!

> npm start start

Якщо все йде гладко, вихід буде виглядати приблизно так:

> [email protected] prestart C: Користувачі gary: ang4-seo-pre> ng build --prod && ngc Hash: 831974a6aced5d532e0d Час: 6395ms chunk {0} polyfills.6ce0bf58446ef5c2585b.bundle.js (polyfills) 157 Кб {4} [початковий] [візуалізований] фрагмент {1} main.94206ad8fdce0f306470.bundle.js (main) 21,3 кб {3} [початковий] [рендеринг] chunk {2} styles.d41d8cd98f00b204e980.bundle.css (стилі) 69 байт {4} [початковий] [візуалізований] фрагмент {3} vendor.20c071d0dcfbd58f1c48.bundle.js (постачальник) 1,1 Мб [початковий] [візуалізований] фрагмент {4} inline.6729d86a888b9e64ae89.bundle.js (inline) 0 байт [запис] [рендеринг]> [email protected] start C: Користувачі gary код: ang4-seo-pre> ts-вузол src / server.ts прослуховування на http: // localhost: 4000!

Якщо ви відвідуєте http: // localhost: 4000 у веб-переглядачі, ви можете переглянути джерело сторінки, і тепер джерело показує, що програма працює! коли зазвичай відображається текст Завантаження .., визначений у index.html.

Дамо йому краще тестування і генеруємо пару компонентів з маршрутами. Ми навіть додамо власні назви та мета-теги для кожної сторінки.

Створення компонентів

Використання CLI для створення компонентів легко, але при запуску стандартної команди, наприклад, ng gc home , ви можете зіткнутися з помилкою:

> ng gc компонент домашньої інсталяції Помилка розміщення модуля для оголошення SilentError: Знайдено декілька файлів модулів:

Щоб уникнути цього, ми можемо вказати модуль, додавши прапор. Отже, виконайте такі команди, щоб створити 2 компоненти:

> ng gc home --модуль = app.module.ts> ng gc про --module = app.module.ts

Налаштуйте маршрути

Давайте перейдемо до файлу /src/app/app-routing.module.ts, який створено CLI з прапором --routing :

імпортувати {NgModule} з '@ angular / core'; імпортувати {маршрути, RouterModule} з '@ angular / router'; імпортувати {AboutComponent} з "./about/about.component"; імпортувати {HomeComponent} з './home/home.component'; const routes: Маршрути = [{path: '', компонент: HomeComponent}, {path: 'about', компонент: AboutComponent}]; @NgModule ({import: [RouterModule.forRoot (routes)], експортує: [RouterModule]}) клас експорту AppRoutingModule {}

Тут ми імпортуємо наші складені компоненти, які ми щойно генерували, і додаємо їх до маршрутів .

Шаблон компонента програми

Відвідайте файл /src/app.component.html і змініть його на це:

<ul> <li> <a routerLink="/"> Домашня сторінка </a> </li> <li> <a routerLink="about"> Про </a> </li> </ul> <router- outlet> </router-outlet>

Ми створюємо навігацію з маршрутизатором для нашого будинку та компонентів.

Додавання назв і мета-тегів до наших компонентів

Наріжним каменем факторів SEO на сторінці є унікальні назви, метаописання та мета-ключові слова. На щастя, процес визначення цих елементів є простим для кожного компонента.

В /src/app/home/home.component.ts імпортувати зверху:

імпортувати {Meta, Title} з "@ angular / platform-browser";

Потім у конструкторі:

клас експорту HomeComponent реалізує OnInit {конструктор (meta: Meta, title: Title) {title.setTitle ('My Spiffy Home Page'); meta.addTags ([{name: 'author', контент: 'Coursetro.com'}, {name: 'keywords', зміст: 'angular seo, angular 4 universal, etc'}, {name: 'description', content : "Це моя додаток на основі кутового SEO, користуйтеся нею! '}]); } ngOnInit () {}}

Ми використовуємо ін'єкції залежностей, щоб створити екземпляр як Meta, так і Title , тоді ми використовуємо обидва, щоб встановити назви та різні мета-теги, які ми хочемо включити до цього компонента.

Збережи це.

Про компонент

Тепер ми повторимо той самий точний процес вище для файлу /src/app/about/about.component.ts . Просто переконайтеся, що ви змінюєте назви та мета-теги на щось унікальне, щоб ми могли їх миттєво змінити.

Давайте трохи змінюємо шаблон у /src/app/about/about.component.html :

<p> І це мій прекрасний опис, який я хочу, щоб Google бачив! </p>

Запустіть його!

Відвідайте консоль, ctrl-c , якщо сервер все ще працює, а потім запустіть:

> npm start start

З будь-якою удачею, він буде працювати без помилок, і ви можете переглянути джерело сторінки на першій сторінці і помітити, що заголовок і 3 мета ключові слова там, як зазначено в домашньому компоненті.

Потім клацніть посилання про посилання і знову перевірте джерело сторінки. Wala!

Будемо сподіватися, що цей підручник допоможе вам зовсім небагато, і ви покладете вас на шлях успіху SEO.

Цей підручник значною мірою базується на Приклад тут розташований однак, він не мав жодного пояснення. Престижність до Евертона Роберто Аулера!

Пропустіть налаштування вручну

Проект, який я тільки що створив, може бути клонований у Github. Просто відвідайте це посилання і ви можете працювати швидко!