JavaScript đóng vai trò quan trọng trong việc tạo ra các trang web hiện đại, nhưng nó cũng có thể là nguyên nhân khiến trang web của bạn gặp khó khăn trong việc hiển thị trên Google Tìm kiếm. Mặc dù Googlebot có khả năng xử lý JavaScript, nhưng vẫn có những giới hạn mà bạn cần phải cân nhắc. Bài viết này sẽ hướng dẫn bạn cách khắc phục các vấn đề liên quan đến JavaScript để đảm bảo trang web của bạn được Google Tìm kiếm hiển thị đúng cách.
Hướng dẫn này hỗ trợ bạn xác định và xử lý các vấn đề liên quan đến JavaScript có thể gây cản trở việc hiển thị trang web của bạn (hoặc nội dung trên các trang sử dụng JavaScript) trên Google Tìm kiếm. Mặc dù Googlebot có khả năng xử lý JavaScript, nhưng vẫn tồn tại những khác biệt và hạn chế mà bạn cần cân nhắc khi xây dựng trang web và ứng dụng, để tối ưu hóa quá trình thu thập dữ liệu và kết xuất nội dung. Hướng dẫn của chúng tôi về SEO cho JavaScript cung cấp thêm thông tin chi tiết về cách tối ưu hóa trang web JavaScript nhằm tăng cường khả năng xuất hiện trên Google Tìm kiếm.
Googlebot được thiết kế để tối ưu hóa cho môi trường web, với ưu tiên hàng đầu là thu thập dữ liệu mà không làm ảnh hưởng đến trải nghiệm người dùng. Googlebot và dịch vụ kết xuất web (WRS) liên tục phân tích và xác định những tài nguyên không cần thiết cho nội dung chính của trang, và có thể bỏ qua các tài nguyên đó trong quá trình thu thập. Ví dụ, các yêu cầu báo cáo và yêu cầu lỗi không ảnh hưởng đến nội dung chính trên trang sẽ không được Googlebot và WRS tìm nạp. Quá trình phân tích phía máy khách có thể không cung cấp đầy đủ hoặc chính xác thông tin về hoạt động của Googlebot và WRS trên trang web của bạn. Do đó, bạn nên sử dụng Search Console để theo dõi và đánh giá hoạt động của Googlebot và WRS trên trang web.
Nếu bạn nghi ngờ rằng vấn đề liên quan đến JavaScript đang cản trở việc hiển thị trang web của bạn (hoặc một số nội dung cụ thể trên các trang sử dụng JavaScript) trên Google Tìm kiếm, hãy thực hiện các bước sau. Nếu bạn không chắc chắn liệu JavaScript có phải là nguyên nhân chính hay không, hãy tham khảo hướng dẫn gỡ lỗi chung của chúng tôi để xác định chính xác vấn đề.
- Để kiểm tra cách thức Google thu thập dữ liệu và kết xuất URL, hãy sử dụng công cụ kiểm tra URL hoặc công cụ kiểm tra kết quả nhiều định dạng trong Search Console. Những công cụ này cho phép bạn xem các tài nguyên được tải, kết quả xử lý JavaScript, DOM đã hiển thị và các ngoại lệ khác. Điều này giúp bạn đánh giá chính xác cách Googlebot tương tác với trang web.
Cảnh báo: Tránh sử dụng đường dẫn lưu trong bộ nhớ đệm khi gỡ lỗi các trang, vì phiên bản này có thể không phản ánh nội dung hiện tại của trang web. Thay vào đó, hãy sử dụng công cụ kiểm tra URL để đảm bảo bạn đang làm việc với phiên bản mới nhất của trang.
Ngoài ra, việc thu thập và phân tích các lỗi JavaScript mà người dùng, bao gồm cả Googlebot, gặp phải trên trang web của bạn là cần thiết. Điều này giúp bạn xác định các vấn đề tiềm ẩn có thể ảnh hưởng đến quá trình render và hiển thị nội dung trên kết quả tìm kiếm.
Dưới đây là một ví dụ về cách ghi nhật ký các lỗi JavaScript bằng cách sử dụng globalonerrorhandler. Tuy nhiên, lưu ý rằng phương pháp này không ghi lại được một số loại lỗi JavaScript, chẳng hạn như lỗi phân tích cú pháp.
javascriptwindow.addEventListener('error', function(e) {
var errorText = [
e.message,
'URL: ' + e.filename,
'Line: ' + e.lineno + ', Column: ' + e.colno,
'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
].join('\n');
// Note: you probably don’t want to show such errors to users, or
// have the errors get indexed by Googlebot; however, it may
// be a useful feature while actively debugging the page.
var DOM_ID = ‘rendering-debug-pre’;
if (!document.getElementById(DOM_ID)) {
var log = document.createElement(‘pre’);
log.id = DOM_ID;
log.style.whiteSpace = ‘pre-wrap’;
log.textContent = errorText;
if (!document.body) document.body = document.createElement(‘body’);
document.body.insertBefore(log, document.body.firstChild);
} else {
document.getElementById(DOM_ID).textContent += ‘\n\n’ + errorText;
}
// Note: you can log errors to a remote service, to understand
// and monitor the types of errors encountered by regular users,
// Googlebot, and other crawlers.
var client = new XMLHttpRequest();
client.open(‘POST’, ‘https://example.com/logError’);
client.setRequestHeader(‘Content-Type’, ‘text/plain;charset=UTF-8’);
client.send(errorText);
}); - Nhớ tránh lỗi soft 404 trong quá trình tối ưu hóa SEO cho các ứng dụng trang đơn (SPA). Điều này đặc biệt quan trọng vì trong môi trường SPA, việc xử lý đúng các trang lỗi có thể gặp nhiều thách thức. Để ngăn chặn Google lập chỉ mục các trang lỗi, bạn có thể áp dụng một trong hai chiến lược dưới đây hoặc kết hợp cả hai:
- Chuyển hướng đến một URL với mã trạng thái 404: Điều này đảm bảo rằng khi một trang lỗi được phát hiện, người dùng và bot tìm kiếm sẽ được chuyển hướng đến một trang 404 hợp lệ.
javascript
fetch(`https://api.kitten.club/cats/${id}`)
.then(res => res.json())
.then((cat) => {
if (!cat.exists) {
// chuyển hướng đến trang trả về mã trạng thái 404
window.location.href = '/not-found';
}
});
- Thêm hoặc thay đổi thẻ meta robots thành
noindex:Điều này giúp ngăn các bot tìm kiếm lập chỉ mục các trang lỗi, đảm bảo rằng những trang này không xuất hiện trong kết quả tìm kiếm.javascript
fetch(`https://api.kitten.club/cats/${id}`)Trong các SPA, khi JavaScript phía máy khách xử lý lỗi, ứng dụng thường báo cáo mã trạng thái HTTP 200 thay vì mã trạng thái lỗi chính xác. Điều này có thể khiến Google vô tình lập chỉ mục các trang lỗi, gây ra trải nghiệm người dùng không tốt và ảnh hưởng tiêu cực đến hiệu suất SEO. Việc áp dụng đúng các chiến lược trên sẽ giúp bạn kiểm soát tốt hơn quá trình lập chỉ mục của Google, đảm bảo rằng chỉ những trang hợp lệ và có giá trị mới được xuất hiện trên kết quả tìm kiếm.
.then(res => res.json())
.then((cat) => {
if (!cat.exists) {
const metaRobots = document.createElement('meta');
metaRobots.name = 'robots';
metaRobots.content = 'noindex';
document.head.appendChild(metaRobots);
}
});
- Chuyển hướng đến một URL với mã trạng thái 404: Điều này đảm bảo rằng khi một trang lỗi được phát hiện, người dùng và bot tìm kiếm sẽ được chuyển hướng đến một trang 404 hợp lệ.
- Googlebot sẽ từ chối các yêu cầu cấp quyền từ người dùng.
Các tính năng yêu cầu người dùng cấp quyền là không phù hợp với Googlebot và tất cả người dùng. Ví dụ, khi bạn yêu cầu quyền truy cập vào Camera API, Googlebot không thể cung cấp webcam. Thay vào đó, bạn nên cung cấp phương thức truy cập nội dung mà không cần người dùng cấp quyền sử dụng webcam. - Đừng sử dụng URL phân mảnh để tải nhiều nội dung riêng biệt.
Single Page Applications (SPA) có thể sử dụng URL phân mảnh (ví dụ: https://example.com/#/products) để tải từng chế độ xem. Tuy nhiên, kể từ khi Google ngừng hỗ trợ giao thức thu thập dữ liệu AJAX vào năm 2015, URL phân mảnh không còn phù hợp với Googlebot. Bạn nên sử dụng History API để tải nội dung khác nhau dựa trên URL trong SPA. - Đừng dựa vào khả năng lưu trữ tạm thời để phân phát nội dung.
Web Rendering Service (WRS) tải từng URL bằng cách tuân theo các lệnh chuyển hướng phía máy chủ và máy khách, giống như trình duyệt thông thường. Tuy nhiên, WRS không lưu giữ trạng thái sau mỗi lần tải trang. Dữ liệu trong Bộ nhớ cục bộ và Bộ nhớ phiên sẽ bị xóa sau mỗi lần tải trang, tương tự với cookie HTTP. - Tạo và sử dụng vân tay số cho nội dung để Googlebot không gặp vấn đề khi lưu vào bộ nhớ đệm.
Googlebot thường xuyên lưu nội dung vào bộ nhớ đệm để giảm số lượng yêu cầu và tài nguyên mạng. Tuy nhiên, WRS có thể bỏ qua tiêu đề bộ nhớ đệm, dẫn đến việc sử dụng các tài nguyên JavaScript hoặc CSS đã lỗi thời. Việc sử dụng vân tay số nội dung có thể giúp tránh tình trạng này bằng cách tạo vân tay số trong tên tệp, chẳng hạn như main.2bb85551.js. Vân tay số này sẽ thay đổi khi nội dung tệp thay đổi, giúp Googlebot luôn sử dụng phiên bản mới nhất. Bạn có thể tìm hiểu thêm về các chiến lược lưu vào bộ nhớ đệm dài hạn trong hướng dẫn của web.dev. - Đảm bảo ứng dụng của bạn sử dụng chức năng phát hiện tính năng đối với mọi API quan trọng mà ứng dụng cần và cung cấp hành vi dự phòng hoặc polyfill khi thích hợp.
Một số trình duyệt có thể không hỗ trợ đầy đủ các tính năng web hiện đại, và đôi khi các tính năng này còn có thể bị vô hiệu hóa. Ví dụ, nếu bạn sử dụng WebGL để kết xuất hiệu ứng hình ảnh trong trình duyệt, tính năng phát hiện sẽ cho thấy Googlebot không hỗ trợ WebGL. Để khắc phục, bạn có thể bỏ qua hiệu ứng hoặc sử dụng kết xuất phía máy chủ để xử lý trước các hiệu ứng hình ảnh, giúp đảm bảo mọi người, kể cả Googlebot, đều có thể truy cập nội dung. - Đảm bảo nội dung của bạn hoạt động trên kết nối HTTP.
Googlebot sử dụng yêu cầu HTTP để truy xuất nội dung từ máy chủ của bạn. Các loại kết nối khác như WebSockets hoặc WebRTC không được Googlebot hỗ trợ. Để tránh vấn đề, bạn nên cung cấp một kết nối HTTP dự phòng để truy xuất nội dung và tận dụng khả năng phát hiện tính năng cũng như xử lý lỗi. - Đảm bảo rằng các thành phần web của bạn hiển thị đúng như mong đợi. Sử dụng Công cụ kiểm tra kết quả nhiều định dạng hoặc Công cụ kiểm tra URL để kiểm tra xem HTML được kết xuất có đầy đủ nội dung cần thiết hay không.
Web Rendering Service (WRS) sẽ làm phẳng cả DOM sáng và DOM tối. Nếu các thành phần web của bạn không sử dụng cơ chế<slot>để hiển thị nội dung trong DOM sáng, hãy tham khảo tài liệu của thành phần web hoặc xem xét việc sử dụng thành phần khác. Để biết thêm chi tiết, bạn nên tham khảo các phương pháp tốt nhất đối với thành phần web. - Sau khi khắc phục các mục trong danh sách kiểm tra này, hãy kiểm tra lại trang của bạn bằng Công cụ kiểm tra kết quả nhiều định dạng hoặc Công cụ kiểm tra URL trong Search Console.
Nếu bạn đã xử lý đúng vấn đề, dấu kiểm màu xanh lục sẽ xuất hiện và không có lỗi. Nếu vẫn gặp lỗi, bạn có thể đăng trong Nhóm Trang web JavaScript trên Tìm kiếm để được hỗ trợ thêm.
Việc khắc phục các vấn đề về JavaScript không chỉ giúp trang web của bạn hiển thị tốt hơn trên Google Tìm kiếm mà còn cải thiện trải nghiệm người dùng. Bằng cách tuân thủ các hướng dẫn trên, bạn có thể tối ưu hóa trang web của mình một cách hiệu quả, đảm bảo rằng nội dung của bạn luôn được Google hiển thị chính xác. Hãy thường xuyên kiểm tra và cập nhật trang web của bạn để duy trì hiệu suất tốt nhất.
