JavaScript SEO: Cách tối ưu JS cho công cụ tìm kiếm

JavaScript SEO là gì?

JavaScript SEO là một phần của technical SEO, tập trung giúp các website được xây dựng bằng JavaScript dễ được công cụ tìm kiếm Crawling, Rendering và Indexing hơn.

Các công việc phổ biến bao gồm:

Tối ưu nội dung được chèn qua JavaScript

Triển khai lazy loading đúng cách

Tuân thủ các phương pháp hay nhất về internal linking

Ngăn ngừa, phát hiện và khắc phục các vấn đề về JavaScript

Và những việc khác.

Lưu ý: Nếu bạn cần ôn lại kiến thức cơ bản về JS, hãy đọc hướng dẫn của chúng tôi: JavaScript là gì và bạn dùng nó để làm gì?

Google Crawling và Indexing JavaScript như thế nào?

Google xử lý JS qua ba giai đoạn:

Crawling
Rendering
Indexing

Nguồn hình ảnh: Google

Trình thu thập dữ liệu web của Google (gọi là Googlebot) xếp hàng các trang để Crawling và Rendering.

Googlebot Crawling mọi URL trong hàng đợi.

Googlebot gửi yêu cầu. Sau đó, máy chủ gửi tài liệu HTML.

Tiếp theo, Googlebot quyết định cần những tài nguyên nào để Rendering nội dung trang.

Điều này có nghĩa là Googlebot Crawling HTML, chứ không phải các tệp JS hoặc CSS, vì Rendering JavaScript đòi hỏi rất nhiều tài nguyên.

Hãy hình dung lượng sức mạnh tính toán mà Googlebot cần để tải xuống, đọc và chạy JS cho hàng nghìn tỷ trang trên gần 2 tỷ website.

Vì vậy, Google trì hoãn việc Rendering JavaScript. Google đưa mọi nội dung chưa được thực thi vào hàng đợi để xử lý sau, khi có đủ tài nguyên.

Khi có đủ tài nguyên, Chromium chạy ở chế độ headless (trình duyệt Chrome không có giao diện người dùng) sẽ Rendering trang và thực thi JavaScript.

Googlebot tiếp tục xử lý HTML đã được Rendering để tìm liên kết, rồi đưa các URL tìm thấy vào hàng đợi Crawling.

Ở bước cuối cùng, Google dùng HTML đã được Rendering để Indexing trang.

Server-Side Rendering, Client-Side Rendering và Dynamic Rendering

Các vấn đề về Indexing JavaScript của Google phần lớn phụ thuộc vào cách website Rendering mã này: ở phía máy chủ, phía client hay bằng Dynamic Rendering.

Server-Side Rendering

Server-side rendering (SSR) là phương thức JavaScript được Rendering trên máy chủ. Sau đó, trang HTML đã được Rendering sẽ được gửi đến client (trình duyệt, Googlebot, v.v.).

Ví dụ, khi bạn truy cập một website, trình duyệt sẽ gửi yêu cầu đến máy chủ lưu trữ nội dung của website đó.

Sau khi xử lý yêu cầu, trình duyệt trả về HTML đã được Rendering và hiển thị trên màn hình.

SSR thường giúp cải thiện hiệu suất SEO của trang vì:

Phương pháp này có thể rút ngắn thời gian tải nội dung chính của trang
Cách này có thể giảm tình trạng xê dịch bố cục, vốn gây ảnh hưởng xấu đến trải nghiệm người dùng

Tuy nhiên, SSR có thể làm tăng thời gian chờ trước khi trang cho phép người dùng nhập liệu.

Đó là lý do một số website sử dụng nhiều JS chọn SSR cho một số trang nhưng không áp dụng cho những trang khác.

Với các mô hình kết hợp như vậy, SSR thường được dành cho những trang quan trọng đối với SEO. Còn client-side rendering (CSR) thường được dùng cho các trang cần nhiều tương tác và thao tác nhập liệu từ người dùng.

Tuy nhiên, việc triển khai SSR thường phức tạp và là một thách thức đối với nhà phát triển.

Dù vậy, vẫn có những công cụ hỗ trợ triển khai SSR:

