SEO cho website JavaScript và SPA (React, Vue) - vấn đề thật và cách khắc phục
Vì sao website một trang (SPA) dễ gặp lỗi SEO - meta giống nhau, soft 404, nội dung chỉ có sau JavaScript - và các giải pháp SSR, SSG, prerender.
Đội ngũ SEO Agent OS · Xuất bản · 3 phút đọc
Nhiều website hiện đại được xây dựng dưới dạng SPA (Single Page Application) bằng React, Vue hoặc Angular: máy chủ trả về một khung HTML gần như rỗng, rồi JavaScript vẽ toàn bộ nội dung trong trình duyệt. Trải nghiệm có thể rất mượt, nhưng nếu không cẩn thận, công cụ tìm kiếm và nhiều crawler khác sẽ "nhìn thấy" một website rất khác với người dùng.
Google xử lý JavaScript thế nào?
Google thu thập HTML trước, sau đó đưa trang vào hàng đợi để render bằng một trình duyệt Chromium. Nội dung xuất hiện sau khi render vẫn có thể được lập chỉ mục. Tuy nhiên:
- Việc render tốn thêm thời gian và tài nguyên, nên trang mới có thể được hiểu chậm hơn.
- Nếu HTML ban đầu và bản sau render mâu thuẫn (ví dụ canonical khác nhau), tín hiệu bị nhiễu.
- Không phải bot nào cũng chạy JavaScript. Bot xem trước link của mạng xã hội, ứng dụng nhắn tin và nhiều crawler của các dịch vụ AI được ghi nhận chủ yếu đọc HTML ban đầu.
Năm lỗi SEO hay gặp ở SPA
1. Mọi URL trả cùng một HTML
Máy chủ trả cùng một index.html cho mọi đường dẫn: cùng title, cùng description, cùng canonical (thường trỏ về trang chủ), không có H1. Thông tin đúng chỉ xuất hiện sau khi JavaScript chạy.
2. Soft 404
URL không tồn tại vẫn trả mã 200 kèm trang "Không tìm thấy" do JavaScript vẽ, đôi khi còn kèm index, follow. Google có thể coi đây là soft 404, đồng thời các URL rác có nguy cơ bị lập chỉ mục.
3. Liên kết không phải liên kết
Điều hướng bằng sự kiện onClick thay vì thẻ <a href> khiến bot không phát hiện được trang con.
4. Schema và meta bị chèn trùng
Bản mặc định trong index.html cộng với bản do thư viện quản lý <head> thêm vào sau khi render, tạo ra hai khối Organization hoặc hai thẻ description.
5. Gói JavaScript lớn
Một gói JS vài trăm KB tải cho mọi trang làm chậm LCP và INP – xem Core Web Vitals.
Cách tự kiểm tra trong 5 phút
curl -s https://ten-mien/mot-trang-con | grep -i "<title>\|canonical\|<h1"– xem HTML ban đầu có đúng thông tin của trang đó không.curl -s -o /dev/null -w "%{http_code}" https://ten-mien/url-khong-ton-tai– phải là404.- Search Console → Kiểm tra URL → Xem trang đã thu thập → so sánh HTML đã render.
- Dán link vào ứng dụng nhắn tin xem bản xem trước có đúng tiêu đề và ảnh của trang con không.
Các hướng khắc phục
| Giải pháp | Mô tả | Phù hợp khi |
|---|---|---|
| SSR (Server-Side Rendering) | Máy chủ render HTML đầy đủ cho mỗi yêu cầu | Nội dung thay đổi thường xuyên, cần dữ liệu theo thời gian thực |
| SSG (Static Site Generation) | Tạo HTML tĩnh lúc build | Trang chính sách, bài viết, landing page |
| Prerender theo lịch | Dùng trình duyệt không giao diện tạo snapshot HTML cho các route công khai | Không muốn viết lại ứng dụng ngay |
| Sửa máy chủ | Trả 404 thật cho route không hợp lệ, noindex cho trang lỗi | Bắt buộc ở mọi phương án |
Google từng gợi ý "dynamic rendering" (trả HTML khác cho bot), nhưng hiện coi đó là giải pháp tạm thời, không phải lời khuyên lâu dài. Hướng bền vững là phục vụ cùng một HTML đầy đủ cho mọi người và mọi bot bằng SSR, SSG hoặc prerender.
Lộ trình an toàn cho website đang chạy
- Sửa soft 404 và trùng meta/schema trước: rủi ro thấp, tác động rõ.
- Prerender hoặc SSG các route công khai quan trọng nhất (trang chủ, danh mục, bài viết).
- Kiểm thử trên môi trường thử nghiệm: so sánh HTML, mã trạng thái, canonical từng route.
- Triển khai dần, theo dõi báo cáo lập chỉ mục trong Search Console.
- Về lâu dài, cân nhắc framework có sẵn SSR/SSG.
Đây cũng là nền tảng quan trọng cho GEO: nội dung không có trong HTML ban đầu khó được các hệ thống AI đọc và trích dẫn.