JavaScript SEO & Rendering: Kỹ thuật điều phối trình kết xuất cho Google Bot

1. Quy trình Google thực thi JavaScript (The Two-pass Indexing)

Quy trình Google thực thi JavaScript gồm hai lượt lập chỉ mục. Lần 1, Bot tải HTML gốc và lập chỉ mục nội dung tĩnh có sẵn. Trang sau đó vào hàng đợi render, có thể mất vài giờ đến vài tuần. Lần 2, Google dùng Chrome thực thi JS và lập chỉ mục lại DOM.

Khác với HTML tĩnh, JS yêu cầu tài nguyên tính toán (CPU) để render. Googlebot xử lý như sau:

Đi đúng thứ tự tiết kiệm được nhiều tháng, vì mỗi bước làm nền cho bước sau. Khóa Học SEO xếp sẵn thứ tự theo từng loại website.

1. Crawl (Lần 1): Bot tải về tệp HTML gốc. Nếu nội dung được tạo bằng JS, lúc này Bot chỉ thấy một trang trắng hoặc khung (skeleton). Bot lập chỉ mục tiêu đề và các nội dung tĩnh có sẵn.
2. Render Queue (Hàng đợi): Trang web được đưa vào hàng đợi để chờ tài nguyên CPU rảnh rỗi. Việc này có thể mất từ vài giờ đến vài tuần.
3. Rendering (Lần 2): Google dùng trình duyệt Chrome (phiên bản mới nhất) để thực thi JS, lấy nội dung đã render (DOM) và lập chỉ mục lại một lần nữa.

=> Rủi ro: Nếu bạn chỉ dựa vào phía khách hàng (CSR), nội dung của bạn sẽ bị chậm trễ trong việc xuất hiện trên Google và AI Overview.

2. Phân tích các chiến lược Rendering (Kết xuất)

Bảng này so ba chiến lược dựng trang theo cùng một trục là bot thấy gì. Kết xuất phía máy chủ trả về HTML hoàn chỉnh nên tốt nhất cho SEO vì bot thấy nội dung ngay lần đầu, đổi lại tốn tài nguyên máy chủ và có thể chậm ở thời gian phản hồi đầu tiên nếu không tối ưu.

3. Kỹ thuật On-Page Engineering cho JavaScript SEO

Kỹ thuật On-Page Engineering cho JavaScript SEO là bộ kiểm soát 3 lớp. Dùng thẻ a có href cho link thay vì span gắn onclick, vì Googlebot không nhấp nút. Tránh nội dung chỉ hiện khi cuộn hay nhấp, dùng Intersection Observer để tự tải. Cấu hình Server trả mã 404 thật cho trang lỗi.

Sử dụng bộ công cụ "3 lớp" để kiểm soát:

Phần kỹ thuật thường giao cho lập trình viên, nhưng người ra yêu cầu phải hiểu đủ để kiểm tra lại. Khóa Học SEO Master nhắm vào phần hiểu đủ đó.

3.1. Đảm bảo Link có thể cào (Crawlable Links)

Googlebot không nhấp vào các nút (buttons) có gắn sự kiện JS để chuyển trang.

• Sai: <span onclick="changePage()">Xem thêm</span>
• Đúng: <a href="/trang-moi/">Xem thêm</a>

3.2. Tránh "Nội dung ẩn" do JS

Nếu nội dung quan trọng chỉ hiện ra khi người dùng cuộn trang hoặc nhấp vào một phần tử, Googlebot có thể bỏ lỡ nó.

• Hành động: Sử dụng kỹ thuật Intersection Observer để tự động tải nội dung khi phần tử tiến gần khung hình (Viewport), đảm bảo Bot thấy nội dung mà không cần tác động thủ công.

3.3. Xử lý trạng thái lỗi (Status Codes)

Với CSR, khi trang bị lỗi (404), JS vẫn có thể trả về mã 200 OK cho Bot.

• Hành động: Sử dụng cấu hình Server để buộc trả về mã 404 Not Found thực sự, tránh việc Google lập chỉ mục các trang lỗi.

4. Kiểm tra và Khắc phục (Debugging JS SEO)

Bộ công cụ ba lớp giúp khoanh vùng lỗi từ ngoài vào trong. Công cụ kiểm tra URL cho xem bản trang mà Google dựng ra, nếu ảnh chụp hoặc phần HTML thiếu nội dung quan trọng thì bạn đang có lỗi. Công cụ kiểm kết quả giàu định dạng cho thấy Google phân tích dữ liệu có cấu trúc ra sao.

1. Công cụ kiểm tra URL (GSC): Sử dụng "Test Live URL" và xem "View Tested Page". Nếu phần "Screenshot" hoặc "HTML" bị thiếu nội dung quan trọng, trang của bạn đang bị lỗi JS SEO.
2. Rich Results Test: Xem cách Google AI phân tích cấu trúc dữ liệu sau khi thực thi JS.
3. Screaming Frog (JavaScript Rendering mode): Quét toàn bộ website để tìm các trang có sự khác biệt giữa nội dung HTML gốc và nội dung sau khi Render.

5. Checklist thực hành JavaScript SEO

Ba mục đầu của checklist đều kiểm được nhanh. Website đã dùng kết xuất phía máy chủ hoặc cơ chế tương đương chưa, robots.txt có vô tình chặn các tệp script quan trọng khiến bot không dựng được không, và toàn bộ nội dung chính có xuất hiện trong mã nguồn sau khi dựng không. Mục thứ hai là lỗi vô tình phổ biến.

• [ ] 1. Rendering: Website đã sử dụng SSR hoặc Hydration (như Next.js, Nuxt.js) chưa?
• [ ] 2. Robots.txt: Có vô tình chặn các tệp .js quan trọng khiến Bot không render được không?
• [ ] 3. Content: 100% nội dung chính (Text, Images) có xuất hiện trong mã nguồn DOM sau khi Render không?
• [ ] 4. Metadata: Thẻ Title và Meta Description có được thay đổi bằng JS không? (Google ưu tiên đọc các thẻ này ở HTML gốc).
• [ ] 5. Tốc độ: Các tệp JS có quá nặng làm ảnh hưởng đến chỉ số INP (Interaction to Next Paint) trên di động không?

6. Mục tiêu: Thống trị AI Overview

Để AI Overview trích xuất dữ liệu từ trang giàu JavaScript, nội dung quan trọng nhất như câu trả lời FAQ và định nghĩa cần nằm ngay trong HTML gốc qua SSR. Schema JSON-LD nên nhúng trực tiếp vào HTML gốc thay vì tạo bằng JS để Google nhận diện thực thể ngay.

Để AI (SI - Super Intelligence) của Google trích xuất dữ liệu từ các trang web giàu JavaScript:

1. Tối ưu hóa Lần 1: Cố gắng để các nội dung quan trọng nhất (như câu trả lời FAQ, định nghĩa) xuất hiện ngay trong HTML gốc (SSR). AI Overview ưu tiên các nguồn dữ liệu có độ tin cậy và tốc độ truy cập cao.
2. Định danh thực thể: Sử dụng Schema JSON-LD được nhúng trực tiếp vào HTML gốc thay vì tạo bằng JS để đảm bảo Google nhận diện thực thể ngay lập tức.

Lời kết: Kỹ thuật JavaScript SEO là ranh giới giữa một website "vô hình" và một website "quyền lực". Đừng để công nghệ cản trở tầm nhìn của Google. Khi bạn tối ưu hóa được quy trình Rendering, bạn đang mở rộng cánh cửa cho Google AI thấu hiểu và đề xuất nội dung của bạn.