Gatsby và Next.JS dành cho framework React
Angular Universal dành cho framework Angular
Nuxt.js dành cho framework Vue.js

Đọc hướng dẫn này để tìm hiểu thêm về cách thiết lập server-side rendering.

Client-Side Rendering

CSR trái ngược với SSR. Trong trường hợp này, JavaScript được render ở phía client (trình duyệt hoặc Googlebot) bằng Document Object Model (DOM).

Thay vì nhận nội dung từ tài liệu HTML như với server-side rendering, bạn sẽ nhận được HTML tối giản cùng một tệp JavaScript dùng trình duyệt để render phần còn lại của website.

Hầu hết website sử dụng CSR đều có giao diện người dùng phức tạp hoặc nhiều tính năng tương tác.

Tham khảo hướng dẫn này để tìm hiểu thêm về cách thiết lập client-side rendering.

Dynamic Rendering

Dynamic Rendering là một giải pháp thay thế cho server-side rendering.

Phương pháp này phát hiện các bot có thể gặp vấn đề với nội dung được tạo bằng JS, rồi cung cấp phiên bản được render trên server không có JavaScript.

Trong khi đó, người dùng vẫn được xem phiên bản được render ở phía client.

Dynamic rendering là giải pháp tình thế, không phải phương án Google khuyến nghị. Cách này tạo thêm những phức tạp và tài nguyên không cần thiết cho Google.

Bạn có thể cân nhắc dùng dynamic rendering nếu website có quy mô lớn, nội dung thay đổi nhanh và cần được Indexing nhanh chóng.

Hoặc nếu website của bạn phụ thuộc vào mạng xã hội và ứng dụng chat cần truy cập nội dung trang.

Hoặc nếu các crawler quan trọng đối với website của bạn không hỗ trợ được một số tính năng JS.

Tuy nhiên, dynamic rendering hiếm khi là giải pháp lâu dài. Bạn có thể tìm hiểu thêm về cách thiết lập dynamic rendering và một số phương pháp thay thế trong hướng dẫn của Google.

Lưu ý: Google thường không xem dynamic rendering là “cloaking” (hành vi hiển thị nội dung khác nhau cho công cụ tìm kiếm và người dùng). Dù dynamic rendering không phải lựa chọn lý tưởng vì những lý do khác, phương pháp này khó có khả năng vi phạm quy định về cloaking được nêu trong chính sách chống spam của Google.

Cách tối ưu nội dung JavaScript trên website cho SEO

Bạn có thể thực hiện một số bước để đảm bảo search engine Crawling, Rendering và Indexing nội dung JS của bạn đúng cách.

Dùng Google Search Console để tìm lỗi

Googlebot dựa trên phiên bản Chrome mới nhất. Tuy nhiên, cách hoạt động của Googlebot không giống trình duyệt.

Điều đó có nghĩa là việc ra mắt website không đảm bảo Google có thể Rendering nội dung trên đó.

Trong Google Search Console (GSC), bạn có thể kiểm tra xem Google có thể Rendering các trang của mình hay không.

Nhập URL của trang bạn muốn kiểm tra vào ô ở trên cùng. Sau đó nhấn Enter.

Tiếp theo, nhấp vào nút “Test Live URL” ở ngoài cùng bên phải.

Sau một hoặc hai phút, công cụ sẽ hiển thị thẻ “Live Test”. Bây giờ, hãy nhấp vào “View Tested Page”, bạn sẽ thấy mã của trang cùng ảnh chụp màn hình.

Nhấp vào thẻ “More Info” để kiểm tra xem có điểm khác biệt hoặc nội dung nào bị thiếu không.

Một lý do phổ biến khiến Google không thể Rendering các trang JS là file robots.txt trên website chặn quá trình Rendering. Điều này thường xảy ra ngoài ý muốn.

Thêm đoạn mã sau vào file robot.txt để đảm bảo không chặn các tài nguyên quan trọng khỏi quá trình Crawling:

User-Agent: Googlebot
Allow: .js
Allow: .css

Lưu ý: Google không Indexing các file .js hoặc .css trong kết quả tìm kiếm. Chúng được dùng để Rendering trang web.

Không có lý do gì để chặn những tài nguyên quan trọng này. Làm vậy có thể khiến nội dung của bạn không được Rendering và do đó không được Indexing.

