Сделайте свое угловое приложение оптимизированным для SEO (Angular 4 + Universal)

  1. Если вы предпочитаете смотреть видео ..
  2. Получите проект и работает
  3. Создать модуль приложения сервера
  4. Создание Экспресс-сервера
  5. Настройки конфигурации TypeScript
  6. Настройте сценарии запуска
  7. Создать компоненты
  8. Настройте маршруты
  9. Шаблон компонента приложения
  10. Добавление заголовка и метатегов к нашим компонентам
  11. О компоненте
  12. Запустить его!
  13. Пропустить ручную настройку

Репозиторий Github для этого урока: Посетите репо

По умолчанию приложения Angular не подходят для поисковых систем. Если вы просматриваете исходный код страницы в браузере обычного приложения Angular, он покажет только то, что находится внутри обычного index.html - печально известную загрузку .. контента. Чтобы это исправить, нам нужно, чтобы приложение отображалось на сервере, а затем отображалось на клиенте. Таким образом, ваш контент для каждой страницы (каждого компонента) выкладывается для браузера и этого прекрасного робота-робота.

Но для разработчика Angular для начинающих и среднего уровня тема Angular SEO обычно сбивает с толку. Быстрый поиск в Google показывает устаревшую информацию и учебники, которые больше не работают.

К счастью, я здесь для того, чтобы сделать все возможное, чтобы все было легко понять, и проведу вас через процесс установки через этот письменный учебник и видеоурок, который вы можете посмотреть ниже (некоторые люди предпочитают смотреть вместо чтения!).

Итак, начнем.

Если вы предпочитаете смотреть видео ..

Обязательно Подписаться на официальный канал Coursetro на Youtube для более удивительных видео.

Получите проект и работает

Как обычно, мы начнем проект с Angular CLI. Проверьте наш Бесплатный угловой курс если вы новичок в CLI.

> нг новый ang4-seo - маршрут> cd ang4-seo

Флаг --routing сгенерирует файл быстрых маршрутов и добавит его в наш модуль приложения.

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

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

Далее мы перейдем в /src/app/app.module.ts и сделаем небольшую корректировку:

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

Единственная измененная строка - BrowserModule. Здесь мы добавили .withServerTransition, который принимает appId, который используется клиентом и сервером. .withServerTransition позволяет Universal заменять созданный им HTML- код самостоятельно.

Сохраните этот файл.

Создать модуль приложения сервера

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

импортировать {NgModule} из '@ angular / core'; импортировать {ServerModule} из '@ angular / platform-server'; import {AppModule} из './app.module'; import {AppComponent} из './app.component'; @NgModule ({import: [ServerModule, AppModule], начальная загрузка: [AppComponent]}) класс экспорта AppServerModule {}

Это используется для начальной загрузки приложения с сервера. Если вы сравните его с /src/app/app.module.ts , они очень похожи. Основной вывод здесь заключается в том, что этот модуль предназначен для сервера.

Создание Экспресс-сервера

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

импорт 'отражать-метаданные'; импорт 'zone.js / dist / zone-node'; import {platformServer, renderModuleFactory} из '@ angular / platform-server' import {enableProdMode} из '@ angular / core' import {AppServerModuleNgFactory} из '../dist/ngfactory/src/app/app.server.module.ngfactory 'import * as express from' express '; import {readFileSync} из 'fs'; import {join} из '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 (`прослушивание http: // localhost: $ {PORT}!`);});

Я не буду вдаваться в подробности обо всем, что здесь происходит, так как многое из этого относится к Express и выходит за рамки данного руководства.

Но сердце того, что специфично для рендеринга на стороне сервера (Universal) здесь, является метод renderModuleFactory .

Это берет в AppServerModuleNgFactory, который сервер генерирует после сборки проекта, который является скомпилированным приложением Angular:

