Khắc phục vấn đề về JavaScript liên quan đến Tìm kiếm | Trung tâm Google Tìm kiếm | Tài liệu

Hướng dẫn này giúp bạn xác định và khắc phục các vấn đề liên quan đến JavaScript làm trang của bạn (hoặc nội dung trên các trang chạy trên JavaScript) không xuất hiện trong Google Tìm kiếm. Mặc dù Google Tìm kiếm có chạy JavaScript, nhưng vẫn có một số khác biệt và giới hạn mà bạn cần cân nhắc khi thiết kế trang và ứng dụng của mình để phù hợp với cách các trình thu thập dữ liệu truy cập và kết xuất nội dung của bạn. Hướng dẫn của chúng tôi về kiến thức cơ bản về SEO cho JavaScript có thêm thông tin về cách bạn có thể tối ưu hoá trang web JavaScript cho Google Tìm kiếm.

Googlebot được thiết kế để mang lại lợi ích cho môi trường web. Ưu tiên chính của Googlebot là thu thập dữ liệu trong khi vẫn đảm bảo không làm suy giảm trải nghiệm của người dùng khi truy cập vào trang web. Googlebot và Dịch vụ kết xuất web (WRS) liên tục phân tích và xác định các tài nguyên không góp phần tạo ra nội dung trang thiết yếu và có thể sẽ không tìm nạp những tài nguyên như vậy. Ví dụ: các yêu cầu báo cáo và yêu cầu lỗi không góp phần tạo ra nội dung thiết yếu trên trang và các loại yêu cầu tương tự khác thì không được sử dụng hoặc không cần thiết để trích xuất nội dung thiết yếu trên trang. Quy trình phân tích phía máy khách có thể không cung cấp thông tin đầy đủ hoặc chính xác về hoạt động của Googlebot và WRS trên trang web. Hãy sử dụng báo cáo Số liệu thống kê về hoạt động thu thập dữ liệu trong Google Search Console để theo dõi hoạt động và phản hồi của Googlebot và WRS trên trang web của bạn.

Nếu bạn nghi ngờ rằng có thể các vấn đề liên quan đến JavaScript làm trang của bạn (hoặc một số nội dung cụ thể trên các trang chạy bằng JavaScript) không thể xuất hiện trên Google Tìm kiếm, hãy làm theo các bước sau đây. Nếu bạn không chắc liệu JavaScript có phải là nguyên nhân chính hay không, hãy làm theo hướng dẫn chung của chúng tôi về cách gỡ lỗi để xác định vấn đề cụ thể.

Để 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 kết quả nhiều định dạng hoặc Công cụ kiểm tra URL trong Search Console. Bạn có thể xem các tài nguyên được tải, kết quả xử lý và ngoại lệ của bảng điều khiển JavaScript, DOM đã hiển thị cùng nhiều thông tin khác.

Bạn cũng nên tổng hợp và kiểm tra các lỗi JavaScript mà người dùng (kể cả Googlebot) gặp phải trên trang web của mình để xác định các vấn đề tiềm ẩn có thể ảnh hưởng đến cách kết xuất nội dung. Sau đây là một ví dụ cho thấy cách ghi nhật ký các lỗi JavaScript vào global onerror handler. Xin lưu ý rằng phương pháp này không ghi được một số loại lỗi JavaScript, chẳng hạn như lỗi phân tích cú pháp.

window.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');

    // Example: log errors as visual output into the host page.
    // 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;
    }

    // Example: log the error to remote service.
    // 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 một ứng dụng trang đơn (SPA), việc này có thể rất khó khăn. Để ngăn Google lập chỉ mục các trang lỗi, bạn có thể sử dụng một hoặc cả hai chiến lược sau:
- Chuyển hướng đến một URL mà máy chủ phản hồi bằng mã trạng thái 404.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     // redirect to page that gives a 404
     window.location.href = '/not-found';
   }
 });
