JavaScript SEO: Vì sao Google không thấy nội dung?

Trang mở bình thường trên Chrome, nhưng Google chỉ index một tiêu đề rỗng và vài dòng trong footer. Đội phát triển nói “bot hiện đại chạy được JavaScript rồi”, đội SEO lại thấy URL mãi không lên. Cả hai đều đúng một nửa.

Google có thể render JavaScript, nhưng khả năng render không đồng nghĩa mọi ứng dụng JavaScript sẽ được crawl nhanh, hiểu đúng và index đầy đủ. Muốn tìm lỗi, cần nhìn trang theo ba chặng Google thực sự đi qua: crawl HTML, render JavaScript và index kết quả.

Google xử lý trang JavaScript như thế nào?

Giai đoạn 1: Crawl

Googlebot tải URL, đọc HTTP status, header, robots directive và HTML ban đầu. Ở bước này, crawler đã có thể lấy link từ thẻ <a>, canonical, title và nội dung có sẵn trong response.

Nếu server trả 404, 500, chặn robots hoặc đặt noindex, quá trình có thể dừng trước khi ứng dụng kịp chạy.

Giai đoạn 2: Render

Trang trả 200 có thể được đưa vào hàng đợi render. Một phiên bản Chromium không giao diện chạy JavaScript, tải tài nguyên được phép và tạo DOM sau render. Thời gian chờ có thể ngắn hoặc dài tùy tài nguyên của hệ thống crawl.

Giai đoạn 3: Index

Google đọc nội dung và liên kết từ HTML đã render, sau đó đánh giá canonical, chất lượng, trùng lặp và khả năng index. Render thành công vẫn không bảo đảm index; trang còn phải đủ giá trị và không xung đột tín hiệu.

Bài kiểm tra nhanh: tắt JavaScript

Mở View Source hoặc dùng curl để xem HTML response. Đừng chỉ mở DevTools Elements, vì tab Elements hiển thị DOM sau khi JavaScript đã chạy.

Hãy tìm năm thứ:

1. Title và meta description có sẵn không?
2. H1 và đoạn nội dung chính có xuất hiện không?
3. Link tới trang khác có phải thẻ <a href> thật không?
4. Canonical và robots meta có đúng ngay từ đầu không?
5. Server có trả status code đúng không?

Nếu HTML chỉ có <div id="app"></div>, toàn bộ khả năng khám phá phụ thuộc vào render. Điều đó không chắc chắn là lỗi, nhưng làm chẩn đoán và index chậm hơn cần thiết.

Bảy lỗi JavaScript SEO thường gặp

1. Nội dung chỉ xuất hiện sau thao tác người dùng

Googlebot không có nghĩa vụ click tab, mở accordion, cuộn vô hạn hoặc bấm “Xem thêm”. Nội dung tải sau một hành động có thể không được phát hiện.

Giải pháp là render nội dung quan trọng trong HTML hoặc bảo đảm URL và liên kết riêng cho từng trạng thái cần index. Accordion có sẵn nội dung trong DOM thường ổn; nội dung chỉ fetch sau click thì rủi ro hơn.

2. Route phía client luôn trả status 200

SPA có thể hiển thị trang “Không tìm thấy” nhưng server vẫn trả 200. Đây là soft 404. Ngược lại, route hợp lệ đôi khi bị web server trả 404 trước khi frontend router xử lý.

Mỗi URL indexable cần status đúng từ server. Trang không tồn tại trả 404; nội dung đã chuyển trả redirect phù hợp; lỗi tạm thời trả 5xx.

3. Link không crawl được

Đoạn sau trông như link với người dùng nhưng không phải đường crawl đáng tin:

<span onclick="goTo('/san-pham')">Sản phẩm</span>

Hãy dùng:

<a href="/san-pham">Sản phẩm</a>

Bạn vẫn có thể chặn điều hướng mặc định để dùng router, miễn href chứa URL thật.

4. JavaScript thay canonical

Canonical tốt nhất nên có trong HTML source và giữ ổn định. Nếu source trỏ URL A nhưng script đổi sang B, crawler nhận hai tín hiệu theo hai thời điểm. Tương tự, đừng hy vọng JavaScript gỡ noindex; Google có thể thấy noindex và bỏ qua render.

5. API hoặc bundle bị robots.txt chặn

Ứng dụng cần file JS, CSS hoặc API public để dựng nội dung. Nếu Googlebot không tải được tài nguyên, bản render có thể trắng hoặc thiếu layout.

Không phải mọi API đều nên mở. Endpoint riêng tư vẫn phải bảo vệ. Nhưng dữ liệu công khai cần để render trang indexable phải có chiến lược phục vụ crawler rõ ràng.

6. Render phụ thuộc localStorage, cookie hoặc vị trí

Googlebot đến như một người dùng mới. Nếu nội dung chỉ xuất hiện sau khi có token localStorage, cookie consent đặc biệt hoặc geolocation, crawler có thể thấy empty state.