импортировать {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": "", " типы ": []}," exclude ": [" server.ts ", // прямо здесь" test.ts "," ** / *. spec.ts "]}

Затем откройте /tysconfig.json и добавьте angularCompilerOptions :

{"compileOnSave": false, "compilerOptions": {"outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "декларация": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "экспериментальныйDecorators": 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 мы настроим свойство scripts :

{// // Для краткости удалены другие свойства // "scripts": {"prestart": "ng build --prod && ngc", "start": "ts-node src / server.ts"}, // / / Другие свойства убраны для краткости //}

Мы добавляем pre перед командой start, чтобы сначала выполнить команду ng build --prod && ngc . После этого он запускает сервер в соответствии с нашей конфигурацией server.ts .

Теперь вы можете выполнить следующую команду в консоли, чтобы запустить приложение!

> Npm Run Start

Если все пройдет гладко, результат будет выглядеть примерно так:

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

Если вы зашли на http: // localhost: 4000 в браузере, вы можете просмотреть исходный код страницы, и теперь этот источник показывает, что приложение работает! когда обычно показывается текст Loading .. по умолчанию, определенный в index.html.

Давайте дадим ему лучший тест и сгенерируем пару компонентов с маршрутами. Мы даже добавим пользовательские заголовки и метатеги для каждой страницы.

Создать компоненты

Использование CLI для генерации компонентов легко, но при запуске стандартной команды, такой как ng gc home , вы можете столкнуться с ошибкой:

> ng gc главная установка компонента Ошибка при поиске модуля для объявления SilentError: найдено несколько файлов модулей:

Чтобы избежать этого, мы можем указать модуль, добавив флаг. Итак, выполните следующие команды, чтобы сгенерировать 2 компонента:

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

Настройте маршруты

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

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

Здесь мы импортируем наши компоненты About и Home, которые мы только что создали, и добавляем каждый из них в Routes .

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

Давайте посетим файл /src/app.component.html и изменим его на следующий:

<ul> <li> <a routerLink="/"> Главная страница </a> </ li> <li> <a routerLink="about"> О </a> </ li> </ ul> <router- розетка> </ маршрутизатор-розетка>

Мы создаем навигацию с роутером-розеткой для нашего дома и про компоненты.

Добавление заголовка и метатегов к нашим компонентам

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

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

import {Meta, Title} из "@ angular / platform-browser";

Затем в конструкторе:

класс экспорта HomeComponent реализует OnInit {конструктор (мета: мета, заголовок: заголовок) {title.setTitle ('My Spiffy Home Page'); meta.addTags ([{name: 'author', content: 'Coursetro.com'}, {name: 'Keywords', content: 'angular seo, angular 4 universal и т. д.'}, {name: 'description', content : «Это мое приложение на основе Angular SEO, наслаждайтесь!»}]); } ngOnInit () {}}

Мы используем внедрение зависимостей для создания экземпляра как мета, так и заголовка , затем мы используем оба, чтобы установить заголовки и различные метатеги, которые мы хотим включить для этого компонента.

Сохрани это.

О компоненте

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

Давайте также немного изменим шаблон в /src/app/about/about.component.html :

<p> И это мое прекрасное описание, которое я хочу увидеть в Google! </ p>

Запустить его!

Зайдите в консоль, ctrl-c out, если сервер все еще работает, а затем запустите:

> Npm Run Start

Если повезет, он будет работать без ошибок, и вы сможете просмотреть исходный текст первой страницы и заметить, что заголовок и три мета- ключевых слова указаны в домашнем компоненте.

Затем нажмите на ссылку о и снова проверьте источник страницы. Вала!

Надеемся, что этот урок немного помог и помог вам достичь успеха в SEO.

Этот учебник в значительной степени основан на пример расположен здесь Однако ему не было никаких объяснений. Слава Эвертону Роберто Аулеру, хотя!

Пропустить ручную настройку

Проект, который я только что создал, может быть клонирован на Github. Просто посетите эту ссылку и ты можешь быстро бегать!