Hướng dẫn google search bar javascript - thanh tìm kiếm google javascript

Hướng dẫn này giúp bạn xác định và khắc phục các sự cố JavaScript có thể chặn trang của bạn hoặc nội dung cụ thể trên các trang được hỗ trợ bởi JavaScript, từ hiển thị trong tìm kiếm của Google. Mặc dù Google chạy JavaScript, có một số khác biệt và hạn chế mà bạn cần tính đến khi thiết kế các trang và ứng dụng của mình để phù hợp với cách trình thu thập thông tin truy cập và hiển thị nội dung của bạn. Hướng dẫn của chúng tôi về JavaScript SEO Basics có thêm thông tin về cách bạn có thể tối ưu hóa trang web JavaScript của mình để tìm kiếm Google.

GoogleBot được thiết kế để trở thành một công dân tốt của web. Crawling là ưu tiên chính của nó, trong khi đảm bảo nó không làm suy giảm trải nghiệm của người dùng truy cập trang web. GoogleBot và thành phần 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 đóng góp cho nội dung trang thiết yếu và không thể lấy tài nguyên đó. Ví dụ: các yêu cầu báo cáo và lỗi không đóng góp vào nội dung trang thiết yếu và các loại yêu cầu tương tự khác không được sử dụng hoặc không cần thiết để trích xuất nội dung trang cần thiết. Phân tích phía máy khách có thể không cung cấp biểu diễn đầy đủ hoặc chính xác của hoạt động GoogleBot và WRS trên trang web của bạn. Sử dụng Search Console để giám sát 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ác vấn đề JavaScript có thể chặn trang của bạn hoặc nội dung cụ thể trên các trang được cung cấp bởi JavaScript, từ việc hiển thị trong tìm kiếm của Google, hãy làm theo các bước này. Nếu bạn không chắc JavaScript có phải là nguyên nhân chính hay không, hãy làm theo hướng dẫn gỡ lỗi chung của chúng tôi để xác định vấn đề cụ thể.

1. Để kiểm tra cách Google thu thập thông tin và hiển thị URL, hãy sử dụng thử nghiệm thân thiện với thiết bị di động hoặc công cụ kiểm tra URL trong bảng điều khiển tìm kiếm. Bạn có thể thấy các tài nguyên được tải, đầu ra bảng điều khiển JavaScript và ngoại lệ, kết xuất DOM và nhiều thông tin hơn., use the Mobile-Friendly Test or the URL Inspection Tool in Search Console. You can see loaded resources, JavaScript console output and exceptions, rendered DOM, and more information.

   Tùy chọn, chúng tôi cũng khuyên bạn nên thu thập và kiểm toán các lỗi JavaScript mà người dùng gặp phải, bao gồm GoogleBot, trên trang web của bạn để xác định các vấn đề tiềm ẩn có thể ảnh hưởng đến cách hiển thị nội dung.

   Dưới đây là một ví dụ cho thấy cách đăng nhập các lỗi JavaScript được đăng nhập vào trình xử lý Onerror toàn cầu. Lưu ý rằng một số loại lỗi JavaScript, chẳng hạn như lỗi phân tích cú pháp, không thể được ghi lại bằng phương pháp này.

   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);
   
   });

2. Hãy chắc chắn để ngăn chặn các lỗi soft 404. Trong một ứng dụng một trang (SPA), điều này có thể đặc biệt khó khăn. Để ngăn các trang lỗi được lập chỉ mục, bạn có thể sử dụng một hoặc cả hai chiến lược sau: In a single-page application (SPA), this can be especially difficult. To prevent error pages from being indexed, you can use one or both of the following strategies:
   • Chuyển hướng đến URL nơi 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 robot 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 SPA đang sử dụng JavaScript phía máy khách để xử lý các lỗi, họ thường báo cáo mã trạng thái 200 HTTP thay vì mã trạng thái thích hợp. Điều này có thể dẫn đến các trang lỗi được lập chỉ mục và có thể được hiển thị trong kết quả tìm kiếm.

3. Mong đợi GoogleBot từ chối các yêu cầu quyền của người dùng. Các tính năng yêu cầu quyền của người dùng không có ý nghĩa đối với GoogleBot hoặc cho tất cả người dùng. Ví dụ: nếu bạn yêu cầu Camera API, GoogleBot không thể cung cấp máy ảnh cho bạn. Thay vào đó, hãy cung cấp một cách để người dùng truy cập nội dung của bạn mà không bị buộc phải cho phép truy cập camera.
   Features that require user permission don't make sense for Googlebot, or for all users. For example, if you make the Camera API required, Googlebot can't provide a camera to you. Instead, provide a way for users to access your content without being forced to allow camera access.