Đảm bảo Google Indexing nội dung JavaScript

Sau khi xác nhận các trang của bạn Rendering đúng cách, hãy đảm bảo chúng được Indexing.

Bạn có thể kiểm tra điều này trong GSC hoặc trực tiếp trên search engine.

Để kiểm tra trên Google, hãy dùng lệnh “site:”. Ví dụ: thay yourdomain.com bên dưới bằng URL của trang bạn muốn kiểm tra:

site:yourdomain.com/page-URL/

Nếu trang được Indexing, bạn sẽ thấy trang xuất hiện dưới dạng một kết quả. Như sau:

Nếu không, trang đó không nằm trong chỉ mục của Google.

Nếu trang được Indexing, hãy kiểm tra xem một phần nội dung được tạo bằng JavaScript có được Indexing hay không.

Một lần nữa, hãy dùng lệnh “site:” và thêm một đoạn nội dung JS trên trang.

Ví dụ:

site:yourdomain.com/page-URL/ "snippet of JS content"

Bạn đang kiểm tra xem phần nội dung JS cụ thể này đã được Indexing chưa. Nếu có, bạn sẽ thấy phần đó trong đoạn trích.

Như sau:

Bạn cũng có thể dùng GSC để xem nội dung JavaScript đã được Indexing hay chưa. Một lần nữa, hãy dùng URL Inspection Tool.

Lần này, thay vì kiểm tra URL trực tiếp, hãy nhấp vào nút “View Crawled Page”. Sau đó kiểm tra mã nguồn HTML của trang.

Quét mã HTML để tìm các đoạn nội dung JavaScript.

Nếu bạn không thấy nội dung JS của mình, có thể do một số nguyên nhân:

Nội dung không thể được Rendering

Không thể phát hiện URL vì JS tạo internal links trỏ đến URL đó khi người dùng nhấp chuột

Trang hết thời gian chờ khi Google đang Indexing nội dung

Chạy Site Audit

Thường xuyên kiểm tra website là một technical SEO thực hành tốt nhất.

Semrush Site Audit có thể Crawling JS giống như Google. Ngay cả khi nội dung được Rendering ở phía client.

Để bắt đầu, hãy nhập domain của bạn rồi nhấp vào “Create project.”

Sau đó, chọn “Enabled” cho tùy chọn Rendering JS trong phần cài đặt crawler.

Sau khi crawl xong, bạn sẽ tìm thấy mọi vấn đề trong tab “Issues”.

Các vấn đề JavaScript SEO thường gặp và cách khắc phục

Dưới đây là một số vấn đề thường gặp cùng những phương pháp hay nhất về JavaScript SEO:

Chặn các tệp .js trong tệp Robots.txt có thể ngăn Googlebot Crawling những tài nguyên này. Điều đó có nghĩa là Googlebot không thể Rendering và Indexing chúng. Hãy cho phép Crawling các tệp này để tránh vấn đề.

Google không chờ lâu để nội dung JavaScript được Rendering. Nội dung của bạn có thể không được Indexing do lỗi hết thời gian chờ.

Công cụ tìm kiếm không nhấp vào nút. Hãy dùng internal links để giúp Googlebot phát hiện các trang trên website của bạn.

Khi dùng JavaScript để tải trang theo kiểu lazy loading, đừng trì hoãn việc tải nội dung cần được Indexing. Khi thiết lập lazy loading, hãy ưu tiên hình ảnh hơn nội dung văn bản.

Google thường bỏ qua dấu thăng (#), vì vậy hãy đảm bảo tạo URL tĩnh cho các trang web của bạn. URL nên có dạng: (yourdomain.com/web-page), không phải (yourdomain.com/#/web-page) hoặc (yourdomain.com#web-page).

Tiến xa hơn

Nếu áp dụng những gì đã học về JavaScript SEO, bạn sẽ tiến gần hơn đến việc xây dựng các website hiệu quả, có thứ hạng cao và được người dùng yêu thích.

Bạn đã sẵn sàng tìm hiểu sâu hơn chưa?

Bạn nên đọc các bài sau để tìm hiểu thêm về JS và technical SEO: