Hướng dẫn SEO Angular 4 (Universal + Angular CLI)

Hướng dẫn SEO Angular 4 (Universal + Angular CLI)

Mục lục:

1. Giới thiệu về Angular Universal
2. Cài đặt và cấu hình
   • Cài đặt Angular CLI
   • Tạo một dự án mới
   • Cài đặt các gói cần thiết
   • Cấu hình file app module
   • Tạo file server app module
   • Tạo file Express server
   • Cấu hình file TypeScript
   • Cập nhật file package.json
3. Server-side rendering với Angular Universal
   • Giới thiệu về server-side rendering
   • Cập nhật các component và route
   • Định nghĩa title và meta tags
   • Chạy ứng dụng
4. Kiểm tra hiệu suất và SEO
   • Kiểm tra trong trình duyệt
   • Xem mã nguồn và kiểm tra title và meta tags
   • Tối ưu SEO cho trang web Angular
5. Kết luận
6. Tài nguyên

Giới thiệu về Angular Universal

Angular Universal là một công cụ mạnh mẽ giúp tối ưu hóa ứng dụng Angular của bạn cho SEO và khả năng tìm kiếm trên các công cụ tìm kiếm. Khi xây dựng ứng dụng Angular truyền thống, các trang chỉ được tạo ra bằng mã JavaScript và tải bằng cách sử dụng các yêu cầu AJAX. Điều này có nghĩa là trình tìm kiếm không thể hiểu được nội dung của trang web và sẽ không xếp hạng tốt trên các công cụ tìm kiếm. Tuy nhiên, với sự hỗ trợ của Angular Universal, chúng ta có thể tạo ra các trang động được kết xuất trước tiên tại máy chủ, và sau đó gửi HTML tĩnh và các tệp tĩnh cho trình duyệt. Điều này sẽ cung cấp cho trình tìm kiếm nội dung được đầy đủ và cải thiện khả năng tìm kiếm của trang web Angular của bạn.

1. Cài đặt và cấu hình

Để bắt đầu sử dụng Angular Universal, chúng ta cần thực hiện một số bước cài đặt và cấu hình cơ bản. Hãy làm theo các bước sau:

1.1 Cài đặt Angular CLI

Để tạo và quản lý dự án Angular, trước tiên chúng ta cần cài đặt Angular CLI (Command Line Interface). Để cài đặt Angular CLI, hãy mở cửa sổ dòng lệnh và chạy lệnh sau:

npm install -g @angular/cli

1.2 Tạo một dự án mới

Sau khi cài đặt thành công Angular CLI, chúng ta có thể sử dụng nó để tạo một dự án mới Angular. Để tạo một dự án mới, hãy chạy lệnh sau:

ng new ten-du-an

Với "ten-du-an" là tên bạn muốn đặt cho dự án của mình. Sau khi chạy lệnh này, Angular CLI sẽ tạo một thư mục mới chứa dự án của bạn.

1.3 Cài đặt các gói cần thiết

Sau khi tạo dự án mới, chúng ta cần cài đặt các gói cần thiết để sử dụng Angular Universal. Để cài đặt các gói này, hãy chạy lệnh sau trong thư mục dự án:

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader
npm install --save-dev @nguniversal/express-engine

1.4 Cấu hình file app module

Tiếp theo, chúng ta cần cấu hình tệp app module (app.module.ts) để sử dụng Angular Universal. Mở tệp app.module.ts trong thư mục src/app và thêm đoạn mã sau vào cuối tệp:

// Import module for server-side rendering
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

// Import the AppComponent
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Add ServerModule and ServerTransferStateModule for server-side rendering
    ServerModule,
    ServerTransferStateModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

1.5 Tạo file server app module

Tiếp theo, chúng ta cần tạo một tệp mới để khởi tạo ứng dụng từ phía máy chủ. Mở thư mục src/app, tạo một tệp có tên app.server.module.ts và thêm đoạn mã sau vào tệp:

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