4. Không sử dụng URL phân đoạn để tải nội dung khác nhau. Một spa có thể sử dụng URL phân đoạn (ví dụ: https://example.com/#/products) để tải các chế độ xem khác nhau. Sơ đồ Ajax-Trình điều khiển AJAX đã bị phản đối từ năm 2015, vì vậy bạn không thể dựa vào các URL phân mảnh để làm việc với GoogleBot. Chúng tôi khuyên bạn nên sử dụng History API để tải nội dung khác nhau dựa trên URL trong spa.
   A SPA may use fragment URLs (for example https://example.com/#/products) for loading different views. The AJAX-crawling scheme has been deprecated since 2015, so you can't rely on fragment URLs to work with Googlebot. We recommend using the History API to load different content based on the URL in an SPA.
5. Đừng dựa vào sự tồn tại của dữ liệu để phục vụ nội dung. Các tải trọng tải từng URL (tham khảo cách Google tìm kiếm hoạt động tổng quan về cách Google phát hiện ra nội dung), theo chuyển hướng 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 trên tải trang:
   WRS loads each URL (refer to How Google Search Works for an overview of how Google discovers content), following server and client redirects, same as a regular browser. However, WRS does not retain state across page loads:
   • Lưu trữ cục bộ và dữ liệu lưu trữ phiên được xóa trên tải trang.
   • Cookie HTTP được xóa trên tải trang.
6. Sử dụng dấu vân tay nội dung để tránh các vấn đề về bộ đệm với GoogleBot. GoogleBot Caches một cách tích cực để giảm yêu cầu mạng và sử dụng tài nguyên. WRS có thể bỏ qua các tiêu đề bộ nhớ đệm. Điều này có thể dẫn WRS sử dụng tài nguyên JavaScript hoặc CSS lỗi thời. Dấu vân tay nội dung Tránh vấn đề này bằng cách tạo dấu vân tay của phần nội dung của tên tệp, như

   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);
   
   });

   0. Dấu vân tay phụ thuộc vào nội dung của tệp, do đó, các bản cập nhật tạo ra một tên tệp khác nhau mỗi lần. Kiểm tra hướng dẫn Web.Dev về các chiến lược bộ đệm tồn tại lâu dài để tìm hiểu thêm.
   Googlebot caches aggressively in order to reduce network requests and resource usage. WRS may ignore caching headers. This may lead WRS to use outdated JavaScript or CSS resources. Content fingerprinting avoids this problem by making a fingerprint of the content part of the filename, like

   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);
   
   });

   0. The fingerprint depends on the content of the file, so updates generate a different filename every time. Check out the web.dev guide on long-lived caching strategies to learn more.
7. Đảm bảo rằng ứng dụng của bạn sử dụng phát hiện tính năng cho tất cả các API quan trọng mà nó cần và cung cấp hành vi dự phòng hoặc polyfill nếu có áp dụng. Một số tính năng web có thể chưa được tất cả các tác nhân người dùng áp dụng và một số có thể cố tình vô hiệu hóa một số tính năng nhất định. Ví dụ: nếu bạn sử dụng WebGL để hiển thị các hiệu ứng ảnh trong trình duyệt, phát hiện tính năng 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 quyết định sử dụng kết xuất phía máy chủ để tạo hiệu ứng ảnh, giúp mọi người có thể truy cập nội dung của bạn, bao gồm cả GoogleBot.
   Some web features may not yet be adopted by all user agents and some may intentionally disable certain features. For example, if you use WebGL to render photo effects in the browser, feature detection shows that Googlebot doesn't support WebGL. To fix this, you could skip the photo effect or decide to use server-side rendering to prerender the photo effects, which makes your content accessible to everyone, including Googlebot.
8. Đảm bảo nội dung của bạn hoạt động với HTTP Connections.googlebot sử dụng các yêu cầu HTTP để truy xuất nội dung từ máy chủ của bạn. Nó không hỗ trợ các loại kết nối khác, chẳng hạn như các kết nối

   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);
   
   });

   1 hoặc

   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);
   
   });

   2. Để tránh các vấn đề với các kết nối như vậy, hãy đảm bảo cung cấp dự phòng HTTP để truy xuất nội dung và sử dụng xử lý lỗi và phát hiện tính năng mạnh mẽ.
   Googlebot uses HTTP requests to retrieve content from your server. It does not support other types of connections, such as

   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);
   
   });

   1 or

   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);
   
   });

   2 connections. To avoid problems with such connections, make sure to provide an HTTP fallback to retrieve content and use robust error handling and feature detection.
9. Hãy chắc chắn rằng các thành phần web của bạn hiển thị như mong đợi. Sử dụng thử nghiệm thân thiện với thiết bị di động hoặc công cụ kiểm tra URL để kiểm tra xem HTML được hiển thị có tất cả nội dung bạn mong đợi không. WRS làm phẳng ánh sáng Dom và Shadow Dom. Nếu các thành phần web bạn sử dụng không sử dụng cơ chế

   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);
   
   });

   3 cho nội dung DOM ánh 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 một thành phần web khác thay thế. Để biết thêm thông tin, hãy xem các thực tiễn tốt nhất cho các thành phần web. Use the Mobile-Friendly Test or the URL Inspection Tool to check if the rendered HTML has all content you expect.
   WRS flattens the light DOM and shadow DOM. If the web components you use aren't using

   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);
   
   });

   3 mechanism for light DOM content, consult the documentation of the web component for further information or use another web component instead. For more information, see best practices for web components.
10. Sau khi bạn sửa các mục trong danh sách kiểm tra này, hãy kiểm tra trang của bạn bằng kiểm tra thân thiện với thiết bị di động hoặc công cụ kiểm tra URL trong bảng điều khiển tìm kiếm một lần nữa. with the Mobile-Friendly Test or the URL inspection tool in Search Console again.

    Nếu bạn đã khắc phục sự cố, một dấu kiểm màu xanh lá cây sẽ xuất hiện và không hiển thị lỗi. Nếu bạn vẫn thấy lỗi, hãy đăng trong các trang web JavaScript trong nhóm làm việc tìm kiếm.