JavaScript SEO là gì? Cách giúp nội dung render được lập chỉ mục

JavaScript SEO là nhóm việc kỹ thuật giúp công cụ tìm kiếm thu thập, render (dựng trang) và lập chỉ mục đúng những nội dung được tạo hoặc thay đổi bằng JavaScript. Các website làm bằng React, Vue, Angular hay trình dựng trang kéo thả hiện đại thường dựa nhiều vào JavaScript để hiển thị sản phẩm, bài viết, giá. Người dùng với trình duyệt mạnh thấy đầy đủ; câu hỏi là công cụ tìm kiếm có thấy giống vậy không, và thấy vào lúc nào.

Theo hướng dẫn cơ bản về JavaScript SEO của Google Search Central, Googlebot xử lý trang JavaScript qua ba giai đoạn: thu thập (crawl), render và lập chỉ mục. Google có render JavaScript bằng một phiên bản Chromium cập nhật, nhưng trang phải chờ trong hàng đợi render. Nội dung đã có sẵn trong HTML ban đầu thì được hiểu ngay từ lúc thu thập; nội dung chỉ xuất hiện sau khi chạy JavaScript phải đợi tới bước render. Vì vậy nguyên tắc an toàn là: nội dung và liên kết quan trọng nên có trong HTML ban đầu.

CSR, SSR, SSG và hydration khác nhau thế nào

Google từng gợi ý dynamic rendering (phục vụ bản HTML dựng sẵn riêng cho bot) như một cách tạm; tài liệu hiện hành coi đó là giải pháp tình thế, không phải hướng lâu dài. Với website mới, chọn SSR hoặc SSG cho các trang cần lên Google là quyết định kiến trúc đơn giản hơn nhiều so với vá lỗi sau.

Cần chuẩn bị gì trước khi kiểm tra

• Danh sách mẫu trang (template): trang chủ, danh mục, sản phẩm, bài blog, trang dịch vụ — kiểm tra theo mẫu, không phải từng URL.
• Quyền truy cập Search Console để dùng công cụ Kiểm tra URL.
• Người phụ trách front-end hoặc đơn vị làm web, vì phần sửa nằm ở mã nguồn và cấu hình framework.
• Danh sách nội dung “phải có” cho mỗi mẫu trang: tiêu đề, đoạn mô tả chính, giá, liên kết tới trang liên quan, dữ liệu có cấu trúc.

Quy trình kiểm tra JavaScript SEO 6 bước

Bước 1. Kiểm tra HTML ban đầu

Mở “Xem nguồn trang” (view source) — không phải công cụ Inspect, vì Inspect hiển thị DOM sau khi JavaScript đã chạy. Tìm trong mã nguồn các nội dung ở danh sách “phải có”: tiêu đề H1, đoạn mô tả, giá, thẻ title, meta description, canonical, meta robots. Cái gì có ở đây thì Google hiểu được ngay từ lúc thu thập. Đặc biệt kiểm tra meta robots: nếu HTML ban đầu có noindex, Google có thể bỏ qua bước render, nên đừng trông vào JavaScript để gỡ noindex sau.

Bước 2. So sánh DOM sau render

Mở công cụ Inspect hoặc xem HTML đã render trong công cụ Kiểm tra URL của Search Console, rồi đặt cạnh mã nguồn ban đầu. Ghi lại những gì chỉ xuất hiện sau render: danh sách sản phẩm, đánh giá, phần mô tả dài, liên kết phân trang. Những phần này là điểm rủi ro — nếu chúng quan trọng cho truy vấn tìm kiếm, nên chuyển sang dựng từ máy chủ.

Bước 3. Đảm bảo link là phần tử hợp lệ

