Technical SEO

Document Object Model (DOM)

Cấu trúc cây biểu diễn HTML sau khi được trình duyệt phân tích, là cơ sở để render và tương tác với trang.

3 lượt xem Cập nhật: 30/05/2026

Document Object Model (DOM) là gì?

Document Object Model (DOM) là cấu trúc cây được trình duyệt tạo ra sau khi phân tích mã HTML của trang. Mỗi phần tử HTML — như <h1>, <p>, <div>, hay thuộc tính class — đều trở thành một nút (node) trong cây DOM. DOM không phải là mã nguồn gốc, cũng không phải là bản sao HTML nguyên bản: nó là biểu diễn động, có thể thay đổi theo thời gian nhờ JavaScript.

DOM là giao diện lập trình (API) tiêu chuẩn do W3C quy định, cho phép script và các công cụ tương tác với nội dung, cấu trúc và kiểu dáng của tài liệu. Trình duyệt dùng DOM để xác định thứ tự hiển thị, tính toán bố cục (layout), vẽ pixel (paint) và xử lý sự kiện người dùng.

Tại sao quan trọng trong SEO?

DOM ảnh hưởng trực tiếp đến cách công cụ tìm kiếm hiểu và lập chỉ mục trang — đặc biệt với các trang sử dụng JavaScript nặng. Googlebot hiện hỗ trợ render gần như đầy đủ (từ năm 2019), nhưng vẫn có giới hạn về thời gian và tài nguyên. Nếu DOM bị xây dựng chậm, thiếu nội dung chính hoặc chứa nhiều phần tử ẩn vô ích, khả năng lập chỉ mục sẽ giảm.

  • Nội dung động: Nội dung được chèn qua JavaScript chỉ được lập chỉ mục nếu DOM hoàn tất render và không bị chặn bởi lỗi hoặc timeout.
  • Thẻ meta & liên kết: Các thẻ <title>, <meta name='description'>, <link rel='canonical'> phải tồn tại trong DOM cuối cùng — không chỉ trong HTML ban đầu.
  • Truy cập & cấu trúc: DOM xác định thứ bậc ngữ nghĩa (heading hierarchy), vai trò ARIA, và mức độ dễ đọc của nội dung — yếu tố gián tiếp ảnh hưởng đến trải nghiệm người dùng và xếp hạng.

Cách hoạt động

Khi tải một trang, trình duyệt thực hiện tuần tự ba bước chính:

  1. Phân tích HTML: Chuyển mã nguồn thành cây token, rồi xây dựng cây DOM sơ khai (không bao gồm CSS/JS).
  2. Xử lý CSS: Tạo cây CSSOM (CSS Object Model) từ các file CSS và thẻ <style>.
  3. Kết hợp & render: Gộp DOM + CSSOM thành cây render (render tree), sau đó tính toán layout và vẽ lên màn hình. Nếu có JavaScript đồng bộ (script không có async hoặc defer), trình duyệt tạm dừng xây dựng DOM cho đến khi script chạy xong.

Lưu ý: DOM có thể thay đổi sau khi trang tải xong — ví dụ khi người dùng cuộn, nhấn nút hoặc chuyển tab. Những thay đổi này không tự động gửi lại cho công cụ tìm kiếm, trừ khi trang được crawl lại và render lại.

Hướng dẫn thực hiện

Để đảm bảo DOM thân thiện với SEO, bạn nên làm theo các bước sau:

  1. Kiểm tra DOM cuối cùng: Dùng DevTools → tab Elements (không phải Source) để xem cây DOM sau render. So sánh với HTML nguồn: nội dung nào bị thiếu? Thẻ nào biến mất?
  2. Ưu tiên nội dung quan trọng trong HTML gốc: Đặt tiêu đề, mô tả ngắn, nội dung chính và liên kết quan trọng ngay trong HTML server-side — không phụ thuộc vào JavaScript để hiển thị.
  3. Giảm thiểu JavaScript chặn render: Loại bỏ script đồng bộ không cần thiết ở <head>; dùng defer cho script phụ thuộc vào DOM, async cho script độc lập.
  4. Kiểm tra canonical & meta: Đảm bảo thẻ <link rel='canonical'> và <meta name='robots'> xuất hiện trong DOM cuối cùng — không bị ghi đè hoặc xoá bởi script.
  5. Test bằng công cụ render: Dùng URL Inspection Tool trong Google Search Console để xem phiên bản DOM mà Googlebot thấy.

Lỗi thường gặp

Lỗi Dấu hiệu Cách khắc phục
Nội dung chính không xuất hiện trong DOM Tab Elements không thấy <h1>, <p> hoặc khối nội dung sau khi tải xong Chuyển logic render sang server-side (SSR) hoặc dùng SSG; tránh fetch + render toàn bộ nội dung bằng client-side JS
Thẻ <title> hoặc <meta description> bị thay đổi muộn Googlebot lập chỉ mục tiêu đề cũ dù bạn đã cập nhật bằng JavaScript Đặt giá trị <title> và <meta> trong HTML gốc; nếu bắt buộc dùng JS, đảm bảo thay đổi xảy ra trước sự kiện DOMContentLoaded
DOM quá lớn hoặc sâu Thời gian render > 5s trong URL Inspection Tool; cảnh báo 'render timeout' trong Search Console Giảm số lượng node (dưới 1.500 node khuyên dùng); loại bỏ phần tử thừa, tối ưu component React/Vue; dùng virtual scrolling cho danh sách dài

Ví dụ thực tế

Một trang tin tức sử dụng framework React để hiển thị bài viết. HTML gốc chỉ chứa <div id='root'></div>. Toàn bộ tiêu đề, nội dung và thẻ meta được chèn sau khi React mount. Khi kiểm tra bằng URL Inspection Tool, Googlebot thấy DOM trống trong vài giây đầu, sau đó mới có nội dung — nhưng nếu thời gian chờ quá ngắn, Google có thể lập chỉ mục phiên bản chưa có nội dung.

Giải pháp áp dụng: Chuyển sang Next.js với SSR. Kết quả: HTML gửi từ server đã chứa đầy đủ <h1>, <p>, <meta> và liên kết. DOM hoàn tất ngay lập tức, thời gian render giảm còn ~0,8s, tỷ lệ lập chỉ mục tăng 92% sau 4 tuần (theo dữ liệu đo từ 3 trang mẫu).

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

DOM có giống HTML nguồn không?

Không. HTML nguồn là văn bản tĩnh do máy chủ gửi đi. DOM là cây đối tượng động do trình duyệt xây dựng và có thể khác biệt hoàn toàn — ví dụ: script có thể xoá thẻ <header>, thêm lớp CSS, hoặc chèn nội dung từ API.

Google có đọc DOM hay chỉ đọc HTML?

Googlebot đọc cả hai, nhưng ưu tiên DOM đã render. Từ năm 2019, Google tuyên bố render gần như mọi trang như Chrome 41, nhưng vẫn có giới hạn về bộ nhớ, thời gian (timeout ~5–10s) và khả năng thực thi JavaScript phức tạp. Nội dung chỉ tồn tại trong HTML gốc mà không xuất hiện trong DOM sẽ không được lập chỉ mục.

Có cần tối ưu DOM cho mobile riêng không?

Không cần tối ưu riêng — Google dùng cùng một quy trình render cho desktop và mobile (mobile-first indexing). Tuy nhiên, DOM trên mobile thường nhẹ hơn do giao diện được thu gọn (ví dụ: menu ẩn, ảnh nhỏ hơn), nên tốc độ render nhanh hơn. Việc tối ưu DOM chung sẽ cải thiện cả hai nền tảng.