Làm cho JavaScript và Google Tìm kiếm hoạt động cùng nhau

Nhận thông tin cập nhật và thông tin chi tiết mới nhất tại Google I/O 2019.

Những điều tuyệt vời đang diễn ra với Google Tìm kiếm. Chúng tôi rất vui được chia sẻ những điều đó tại Google I/O 2019!

Trong bài đăng này, chúng tôi sẽ tập trung vào các phương pháp hay nhất để giúp ứng dụng web JavaScript có thể phát hiện được trong Google Tìm kiếm, bao gồm:

  • Googlebot mới thường xuyên cập nhật
  • Quy trình thu thập dữ liệu, kết xuất và lập chỉ mục của Googlebot
  • Phát hiện tính năng và xử lý lỗi
  • Chiến lược hiển thị
  • Các công cụ thử nghiệm cho trang web của bạn trên Google Tìm kiếm
  • Thách thức chung và giải pháp khả thi
  • Các phương pháp hay nhất về SEO trong ứng dụng web JavaScript

Làm quen với Googlebot luôn cập nhật

Năm nay, chúng tôi đã công bố Googlebot mới luôn được chờ đợi.

Googlebot giữ biểu trưng Chrome
Googlebot hiện đang chạy một công cụ hiển thị Chromium hiện đại.

Googlebot hiện sử dụng một công cụ Chromium hiện đại để kết xuất trang web cho Google Tìm kiếm. Ngoài ra, chúng tôi sẽ thử nghiệm các phiên bản Chromium mới hơn để cập nhật Googlebot, thường trong vòng vài tuần sau mỗi bản phát hành Chrome ổn định. Đây là một tin vui đối với các nhà phát triển web và chuyên viên SEO vì nó đánh dấu sự ra mắt của hơn 1.000 tính năng mới (chẳng hạn như ES6+, IntersectionObserver và Thành phần web v1) trong Googlebot.

Tìm hiểu cách hoạt động của Googlebot

Googlebot là một quy trình gồm nhiều thành phần. Hãy cùng tìm hiểu cách Googlebot lập chỉ mục các trang cho Google Tìm kiếm.

Sơ đồ cho thấy URL đang di chuyển từ hàng đợi thu thập dữ liệu sang bước xử lý để trích xuất các URL được liên kết và thêm các URL đó vào hàng đợi thu thập dữ liệu. Hàng đợi kết xuất này sẽ đưa dữ liệu vào trình kết xuất tạo ra HTML. Bộ xử lý sử dụng HTML này để trích xuất lại các URL được liên kết rồi lập chỉ mục nội dung.
Quy trình của Googlebot để thu thập dữ liệu, hiển thị và lập chỉ mục một trang.

Quy trình này diễn ra như sau:

  1. Googlebot đưa các URL vào hàng đợi thu thập dữ liệu.
  2. Sau đó, Google tìm nạp các URL này bằng yêu cầu HTTP dựa trên hạn mức thu thập dữ liệu.
  3. Googlebot quét HTML để tìm các đường liên kết và đưa các đường liên kết đã phát hiện vào hàng đợi thu thập dữ liệu.
  4. Sau đó, Googlebot sẽ đưa trang này vào hàng đợi kết xuất.
  5. Càng sớm càng tốt, một phiên bản Chromium không có giao diện người dùng sẽ hiển thị trang, bao gồm cả quá trình thực thi JavaScript.
  6. Googlebot sử dụng HTML được kết xuất để lập chỉ mục trang.

Chế độ thiết lập kỹ thuật của bạn có thể ảnh hưởng đến quá trình thu thập dữ liệu, kết xuất và lập chỉ mục. Ví dụ: thời gian phản hồi chậm hoặc lỗi máy chủ có thể ảnh hưởng đến hạn mức thu thập dữ liệu. Một ví dụ khác là việc yêu cầu JavaScript để hiển thị các đường liên kết có thể khiến việc khám phá các đường liên kết này diễn ra chậm hơn.

Sử dụng chức năng phát hiện tính năng và xử lý lỗi

Googlebot luôn cập nhật có nhiều tính năng mới, nhưng một số tính năng vẫn không được hỗ trợ. Dựa vào các tính năng không được hỗ trợ hoặc không xử lý lỗi đúng cách có thể khiến Googlebot không thể kết xuất hoặc lập chỉ mục nội dung của bạn.

Hãy xem ví dụ:

 <body>
   <script>
     navigator.geolocation.getCurrentPosition(function onSuccess(position) {
       loadLocalContent(position);
     });
   </script>
 </body>

Trang này có thể không hiển thị bất kỳ nội dung nào trong một số trường hợp vì mã này không xử lý khi người dùng từ chối cấp quyền hoặc khi lệnh gọi getCurrentPosition trả về lỗi. Theo mặc định, Googlebot từ chối các yêu cầu cấp quyền như thế này.

Đây là giải pháp tốt hơn:

 <body>
   <script>
     if (navigator.geolocation) {
       // this browser supports the Geolocation API, request location!
       navigator.geolocation.getCurrentPosition(
         function onSuccess(position) {
           // we successfully got the location, show local content
           loadLocalContent(position);
         }, function onError() {
           // we failed to get the location, show fallback content
           loadGlobalContent();
         });
     } else {
       // this browser does not support the Geolocation API, show fallback content
       loadGlobalContent();
     }
   </script>
 </body>

Nếu bạn gặp vấn đề khiến trang web JavaScript của mình được lập chỉ mục, hãy xem hướng dẫn khắc phục sự cố của chúng tôi để tìm giải pháp.

Chọn chiến lược kết xuất phù hợp cho ứng dụng web của bạn

Chiến lược kết xuất mặc định cho các ứng dụng trang đơn hiện nay là kết xuất phía máy khách. HTML tải JavaScript, sau đó tạo nội dung trong trình duyệt khi thực thi.

Hãy xem xét một ứng dụng web hiển thị một bộ sưu tập hình ảnh mèo và sử dụng JavaScript để hiển thị hoàn toàn trong trình duyệt.

Hộp mã hiển thị HTML tải một số tập lệnh. Ảnh chụp màn hình của một trang web trên thiết bị di động cho thấy hình ảnh phần giữ chỗ trong khi tải nội dung thực tế.
Chiến lược hiển thị ảnh hưởng đến hiệu suất và độ mạnh của các ứng dụng web của bạn.

Nếu bạn được phép chọn chiến lược hiển thị, hãy cân nhắc phương thức hiển thị phía máy chủ hoặc kết xuất trước. Các trình thu thập dữ liệu thực thi JavaScript trên máy chủ để tạo nội dung HTML ban đầu. Điều này có thể giúp cải thiện hiệu suất cho cả người dùng và trình thu thập dữ liệu. Các chiến lược này cho phép trình duyệt bắt đầu hiển thị HTML khi đến qua mạng, giúp trang tải nhanh hơn. Phiên kết xuất tại I/O hoặc bài đăng trên blog về hiển thị trên web cho thấy cách tính năng hiển thị và hydrat hoá phía máy chủ có thể cải thiện hiệu suất và trải nghiệm người dùng của các ứng dụng web, đồng thời cung cấp thêm ví dụ về mã cho những chiến lược này.

Nếu bạn đang tìm giải pháp giúp các trình thu thập thông tin không thực thi JavaScript (hoặc nếu bạn không thể thay đổi cơ sở mã của giao diện người dùng), hãy cân nhắc sử dụng tính năng kết xuất động. Bạn có thể dùng thử tính năng này trong lớp học lập trình này. Tuy nhiên, xin lưu ý rằng bạn sẽ không nhận được trải nghiệm người dùng hoặc các lợi ích về hiệu suất như khi kết xuất trước hoặc kết xuất phía máy chủ, bởi vì tính năng kết xuất động chỉ phân phát HTML tĩnh cho trình thu thập dữ liệu. Điều này khiến chiến lược này trở thành một chiến lược dài hạn chứ không phải là một chiến lược dài hạn.

Thử nghiệm các trang của bạn

Mặc dù hầu hết các trang thường hoạt động tốt với Googlebot, nhưng bạn nên kiểm tra trang của mình thường xuyên để đảm bảo rằng Googlebot có thể truy cập vào nội dung của bạn và không có vấn đề gì. Có một số công cụ hữu ích có thể giúp bạn làm điều đó.

Cách dễ nhất để kiểm tra nhanh một trang là Kiểm tra tính thân thiện với thiết bị di động. Ngoài việc cho bạn thấy các vấn đề về tính thân thiện với thiết bị di động, công cụ này còn cung cấp cho bạn ảnh chụp màn hình về nội dung trong màn hình đầu tiên và HTML được hiển thị như Googlebot.

Quy trình kiểm tra tính thân thiện với thiết bị di động cho thấy HTML được hiển thị mà Googlebot nhìn thấy sau khi kết xuất trang
Quy trình kiểm tra tính thân thiện với thiết bị di động cho bạn thấy HTML mà Googlebot sử dụng.

Bạn cũng có thể tìm hiểu xem có vấn đề nào khi tải tài nguyên hoặc lỗi JavaScript hay không.

Kiểm tra tính thân thiện với thiết bị di động hiển thị lỗi JavaScript và dấu vết ngăn xếp.

Bạn nên xác minh miền của mình trong Google Search Console để có thể sử dụng Công cụ kiểm tra URL nhằm tìm hiểu thêm về trạng thái thu thập dữ liệu và lập chỉ mục URL, nhận thông báo khi Search Console phát hiện vấn đề và tìm hiểu thêm thông tin chi tiết về hiệu suất của trang web của bạn trên Google Tìm kiếm.

Công cụ kiểm tra URL cho thấy một trang đã được lập chỉ mục kèm theo thông tin về hoạt động khám phá, thu thập dữ liệu và lập chỉ mục cho một URL
Công cụ kiểm tra URL trong Search Console cho biết trạng thái của một trang trong quá trình thu thập dữ liệu, hiển thị và lập chỉ mục.

Để biết các mẹo và hướng dẫn chung về SEO, bạn có thể sử dụng các quy trình kiểm tra SEO trong Lighthouse. Để tích hợp công cụ kiểm tra SEO vào bộ thử nghiệm của bạn, hãy sử dụng Lighthouse CLI hoặc bot Lighthouse CI.

Một báo cáo SEO về ngọn hải đăng có điểm số 44 và các cảnh báo về tính thân thiện với thiết bị di động cũng như các cảnh báo về các phương pháp hay nhất về nội dung
Lighthouse đưa ra đề xuất chung về SEO cho một trang.

Các công cụ này giúp bạn xác định, gỡ lỗi và khắc phục vấn đề liên quan đến các trang trên Google Tìm kiếm. Những công cụ này cũng nên có trong quy trình phát triển của bạn.

Nắm bắt thông tin mới nhất và giữ liên lạc

Để nắm được thông tin mới nhất về các thông báo và thay đổi đối với Google Tìm kiếm, hãy theo dõi Blog dành cho quản trị viên trang web, kênh YouTube của Google dành cho quản trị viên trang webtài khoản Twitter của chúng tôi. Ngoài ra, hãy xem hướng dẫn cho nhà phát triển về Google Tìm kiếmloạt video về SEO cho JavaScript để tìm hiểu thêm về SEO và JavaScript.