Nội dung cốt lõi nên có phiên bản mặc định. Cá nhân hóa bổ sung sau, không thay toàn bộ chủ đề của URL.

7. Hydration lỗi

SSR đã gửi HTML đầy đủ nhưng JavaScript hydrate lỗi, xóa nội dung hoặc tạo DOM khác. Search có thể vẫn đọc HTML ban đầu, song trải nghiệm người dùng và liên kết sau render bị hỏng.

Theo dõi console error, mismatch cảnh báo và request thất bại trên production. Lỗi chỉ xảy ra với bot hoặc thiết bị chậm thường khó thấy trong QA thông thường.

CSR, SSR, SSG và dynamic rendering

Với blog, landing page, danh mục và tài liệu, SSR hoặc SSG thường là lựa chọn dễ vận hành. Dashboard sau đăng nhập không cần index nên CSR hoàn toàn hợp lý.

Dynamic rendering từng được dùng để gửi HTML riêng cho bot, nhưng dễ tạo hai phiên bản khác nhau và tăng chi phí bảo trì. Nếu có thể, hãy phục vụ cùng nội dung render sẵn cho cả người dùng và crawler.

Cách audit JavaScript SEO từng bước

Bước 1: So sánh ba phiên bản

Đặt cạnh nhau:

• HTML source;
• DOM sau render;
• ảnh chụp/rendered HTML từ URL Inspection.

Phần nào chỉ có ở trình duyệt của bạn nhưng thiếu trong URL Inspection chính là đầu mối.

Bước 2: Kiểm tra request và tài nguyên

Tìm file bị 403, 404, CORS, timeout hoặc chặn robots. Một API lỗi có thể làm cả vùng nội dung biến mất dù bundle chính vẫn tải.

Bước 3: Kiểm tra metadata

Title, description, canonical, robots và structured data phải đúng cho từng route. SPA thường mắc lỗi giữ metadata của trang trước hoặc tạo canonical từ URL chưa chuẩn hóa.

Meta Tag Checker giúp xem nhanh title, canonical, Open Graph và heading mà server đang cung cấp.

Bước 4: Kiểm tra link và sitemap

Link nội bộ phải có href, sitemap chỉ chứa URL canonical và mỗi URL trả status đúng. Đừng dùng sitemap để bù cho kiến trúc điều hướng không crawl được.

Bước 5: Đo hiệu năng

Bundle lớn và long task làm người dùng chậm, đồng thời khiến render tốn tài nguyên. Chạy Page Speed Checker, chú ý LCP, INP, TBT và lượng JavaScript không dùng.

Bước 6: Test mẫu theo template

Đừng chỉ test homepage. Chọn bài viết, danh mục, sản phẩm, kết quả lọc, trang phân trang và URL 404. Phần lớn lỗi JavaScript SEO nằm ở route ít được đội phát triển mở thủ công.

Một ca lỗi điển hình

Một website tuyển dụng dùng Vue tải danh sách việc làm bằng API sau khi component mounted. Trang danh mục có H1 trong source, nhưng từng việc làm chỉ là card tạo bằng JavaScript. Nút card dùng @click trên <div>, không có href.

Người dùng vẫn tìm việc bình thường. Google thấy danh mục nhưng không có đường URL để khám phá chi tiết. Sitemap có URL việc làm, song nhiều trang bị crawl chậm và gần như không có internal link.

Cách sửa không phải bỏ Vue. Đội phát triển chuyển card thành <a href>, render danh sách ban đầu ở server, giữ filter tương tác ở client và trả 404 thật cho việc làm hết hạn. Kết quả là kiến trúc vẫn hiện đại nhưng đường crawl không còn phụ thuộc vào may mắn.

Checklist trước khi release

• Nội dung chính có trong HTML hoặc render ổn định.
• Route hợp lệ trả 200; route mất trả 404/410.
• Mọi đường điều hướng quan trọng dùng <a href>.
• Canonical và robots có trong source, không bị script đổi.
• CSS, JS và API cần thiết không bị chặn.
• Empty state không thay thế nội dung cho crawler mới.
• Metadata cập nhật đúng khi đổi route.
• Structured data tồn tại trong rendered HTML.
• Mobile và desktop có nội dung tương đương.
• URL Inspection thấy cùng nội dung người dùng thấy.

Kiểm tra tổng thể: dùng SEO Checker cho một URL đại diện và SEO audit miễn phí để phát hiện lỗi lặp trên nhiều template.

Kết luận

JavaScript không làm SEO thất bại. Kiến trúc chỉ hoạt động sau click, status code sai, link không có href và metadata thay đổi muộn mới là vấn đề. Hãy làm HTML ban đầu có ý nghĩa, giữ URL và status trung thực, rồi dùng JavaScript để tăng trải nghiệm thay vì che giấu nội dung cốt lõi.

Nguồn tham khảo: Google Search Central – JavaScript SEO basics.