Angular & SEO: Tạo ứng dụng web Single-Page Search-Engine Friendly với Angular 6

Mục lục

1. Giới thiệu về Angular và SEO
2. Nhược điểm của Angular đối với SEO
3. Giải pháp: Render trang web Angular trên phía máy chủ
   1. Cài đặt Angular CLI và tạo dự án Angular
   2. Render trang web Angular trên phía máy chủ sử dụng Angular Universal
   3. Sử dụng gói ng-toolkit/universal để đơn giản hóa việc áp dụng Angular Universal
4. Cài đặt và cấu hình Angular Universal
   1. Thêm gói ng-toolkit/universal vào dự án Angular
   2. Kiểm tra phiên bản webpack-cli
   3. Thiết lập building process và server-side rendering
5. So sánh kết quả trước và sau khi áp dụng server-side rendering
   1. So sánh trên trình duyệt
   2. So sánh bằng cURL trên command line

🖥️ Angular và SEO: Render trang web Angular trên phía máy chủ

Angular là một framework ứng dụng web đơn trang, điều này có nghĩa là mã JavaScript của trang web chỉ được chạy trên phía máy khách (client-side) trong trình duyệt. Tuy nhiên, điều này gây bất lợi cho việc tối ưu hóa công cụ tìm kiếm (SEO) vì các công cụ crawl web của các công cụ tìm kiếm như Google không thể thực thi mã JavaScript và không thể hiển thị nội dung của trang web Angular. Điều này khiến trang web Angular không được hiển thị đúng cấu trúc trên kết quả tìm kiếm.

Một giải pháp cho vấn đề này là render trang web Angular trên phía máy chủ (server-side rendering). Kỹ thuật này giúp tạo ra một phiên bản HTML được hoàn chỉnh của trang web trước khi nó được gửi đến trình duyệt. Điều này cho phép các công cụ tìm kiếm hiểu được cấu trúc và nội dung của trang web, giúp trang web xếp hạng cao hơn trong kết quả tìm kiếm.

Trong bài viết này, chúng ta sẽ tìm hiểu cách render trang web Angular trên phía máy chủ sử dụng Angular Universal và tận dụng gói ng-toolkit/universal để đơn giản hóa quá trình áp dụng Angular Universal. Mời bạn theo dõi các bước sau để biết thêm chi tiết.

🛠️ Bước 1: Cài đặt Angular CLI và tạo dự án Angular

Để bắt đầu, bạn cần cài đặt Angular CLI (Command Line Interface) vào hệ thống của mình. Nếu bạn chưa cài đặt Angular CLI, hãy thực hiện lệnh sau để cài đặt toàn cầu:

NPM install -g @angular/cli

Sau khi cài đặt thành công, bạn có thể sử dụng lệnh ng để tạo một dự án Angular mới. Bạn có thể tạo một dự án mới bằng cách chạy lệnh sau:

ng new ten-du-an-angular

Tiếp theo, hãy chuyển đến thư mục của dự án Angular mới bằng lệnh:

cd ten-du-an-angular

🚀 Bước 2: Render trang web Angular trên phía máy chủ sử dụng Angular Universal

Bước kế tiếp chúng ta sẽ sử dụng Angular Universal để thực hiện việc render trang web Angular trên phía máy chủ.

Đầu tiên, chúng ta cần cài đặt gói @nguniversal/express-engine và @nguniversal/module-map-ngfactory-loader bằng lệnh sau:

ng add @nguniversal/express-engine

Sau khi cài đặt xong, chúng ta cần thay đổi một số file cấu hình trong dự án Angular. Hãy làm theo các bước sau:

1. Mở file angular.json và thêm đoạn mã sau vào phần architect -> build -> options:

"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
  "src/favicon.ico",
  "src/assets"
],

2. Trong file src/app/app.module.ts, hãy thêm hai module là BrowserModule và BrowserTransferStateModule vào mảng imports:

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule
  ],
  // ...
})
export class AppModule { }

3. Tạo một file mới trong thư mục src với tên server.ts và thêm đoạn mã sau vào file:

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { AppServerModule } from './app/app.server.module';
import * as express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';

const app = express();

enableProdMode();

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule
}));

app.set('view engine', 'html');
app.set('views', 'dist/client');

app.get('*.*', express.static('dist/client', {
  maxAge: '1y'
}));

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

app.listen(4000, () => {
  console.log('Server is listening on port 4000');
});

4. Cuối cùng, sửa lại file package.json và thêm đoạn mã sau vào phần scripts:

"build:server": "ng build --prod && ng run ten-du-an-angular:server:production",
"server": "node dist/server",
"postinstall": "npm run build:server"

Sau khi hoàn thành các bước trên, bạn đã cấu hình xong Angular Universal cho dự án Angular của mình. Bước tiếp theo là build dự án và chạy server-side rendering.

🛠️ Bước 3: Chạy server-side rendering bằng Angular Universal

Để chạy server-side rendering, chúng ta cần build dự án và sau đó khởi chạy server.

1. Đầu tiên, hãy chạy lệnh sau để build dự án:

npm run build:server

2. Sau khi build thành công, chạy lệnh npm run server để khởi chạy server-side rendering:

npm run server

Nếu không có lỗi, bạn sẽ thấy thông báo "Server is listening on port 4000". Bây giờ, trang web của bạn đã được render trên phía máy chủ và bạn có thể truy cập vào nó bằng cách mở trình duyệt và nhập URL http://localhost:4000.

🌐 So sánh kết quả trước và sau khi áp dụng server-side rendering

Để thấy sự khác biệt giữa việc render trang web Angular trên phía máy chủ và render trên phía máy khách (client-side), chúng ta sẽ so sánh kết quả trên trình duyệt và qua lệnh cURL trên command line.

1. Chạy trang web Angular trước khi áp dụng server-side rendering trên trình duyệt:

Khi truy cập vào trang web Angular trước khi áp dụng server-side rendering, bạn sẽ thấy rằng nội dung của trang web không được hiển thị hoàn chỉnh. Các phần nội dung được render bằng JavaScript như các tiêu đề, hình ảnh, và liên kết sẽ không xuất hiện trong mã nguồn của trang web.

2. Sử dụng lệnh cURL để kiểm tra sự khác biệt khi áp dụng server-side rendering:

Chạy lệnh sau trên command line để kiểm tra quá trình server-side rendering:

curl http://localhost:4000

Thông qua lệnh cURL, bạn sẽ thấy rằng nội dung của trang web đã được render hoàn chỉnh bao gồm tiêu đề, hình ảnh và liên kết. Điều này cho phép các công cụ tìm kiếm như Googlebot hiểu được cấu trúc và nội dung của trang web.

Qua việc so sánh trên trình duyệt và qua lệnh cURL, bạn có thể thấy rõ sự khác biệt giữa việc áp dụng server-side rendering và không áp dụng trong việc tối ưu hóa trang web Angular cho công cụ tìm kiếm.

📚 Tài liệu tham khảo

1. Angular Universal - Server-side Rendering
2. ng-toolkit/universal