Technical SEO

JavaScript SEO là gì?

Định nghĩa nhanh

JavaScript SEO là tập hợp kỹ thuật đảm bảo website/ứng dụng JavaScript được Google crawl, render, và index đúng cách. Liên kết phải dùng đúng thẻ <a href>, không chỉ onclick. 5 hạng mục cốt lõi: title/meta, canonical, liên kết nội bộ, lazy loading, mã trạng thái HTTP. SSR/prerendering vẫn được khuyến nghị dù Google có thể chạy JavaScript.

JavaScript SEO là gì?

JavaScript SEO là tập hợp kỹ thuật đảm bảo các website/ứng dụng web sử dụng JavaScript được Google Tìm kiếm crawl, render, và index đúng cách — một lĩnh vực technical SEO riêng biệt vì JavaScript tạo ra những thách thức mà các trang HTML tĩnh truyền thống không gặp phải.

Nguyên tắc nền tảng: liên kết phải “thu thập được”

Theo tài liệu chính thức, Googlebot phát hiện URL mới chủ yếu qua việc phân tích thuộc tính href trong các liên kết HTML. Có thể dùng JavaScript để chèn liên kết vào DOM, nhưng phải tuân theo các phương pháp hay nhất về liên kết có thể thu thập dữ liệu — nghĩa là liên kết phải có thẻ <a> với thuộc tính href hợp lệ, không chỉ là sự kiện onclick gắn vào một thẻ <div> hay <span> mà JavaScript xử lý điều hướng, vì Googlebot có thể không nhận diện được đây là một liên kết thực sự.

5 hạng mục kỹ thuật cốt lõi của JavaScript SEO

Hạng mục Vấn đề cần đảm bảo
Title & Meta Description Có thể dùng JavaScript để thiết lập/thay đổi các phần tử này, miễn là chúng xuất hiện đúng trong HTML đã render
Canonical URL Thẻ rel="canonical" nên được đặt trong HTML gốc thay vì chỉ chèn bằng JavaScript, để tránh rủi ro Google đọc sai trước khi render xong
Liên kết nội bộ Dùng đúng thẻ <a href>, không dùng JavaScript event thuần túy để điều hướng
Lazy loading nội dung Nội dung chỉ hiện khi cuộn/tương tác cần đảm bảo Googlebot vẫn thấy được, không phụ thuộc hoàn toàn vào hành vi người dùng thật
Mã trạng thái HTTP Ứng dụng single-page (SPA) cần xử lý đúng mã trạng thái cho từng “trang” ảo, không phải lúc nào cũng trả về 200

Vì sao SSR/Prerendering vẫn được khuyến nghị dù Google có thể chạy JavaScript

Một hiểu lầm phổ biến là “Google đã chạy được JavaScript nên không cần quan tâm SSR nữa”. Tài liệu chính thức nhấn mạnh ngược lại: kết xuất phía máy chủ hoặc kết xuất trước (prerendering) vẫn là lựa chọn tốt vì giúp trang tải nhanh hơn cho CẢ người dùng thật lẫn trình thu thập dữ liệu — và quan trọng không kém: không phải mọi bot đều có khả năng chạy JavaScript (ví dụ nhiều công cụ chia sẻ mạng xã hội, một số bot AI crawler). Tối ưu cho rendering không chỉ là vấn đề của riêng Google.

Kỹ thuật khắc phục phổ biến khi gặp vấn đề JavaScript SEO

  1. Dynamic Rendering — phục vụ phiên bản đã render sẵn cho bot, phiên bản JS đầy đủ cho người dùng (giải pháp tạm thời, có rủi ro nếu triển khai sai thành cloaking).
  2. Hydration — gắn khả năng tương tác vào HTML đã render sẵn khi tải trong trình duyệt; lỗi hydration là nguyên nhân phổ biến gây mất nội dung sau khi render.
  3. Kiểm tra bằng URL Inspection Tool — so sánh HTML thô với HTML đã render để phát hiện chênh lệch nội dung trước khi xuất bản rộng rãi.

Two-wave Indexing — hệ quả thực tế của hàng đợi render kép

Vì trang phải qua hai hàng đợi riêng biệt (crawl rồi mới đến render), trong thực tế xảy ra hiện tượng gọi không chính thức là “two-wave indexing” (lập chỉ mục hai đợt): đợt đầu tiên, Google index dựa trên HTML thô (có thể gần như trống với site CSR nặng); đợt thứ hai, sau khi hoàn tất render, Google cập nhật lại chỉ mục với nội dung đầy đủ hơn. Khoảng cách thời gian giữa hai đợt này có thể từ vài giờ đến vài ngày tùy tải hệ thống — đây là lý do các trang JavaScript mới xuất bản đôi khi xuất hiện trên Google với tiêu đề/mô tả không chính xác trong giai đoạn đầu, trước khi được cập nhật đúng ở đợt index thứ hai.

Kiểm tra Prerendering như một giải pháp trung gian

Với các đội kỹ thuật chưa sẵn sàng chuyển đổi hoàn toàn sang SSR (đòi hỏi thay đổi kiến trúc lớn), prerendering là giải pháp trung gian phổ biến: tạo sẵn các phiên bản HTML tĩnh cho những trang ít thay đổi (thường qua một dịch vụ build-time hoặc middleware), trong khi các phần tương tác động vẫn dùng JavaScript như bình thường. Giải pháp này phù hợp nhất với các trang có nội dung tương đối ổn định (trang landing, trang thông tin sản phẩm cơ bản), kém phù hợp với các trang có dữ liệu thay đổi liên tục theo thời gian thực.

Sai lầm thường gặp

  • Dùng onclick trên thẻ không phải <a> để điều hướng, khiến Googlebot không nhận diện được đây là liên kết.
  • Chèn thẻ canonical hoàn toàn bằng JavaScript mà không có trong HTML gốc, tạo rủi ro Google đọc sai URL chính tắc.
  • Cho rằng SSR không còn cần thiết chỉ vì Google có thể render JavaScript.
  • Không kiểm tra thực tế bằng công cụ render trước khi xuất bản, chỉ tin tưởng mã hoạt động đúng trên trình duyệt phát triển.

Checklist JavaScript SEO trước khi ra mắt

  • Mọi liên kết quan trọng có dùng đúng thẻ <a href> không?
  • Canonical, title, meta description có xuất hiện đúng trong HTML đã render không?
  • Tài nguyên JS/CSS cần thiết có bị chặn trong robots.txt không?
  • Đã kiểm tra bằng URL Inspection Tool (Live Test) trước khi xuất bản thay đổi lớn chưa?

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

Framework JavaScript nào (React, Vue, Angular) thân thiện với SEO nhất?

Không có framework nào “thân thiện SEO” tuyệt đối theo mặc định — mức độ thân thiện phụ thuộc vào cách triển khai (có dùng SSR/SSG hay không) nhiều hơn là bản thân framework được chọn.

SPA (Single Page Application) có luôn khó SEO hơn website truyền thống?

Có xu hướng phức tạp hơn do cần xử lý thêm nhiều vấn đề (URL ảo, mã trạng thái, rendering), nhưng hoàn toàn có thể tối ưu tốt nếu áp dụng đúng kỹ thuật SSR/prerendering và tuân thủ các nguyên tắc liên kết có thể thu thập dữ liệu.

Nguồn tham khảo