@NgModule({
  imports: [
    // Import the AppModule for server-side rendering
    AppModule,
    // Use the ServerModule for server-side rendering
    ServerModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

1.6 Tạo file Express server

Tiếp theo, chúng ta sẽ tạo một máy chủ Express để chạy ứng dụng. Tạo một thư mục mới trong thư mục gốc dự án và đặt tên thư mục đó là server. Trong thư mục server, tạo một tệp có tên server.ts và thêm đoạn mã sau vào tệp:

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

// Import the main server app module
import { AppServerModule } from './src/app/app.server.module';

// Enable production mode
enableProdMode();

const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Set the Angular app directory
app.engine('html', (_, options, callback) => {
  const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = options.bootstrap[0];
  // Render Angular app on the server
  renderModuleFactory(AppServerModuleNgFactory, {
    document: '<app-root></app-root>',
    url: options.req.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

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

// Serve static files from the Angular app directory
app.use('/', express.static(join(DIST_FOLDER, 'browser')));

// Handle all other routes
app.get('*', (req, res) => {
  res.render('index', { req });
});

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

1.7 Cấu hình file TypeScript

Để sử dụng Angular Universal, chúng ta cần cấu hình hai tệp config TypeScript (tsconfig.app.json và tsconfig.json). Mở cả hai tệp và thêm nội dung sau vào các tệp tương ứng:

tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "outDir": "dist",
    "target": "es2015",
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": "true",
    "experimentalDecorators": "true",
    "allowSyntheticDefaultImports": "true",
    "skipLibCheck": "true",
    "skipDefaultLibCheck": "true",
    "importHelpers": "true",
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "genDir": "./dist/out-tsc/app",
    "entryModule": "./src/app/app.module#AppModule"
  },
  "exclude": [
    "node_modules"
  ]
}

Đảm bảo rằng các tệp config TypeScript được cấu hình chính xác và tương thích với phiên bản Angular mà bạn đang sử dụng.

1.8 Cập nhật file package.json

Cuối cùng, chúng ta cần cập nhật tệp package.json để thực hiện các lệnh xây dựng và chạy ứng dụng. Mở tệp package.json và tìm đoạn mã "scripts" sau đây:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

Thay thế nó bằng đoạn mã sau:

"scripts": {
  "ng": "ng",
  "start": "npm run build:ssr && npm run serve:ssr",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "build:ssr": "ng build --prod && ng run ten-du-an:server:production",
  "serve:ssr": "node local-server/server.js"
},

Lưu lại các thay đổi và điều hướng terminal về thư mục gốc của dự án. Chạy lệnh sau để cài đặt các gói phụ thuộc:

npm install

Đến đây, chúng ta đã hoàn thành việc cài đặt và cấu hình Angular Universal cho dự án của mình.

2. Server-side rendering với Angular Universal

2.1 Giới thiệu về server-side rendering

Server-side rendering (SSR) là một quá trình chuyển đổi ứng dụng web thành một trang web hoàn chỉnh trên máy chủ trước khi nó được gửi đến trình duyệt của người dùng. Với SSR, trình duyệt nhận được một trang đầy đủ có nội dung đã được kết xuất, giúp máy chủ cung cấp cho trình tìm kiếm một phiên bản tĩnh của trang web để lập chỉ mục và cải thiện SEO.

Với Angular Universal, chúng ta có thể tạo ra các trang được kết xuất phía máy chủ. Khi một yêu cầu được gửi đến máy chủ, máy chủ sẽ xử lý yêu cầu và trả về một trang đã được kết xuất, chứ không phải mã JavaScript ban đầu. Điều này đảm bảo rằng trình tìm kiếm có thể hiểu nội dung của trang và cải thiện khả năng tìm kiếm của ứng dụng Angular của bạn.

2.2 Cập nhật các component và route

Đầu tiên, chúng ta cần cập nhật các component và route của ứng dụng để sử dụng SSR. Mở file app.module.ts và thêm ServerModule và ServerTransferStateModule vào phần imports:

import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'ten-du-an' }),
    ServerModule,
    ServerTransferStateModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

Tiếp theo, hãy mở file app.component.ts và thêm đoạn mã sau vào cuối file:

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  isBrowser: boolean;
  isServer: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    this.isBrowser = isPlatformBrowser(this.platformId);
    this.isServer = isPlatformServer(this.platformId);
  }
}

2.3 Định nghĩa title và meta tags

Để tạo các title và meta tags động cho trang web, chúng ta cần thêm thư viện Meta và Title vào file app.component.ts. Hãy mở file app.component.ts và thêm đoạn mã sau vào khối imports:

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  isBrowser: boolean;
  isServer: boolean;

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private metaService: Meta,
    private titleService: Title
  ) {}

  ngOnInit(): void {
    this.isBrowser = isPlatformBrowser(this.platformId);
    this.isServer = isPlatformServer(this.platformId);

    if (this.isBrowser) {
      this.titleService.setTitle('Trang chủ');
      this.metaService.addTags([
        { name: 'keywords', content: 'Angular, Universal, Server-side Rendering, SEO' },
        { name: 'description', content: 'Điều này là trang chủ của ứng dụng Angular Universal.' },
      ]);
    }
  }
}

