Tối ưu SEO Angular với Rendertron

Mục lục

1. Giới thiệu
2. Render Tron là gì?
3. Tại sao cần tối ưu hóa ứng dụng Angular cho công cụ tìm kiếm?
4. Cách sử dụng Render Tron với Angular 5 và Firebase Cloud Functions
5. Xây dựng ứng dụng Angular sử dụng Render Tron
6. Sử dụng thẻ Meta để tối ưu hóa SEO cho các trang
7. Tích hợp Firebase với ứng dụng Angular
8. Xây dựng Firebase Cloud Functions middleware
9. Triển khai ứng dụng và Cloud Functions trên Firebase
10. Kết luận

🖥️ Tối ưu hóa ứng dụng Angular cho công cụ tìm kiếm

Trong bài viết này, tôi sẽ hướng dẫn bạn cách tối ưu hóa ứng dụng Angular để có thể được tìm kiếm tốt trên các công cụ tìm kiếm như Google và Bing. Chúng ta sẽ sử dụng một thư viện mới từ nhóm Google Chrome có tên là Render Tron để thực hiện việc này mà không cần sử dụng Angular Universal.

Render Tron là một trình duyệt Chrome "không đầu" (headless) có thể chạy trên máy chủ và có khả năng render trang web của bạn giống như một người dùng thực sự và trả về dữ liệu đã được render cho Bot muốn đọc các thẻ meta hoặc bất kỳ dữ liệu bất đồng bộ nào đã được tải vào trang.

Tiếp theo, chúng ta sẽ thiết lập một Cloud Function để làm nhiệm vụ trung gian xác định xem người dùng là Bot hay người dùng thực và chỉ phục vụ ứng dụng Angular bình thường cho người dùng thực. Nếu người dùng là Bot, chúng ta sẽ định tuyến yêu cầu tới Render Tron trước, sau đó trả về trang đã render đầy đủ cho Bot.

Cuối cùng, chúng ta sẽ triển khai ứng dụng lên Firebase Hosting và Cloud Functions để có một ứng dụng Progressive Web App tối ưu hóa cho công cụ tìm kiếm mà không phải thay đổi dự án Angular hiện có của chúng ta.