Полное руководство по Angular 4 SEO (Universal + Angular CLI)

Полное руководство по Angular 4 SEO (Universal + Angular CLI)

Содержание

1. Введение
2. Проблемы с SEO в Angular
3. Преимущества Angular Universal
4. Установка Angular Universal
5. Создание серверного модуля приложения
6. Создание Express-сервера
7. Настройка маршрутизации
8. Установка мета-тегов и заголовков страниц
9. Проверка работоспособности приложения
10. Дополнительные функции для улучшения SEO
11. Заключение

🌐 Введение

В наше время оптимизация для поисковых систем является неотъемлемой частью разработки веб-приложений. Однако, при разработке приложений на Angular, разработчики сталкиваются с проблемой их индексации поисковыми системами. Это связано с тем, что Angular использует серверный рендеринг для отображения содержимого только на клиентской стороне. Однако, с появлением Angular Universal, разработчики теперь могут сделать свои приложения Angular дружественными для поисковиков.

🚫 Проблемы с SEO в Angular

Одной из основных проблем с разработкой SEO-оптимизированных приложений на Angular является то, что поисковые системы не могут индексировать динамически создаваемое содержимое, которое генерируется только на стороне клиента. Это означает, что поисковые системы могут не видеть содержимое вашего приложения, что может негативно сказаться на его ранжировании в результатах поиска.

✅ Преимущества Angular Universal

Angular Universal - это фреймворк, разработанный командой Angular, который позволяет рендерить приложение на сервере. Это означает, что поисковые системы будут видеть полностью отрендеренное содержимое вашего приложения, что повышает его шансы на ранжирование в результатах поиска. Некоторые из основных преимуществ Angular Universal:

• Улучшенная SEO-оптимизация: благодаря серверному рендерингу, поисковые системы могут видеть всё содержимое вашего приложения.
• Более быстрая загрузка страниц: пользователи увидят содержимое страницы быстрее, так как оно будет уже отрендерено на сервере.
• Лучший пользовательский опыт: отрендеренное на сервере содержимое позволяет пользователям просматривать страницы без ожидания загрузки и рендеринга на клиентской стороне.

⚙️ Установка Angular Universal

Перед началом работы с Angular Universal, вам понадобится установить несколько зависимостей. Вам потребуются:

• Angular CLI: инструмент командной строки для создания и управления проектами на Angular.
• Node.js: платформа для запуска JavaScript на сервере.
• Express: веб-фреймворк для Node.js.

Установите Angular CLI, следуя инструкциям на официальном сайте. Затем установите Node.js и Express, выполнив следующие команды:

npm install -g express

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

Перед тем, как начать использовать Angular Universal, вам нужно создать серверный модуль для вашего приложения. Для этого выполните следующие шаги:

1. Создайте новый файл с именем app.server.module.ts в папке вашего проекта.
2. Вставьте следующий код в файл app.server.module.ts:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    ServerModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

3. Сохраните файл app.server.module.ts.

🖥️ Создание Express-сервера

Для работы с Angular Universal необходимо настроить Express-сервер. Вот как это сделать:

1. Создайте новый файл с именем server.ts в корневой папке вашего проекта.
2. Вставьте следующий код в файл server.ts:

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { renderModuleFactory } from '@angular/platform-server';
import { readFileSync } from 'fs';

const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html'), 'utf8');
const { AppServerModuleNgFactory } = require('./dist/server/main');

enableProdMode();

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, { document: template, url: options.req.url })
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.use(express.static(join(DIST_FOLDER, 'browser')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

3. Сохраните файл server.ts.

🛣️ Настройка маршрутизации

Для маршрутизации в Angular Universal необходимо настроить ваше приложение. Вот как это сделать:

1. Откройте файл app-routing.module.ts в папке src/app.
2. Вставьте следующий код в файл app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. Сохраните файл app-routing.module.ts.

🌐 Установка мета-тегов и заголовков страниц

Чтобы улучшить SEO вашего приложения на Angular, рекомендуется настроить мета-теги и заголовки страниц. Вот как это сделать:

1. Откройте файл home.component.ts в папке src/app/home.
2. Вставьте следующий код в файл home.component.ts:

import { Component, OnInit } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private titleService: Title, private metaService: Meta) { }

  ngOnInit(): void {
    this.titleService.setTitle('My Spiffy Home Page');
    this.metaService.addTags([
        { name: 'author', content: 'Karstetter.com' },
        { name: 'keywords', content: 'Angular, Tutorial, SEO' },
        { name: 'description', content: 'This is my great description.' }
  });
  }
}

3. Сохраните файл home.component.ts.

✔️ Проверка работоспособности приложения

После завершения настройки всех необходимых компонентов и файлов, вы можете запустить приложение, чтобы убедиться, что оно работает корректно. Вам потребуется выполнить следующую команду в командной строке:

npm run start

Это запустит серверное приложение на порту 4000. Вы можете открыть браузер и перейти по адресу http://localhost:4000, чтобы увидеть ваше приложение.

⚡ Дополнительные функции для улучшения SEO

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

• Используйте уникальные заголовки для каждой страницы. Это поможет поисковым системам лучше понять о чем именно страница.
• Оптимизируйте скорость загрузки вашего приложения, чтобы улучшить пользовательский опыт.
• Создайте дружественные URL-адреса для ваших страниц, включая ключевые слова, связанные с содержимым страницы.

📝 Заключение

Angular Universal - это мощный инструмент для создания SEO-оптимизированных приложений на Angular. С его помощью вы можете улучшить видимость вашего приложения в поисковых системах и повысить качество вашего пользовательского опыта. Не забывайте применять дополнительные методы для улучшения SEO вашего приложения и следовать передовым практикам разработки.