Trong đoạn mã trên, chúng ta sử dụng Meta để thêm các tags meta vào phần head của trang, và sử dụng Title để đặt tiêu đề cho trang. Điều này cho phép chúng ta tạo và quản lý các title và meta tags theo cách linh hoạt và tùy chỉnh.

2.4 Chạy ứng dụng

Cuối cùng, để chạy ứng dụng với SSR, hãy mở terminal và chạy lệnh sau:

npm run start

Khi ứng dụng đã được khởi chạy thành công, hãy truy cập vào http://localhost:4000 trên trình duyệt của bạn để xem trang web đã được hiển thị với SSR.

3. Kiểm tra hiệu suất và SEO

3.1 Kiểm tra trong trình duyệt

Khi truy cập vào trang web đã được chạy với SSR, hãy mở cửa sổ "Developer Tools" trên trình duyệt của bạn và chuyển sang tab "Network". Tải lại trang và kiểm tra các yêu cầu HTTP và thời gian tải xuống.

Nếu bạn đã cấu hình SSR chính xác, bạn sẽ thấy rằng trang web được tải xuống nhanh hơn và có ít yêu cầu HTTP hơn so với khi chạy trên máy khách.

3.2 Xem mã nguồn và kiểm tra title và meta tags

Để kiểm tra tiêu đề (title) và các meta tags của trang web đã được kết xuất phía máy chủ, hãy xem mã nguồn của trang web. Trong trình duyệt, nhấp chuột phải và chọn "View Page Source" để xem mã nguồn.

Trong mã nguồn, bạn sẽ thấy các title và meta tags đã được định nghĩa trong component Angular. Điều này cho phép các công cụ tìm kiếm nhận ra nội dung và cải thiện khả năng tìm kiếm của trang web của bạn.

3.3 Tối ưu SEO cho trang web Angular

Để tối ưu hóa trang web Angular của bạn cho SEO, hãy xem xét các gợi ý sau:

• Đảm bảo rằng tất cả các trang đều có title và meta tags đầy đủ, phù hợp với nội dung và từ khóa chính của trang.
• Sử dụng URL thân thiện với SEO cho các trang, với các từ khóa chính được đặt trong URL.
• Tăng tốc độ tải trang bằng cách sử dụng các phương pháp tối ưu hóa ảnh, chặn việc tải xuống không cần thiết và sử dụng bộ nhớ cache để lưu trữ các tệp tĩnh.
• Tạo nội dung tương tự như trên máy chủ và máy khách để trình tìm kiếm có thể hiểu nội dung của trang web dễ dàng hơn.
• Xem xét việc tạo sitemap và gửi nó cho các công cụ tìm kiếm để cải thiện quá trình lập chỉ mục.

4. Kết luận

Angular Universal là một công cụ mạnh mẽ giúp tối ưu hóa ứng dụng Angular của bạn cho SEO và khả năng tìm kiếm trên các công cụ tìm kiếm. Với việc sử dụng SSR và cấu hình phù hợp, bạn có thể cung cấp nội dung đã được kết xuất phía máy chủ cho trình tìm kiếm, giúp cải thiện khả năng tìm kiếm và đánh giá của trang web.

Trong bài viết này, chúng ta đã tìm hiểu cách cài đặt và cấu hình Angular Universal, cũng như cách sử dụng SSR và tối ưu hóa SEO trong ứng dụng Angular của chúng ta. Hy vọng rằng bạn đã có được kiến thức cơ bản để bắt đầu sử dụng Angular Universal và cải thiện khả năng tìm kiếm của trang web của mình.

5. Tài nguyên

• Angular Universal
• Angular Universal GitHub repository
• Angular Universal Starter Kit
• Angular SEO Guide