Google khám phá trang mới chủ yếu qua thẻ a có thuộc tính href trỏ tới URL thật. Một nút bấm dùng sự kiện onclick để đổi trang, một thẻ span được gắn JavaScript điều hướng, hay đường dẫn dạng dấu thăng (#/san-pham) đều không phải liên kết mà Googlebot đi theo được. Với ứng dụng một trang (SPA), dùng History API để mỗi màn hình có URL riêng, và trong HTML vẫn là thẻ a href chuẩn.

Bước 4. Quản lý nội dung tải chậm

Lazy-loading ảnh và nội dung giúp trang nhanh hơn, nhưng Googlebot không cuộn trang, không bấm “Xem thêm” và không thao tác như người dùng. Nội dung chỉ tải khi người dùng cuộn tới hoặc bấm nút có thể không bao giờ được thấy. Dùng lazy-loading gốc của trình duyệt cho ảnh, hoặc cơ chế phát hiện phần tử vào khung nhìn; với danh sách dài, cung cấp thêm trang phân trang có URL riêng thay vì chỉ có cuộn vô hạn.

Bước 5. Kiểm thử bằng công cụ chính thức

Công cụ Kiểm tra URL trong Search Console cho xem HTML Google đã render, ảnh chụp màn hình và các tài nguyên không tải được. Rich Results Test cũng render trang và cho xem HTML sau render, tiện để kiểm tra trang chưa xác minh quyền. Kiểm tra mỗi mẫu trang một URL đại diện; nếu tài nguyên JavaScript hoặc API bị chặn bởi robots.txt, Google có thể render thiếu nội dung.

Bước 6. Theo dõi lỗi render

Lỗi JavaScript thường xuất hiện sau mỗi lần cập nhật: một thư viện đổi phiên bản, một API trả lỗi, và phần nội dung chính biến mất mà giao diện vẫn hiện khung trống. Theo dõi báo cáo Lập chỉ mục trang trong Search Console, đặc biệt các trang bị đánh dấu soft 404 — SPA hay gặp tình trạng trang “không tìm thấy” vẫn trả mã 200. Cách xử lý: điều hướng sang URL trả mã 404 thật, hoặc thêm meta robots noindex cho màn hình lỗi.

Ví dụ thực hành: trung tâm tiếng Anh dùng trình dựng trang

Ví dụ giả định: một trung tâm tiếng Anh làm website bằng framework JavaScript dạng CSR. Trang “Lịch khai giảng” lấy dữ liệu khoá học từ API sau khi tải trang; danh sách giáo viên chỉ hiện khi bấm từng tab. Kết quả kiểm tra:

Việc chuyển đổi không cần viết lại toàn bộ website; ưu tiên các mẫu trang mang lại học viên. Sau khi sửa, trung tâm kiểm tra lại bằng công cụ Kiểm tra URL và theo dõi trạng thái index của nhóm trang khoá học trong vài tuần.

AI giúp được gì với JavaScript SEO

• So sánh hai đoạn HTML (trước và sau render) để liệt kê phần chênh lệch — nhanh hơn dò tay.
• Giải thích thông báo lỗi trong console hoặc trong công cụ Kiểm tra URL.
• Gợi ý cách cấu hình SSR/SSG cho framework bạn đang dùng — nhưng phải đối chiếu với tài liệu chính thức của framework đúng phiên bản, vì AI hay trả lời theo phiên bản cũ.

AI không biết website của bạn render thế nào trong môi trường thật của Google. Kết luận cuối cùng phải dựa trên kết quả của công cụ Kiểm tra URL, không phải suy đoán từ mã nguồn.

Sai lầm thường gặp

• Kiểm tra bằng Inspect rồi yên tâm, trong khi mã nguồn ban đầu rỗng.
• Dùng nút bấm thay cho liên kết trong menu, phân trang, danh mục.
• Chặn file JavaScript hoặc API trong robots.txt khiến Google render thiếu.
• Trang lỗi trả mã 200 trong ứng dụng một trang, tạo ra hàng loạt soft 404.
• Thay đổi title, canonical bằng JavaScript khác với giá trị trong HTML ban đầu, gửi tín hiệu mâu thuẫn.

Câu hỏi thường gặp