```
- Thêm hoặc thay đổi thẻ meta robots thành noindex.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     const metaRobots = document.createElement('meta');
     metaRobots.name = 'robots';
     metaRobots.content = 'noindex';
     document.head.appendChild(metaRobots);
   }
 });
```
Khi một SPA dùng JavaScript phía máy khách để xử lý lỗi, ứng dụng này thường báo cáo mã trạng thái HTTP 200 thay vì mã trạng thái phù hợp. Việc này có thể khiến Google lập chỉ mục các trang lỗi và thậm chí hiển thị các trang đó trong kết quả tìm kiếm.
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 đòi hỏi người dùng cho phép là không hợp lý đối với Googlebot cũng như đối với tất cả người dùng. Ví dụ: trong trường hợp bạn yêu cầu Camera API, Googlebot sẽ không thể cung cấp camera cho bạn. Thay vào đó, hãy cung cấp cho người dùng một cách thức để truy cập vào nội dung của bạn mà không buộc phải cho phép sử dụng camera.
Đừng sử dụng phân mảnh của URL để tải nhiều nội dung riêng biệt.
Ứng dụng trang đơn (SPA) có thể sử dụng các phân mảnh của URL (ví dụ: https://example.com/#/products) để tải từng thành phần hiển thị. Chúng tôi đã ngừng sử dụng giao thức thu thập dữ liệu AJAX từ năm 2015, vì vậy bạn không nên sử dụng URL phân mảnh do chúng không phù hợp với Googlebot. Bạn nên sử dụng API Nhật ký để tải các nội dung khác nhau dựa trên URL trong một SPA.
Đừng dựa vào khả năng lưu trữ cố định dữ liệu để phân phát nội dung.
WRS tải từng URL (tham khảo Cách hoạt động của Google Tìm kiếm để nắm được thông tin tổng quan về cách Google khám phá nội dung) bằng cách đi 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 giữ lại trạng thái sau mỗi lần tải trang:
- Dữ liệu lưu tại Bộ nhớ cục bộ và Bộ nhớ phiên đều bị xóa sau mỗi lần tải trang.
- Tương tự như vậy, cookie HTTP cũng bị xóa sau mỗi lần tải trang.
Tạo và sử dụng vân tay số nội dung để Googlebot không gặp phải 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ố yêu cầu gửi đến các mạng cũng như giảm mức sử dụng tài nguyên. WRS có thể bỏ qua tiêu đề bộ nhớ đệm. Việc này có thể khiến WRS sử dụng các tài nguyên JavaScript hoặc CSS đã cũ. Vân tay số nội dung có thể giúp bạn tránh vấn đề này bằng cách tạo vân tay số cho phần nội dung trong tên tệp, ví dụ như main.2bb85551.js. Vân tay số này sẽ phụ thuộc vào nội dung của tệp, vì vậy tên tệp sẽ thay đổi mỗi lần bạn cập nhật. Để tìm hiểu thêm, hãy xem hướng dẫn trên web.dev về các chiến lược lưu vào bộ nhớ đệm trong thời gian dài.
Đả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ố tác nhân người dùng có thể chưa phát hiện được một số tính năng trên web. Ngoài ra, vài tác nhân người dùng còn có thể cố ý vô hiệu hoá một số tính năng nhất định. Ví dụ: nếu bạn sử dụng WebGL để kết xuất hiệu ứng ảnh trong trình duyệt, thì chức năng phát hiện tính năng sẽ cho thấy Googlebot không hỗ trợ WebGL. Để khắc phục điều này, bạn có thể bỏ qua hiệu ứng ảnh hoặc sử dụng tính năng kết xuất phía máy chủ để kết xuất trước các hiệu ứng ảnh. Phương thức này sẽ giúp mọi người (kể cả Googlebot) truy cập được nội dung của bạn.
Đảm bảo nội dung của bạn có thể 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. Googlebot không hỗ trợ các loại kết nối khác, chẳng hạn như kết nối WebSockets hoặc WebRTC. Để tránh gặp vấn đề với những kết nối như vậy, hãy nhớ cung cấp một kết nối HTTP dự phòng để truy xuất nội dung cũng như tận dụng khả năng xử lý lỗi và phát hiện tính năng hữu ích.
Đảm bảo rằng các thành phần web của bạn hiển thị 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ó đủ toàn bộ nội dung mà bạn muốn hay chưa.
WRS sẽ làm phẳng các DOM sáng và DOM tối. Nếu các thành phần web bạn sử dụng không dùng cơ chế <slot> cho nội dung trong DOM sáng, hãy tham khảo tài liệu của thành phần web để biết thêm thông tin hoặc sử dụng thành phần web khác. Để biết thêm thông tin, hãy xem các phương pháp hay nhất đối với các thành phần web.
Sau khi bạn 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 đã khắc phục vấn đề, dấu kiểm màu xanh lục sẽ xuất hiện và không có lỗi hiển thị. Nếu bạn vẫn thấy lỗi, hãy đăng bài trong Cộng đồng trợ giúp của Trung tâm Tìm kiếm.