Làm cách nào để lấy nội dung trang trong JavaScript?

JavaScript là một phần quan trọng của nền tảng web vì nó cung cấp nhiều tính năng biến trang web thành một nền tảng ứng dụng mạnh mẽ. Làm cho các ứng dụng web dựa trên JavaScript của bạn có thể được khám phá qua Google Tìm kiếm có thể giúp bạn tìm người dùng mới và thu hút lại người dùng hiện tại khi họ tìm kiếm nội dung mà ứng dụng web của bạn cung cấp. Mặc dù Google Tìm kiếm chạy JavaScript với phiên bản thường xanh của Chromium, nhưng bạn có thể tối ưu hóa một số thứ

Hướng dẫn này mô tả cách Google Tìm kiếm xử lý JavaScript và các phương pháp hay nhất để cải thiện ứng dụng web JavaScript cho Google Tìm kiếm

Cách Google xử lý JavaScript

Google xử lý các ứng dụng web JavaScript theo ba giai đoạn chính

1. bò
2. kết xuất
3. lập chỉ mục

Googlebot xếp hàng các trang cho cả thu thập dữ liệu và hiển thị. Không rõ ràng ngay lập tức khi một trang đang chờ thu thập thông tin và khi nào trang đang chờ hiển thị

Khi Googlebot tìm nạp một URL từ hàng đợi thu thập dữ liệu bằng cách thực hiện một yêu cầu HTTP, trước tiên, Googlebot sẽ kiểm tra xem bạn có cho phép thu thập dữ liệu hay không. Googlebot đọc các robot. tập tin txt. Nếu nó đánh dấu URL là không được phép, thì Googlebot sẽ bỏ qua việc tạo yêu cầu HTTP tới URL này và bỏ qua URL

Googlebot sau đó phân tích cú pháp phản hồi cho các URL khác trong thuộc tính

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Thu thập thông tin URL và phân tích cú pháp phản hồi HTML hoạt động tốt cho các trang web cổ điển hoặc các trang được hiển thị phía máy chủ trong đó HTML trong phản hồi HTTP chứa tất cả nội dung. Một số trang web JavaScript có thể sử dụng mô hình vỏ ứng dụng trong đó HTML ban đầu không chứa nội dung thực tế và Google cần thực thi JavaScript trước khi có thể xem nội dung trang thực tế mà JavaScript tạo ra

Googlebot xếp hàng tất cả các trang để hiển thị, trừ khi tiêu đề hoặc thẻ meta rô bốt yêu cầu Google không lập chỉ mục trang. Trang có thể nằm trong hàng đợi này trong vài giây, nhưng có thể lâu hơn thế. Khi tài nguyên của Google cho phép, Chromium không đầu sẽ hiển thị trang và thực thi JavaScript. Googlebot lại phân tích cú pháp HTML được hiển thị cho các liên kết và xếp hàng các URL mà nó tìm thấy để thu thập thông tin. Google cũng sử dụng HTML được hiển thị để lập chỉ mục trang

Hãy nhớ rằng phía máy chủ hoặc kết xuất trước vẫn là một ý tưởng tuyệt vời vì nó làm cho trang web của bạn nhanh hơn cho người dùng và trình thu thập dữ liệu và không phải tất cả các bot đều có thể chạy JavaScript

Mô tả trang của bạn với các tiêu đề và đoạn trích độc đáo

Các yếu tố

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Bạn có thể sử dụng JavaScript để đặt hoặc thay đổi mô tả meta cũng như phần tử

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Google Tìm kiếm có thể hiển thị một liên kết tiêu đề khác dựa trên truy vấn của người dùng. Điều này xảy ra khi tiêu đề hoặc mô tả có mức độ liên quan thấp đối với nội dung trang hoặc khi chúng tôi tìm thấy các lựa chọn thay thế trong trang phù hợp hơn với truy vấn tìm kiếm. Tìm hiểu thêm về lý do tại sao tiêu đề kết quả tìm kiếm có thể khác với phần tử

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Viết mã tương thích

Trình duyệt cung cấp nhiều API và JavaScript là ngôn ngữ phát triển nhanh chóng. Google có một số hạn chế liên quan đến các tính năng API và JavaScript mà Google hỗ trợ. Để đảm bảo mã của bạn tương thích với Google, hãy làm theo nguyên tắc của chúng tôi để khắc phục sự cố JavaScript

Chúng tôi khuyên bạn nên sử dụng phân phát khác biệt và polyfill nếu bạn phát hiện tính năng API trình duyệt bị thiếu mà bạn cần. Vì một số tính năng của trình duyệt không thể được điền đầy, chúng tôi khuyên bạn nên kiểm tra tài liệu điền đầy để biết các hạn chế tiềm ẩn

Sử dụng mã trạng thái HTTP có ý nghĩa

Googlebot sử dụng mã trạng thái HTTP để tìm hiểu xem có xảy ra lỗi khi thu thập dữ liệu trang không

Để thông báo cho Googlebot nếu một trang không thể được thu thập dữ liệu hoặc lập chỉ mục, hãy sử dụng mã trạng thái có ý nghĩa, chẳng hạn như

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Dưới đây là danh sách các mã trạng thái HTTP và cách chúng ảnh hưởng đến Google Tìm kiếm

Tránh lỗi fetch(`/api/products/${productId}`) .then(response => response.json()) .then(product => { if(product.exists) { showProductDetails(product); // shows the product information on the page } else { // this product does not exist, so this is an error page. // Note: This example assumes there is no other meta robots tag present in the HTML. const metaRobots = document.createElement('meta'); metaRobots.name = 'robots'; metaRobots.content = 'noindex'; document.head.appendChild(metaRobots); } }) 7 trong các ứng dụng một trang

Trong các ứng dụng một trang được hiển thị phía máy khách, định tuyến thường được triển khai dưới dạng định tuyến phía máy khách. Trong trường hợp này, việc sử dụng mã trạng thái HTTP có ý nghĩa có thể là không thể hoặc không thực tế. Để tránh lỗi

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

• Sử dụng chuyển hướng JavaScript tới một URL mà máy chủ phản hồi bằng mã trạng thái HTTP

  fetch(`/api/products/${productId}`)
  .then(response => response.json())
  .then(product => {
    if(product.exists) {
      showProductDetails(product); // shows the product information on the page
    } else {
      // this product does not exist, so this is an error page.
      // Note: This example assumes there is no other meta robots tag present in the HTML.
      const metaRobots = document.createElement('meta');
      metaRobots.name = 'robots';
      metaRobots.content = 'noindex';
      document.head.appendChild(metaRobots);
    }
  })
  

  5 (ví dụ:

  fetch(`/api/products/${productId}`)
  .then(response => response.json())
  .then(product => {
    if(product.exists) {
      showProductDetails(product); // shows the product information on the page
    } else {
      // this product does not exist, so this is an error page.
      // Note: This example assumes there is no other meta robots tag present in the HTML.
      const metaRobots = document.createElement('meta');
      metaRobots.name = 'robots';
      metaRobots.content = 'noindex';
      document.head.appendChild(metaRobots);
    }
  })
  

  00)
• Thêm một

  fetch(`/api/products/${productId}`)
  .then(response => response.json())
  .then(product => {
    if(product.exists) {
      showProductDetails(product); // shows the product information on the page
    } else {
      // this product does not exist, so this is an error page.
      // Note: This example assumes there is no other meta robots tag present in the HTML.
      const metaRobots = document.createElement('meta');
      metaRobots.name = 'robots';
      metaRobots.content = 'noindex';
      document.head.appendChild(metaRobots);
    }
  })
  

  01 vào các trang lỗi bằng JavaScript

Đây là mã mẫu cho phương pháp chuyển hướng

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Đây là mã mẫu cho cách tiếp cận thẻ

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Sử dụng API lịch sử thay vì phân đoạn

Khi Googlebot tìm kiếm các liên kết trong các trang của bạn, nó chỉ xem xét các URL trong thuộc tính

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Đối với các ứng dụng một trang có định tuyến phía máy khách, hãy sử dụng API Lịch sử để triển khai định tuyến giữa các chế độ xem khác nhau của ứng dụng web của bạn. Để đảm bảo rằng Googlebot có thể tìm thấy các liên kết, hãy tránh sử dụng các đoạn để tải nội dung trang khác nhau. Ví dụ sau đây là một cách làm không tốt vì Googlebot sẽ không thu thập dữ liệu các liên kết

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Thay vào đó, bạn có thể đảm bảo Googlebot có thể truy cập URL liên kết bằng cách triển khai API Lịch sử

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Chèn đúng thẻ liên kết fetch(`/api/products/${productId}`) .then(response => response.json()) .then(product => { if(product.exists) { showProductDetails(product); // shows the product information on the page } else { // this product does not exist, so this is an error page. // Note: This example assumes there is no other meta robots tag present in the HTML. const metaRobots = document.createElement('meta'); metaRobots.name = 'robots'; metaRobots.content = 'noindex'; document.head.appendChild(metaRobots); } }) 04

Mặc dù chúng tôi không khuyên bạn nên sử dụng JavaScript cho việc này, nhưng có thể chèn thẻ liên kết

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Sử dụng thẻ meta robot một cách cẩn thận

Bạn có thể ngăn Google lập chỉ mục một trang hoặc theo các liên kết thông qua thẻ meta rô bốt. Ví dụ: thêm thẻ meta sau vào đầu trang của bạn sẽ chặn Google lập chỉ mục trang

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Bạn có thể sử dụng JavaScript để thêm thẻ meta rô-bốt vào trang hoặc thay đổi nội dung của trang. Mã ví dụ sau đây cho biết cách thay đổi thẻ meta rô-bốt bằng JavaScript để ngăn việc lập chỉ mục trang hiện tại nếu lệnh gọi API không trả về nội dung

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Khi Google gặp

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Sử dụng bộ nhớ đệm lâu dài

Googlebot tích cực lưu vào bộ đệm để giảm yêu cầu mạng và mức sử dụng tài nguyên. WRS có thể bỏ qua các tiêu đề bộ đệm. Điều này có thể khiến WRS sử dụng các tài nguyên JavaScript hoặc CSS đã lỗi thời. Dấu vân tay nội dung tránh được vấn đề này bằng cách tạo dấu vân tay cho phần nội dung của tên tệp, chẳng hạn như

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Sử dụng dữ liệu có cấu trúc

Khi sử dụng dữ liệu có cấu trúc trên các trang của mình, bạn có thể sử dụng JavaScript để tạo JSON-LD cần thiết và đưa nó vào trang. Đảm bảo kiểm tra quá trình triển khai của bạn để tránh sự cố

Thực hiện theo các phương pháp hay nhất cho các thành phần web

Google hỗ trợ các thành phần web. Khi Google hiển thị một trang, nó sẽ làm phẳng DOM bóng và nội dung DOM sáng. Điều này có nghĩa là Google chỉ có thể xem nội dung hiển thị trong HTML được hiển thị. Để đảm bảo rằng Google vẫn có thể nhìn thấy nội dung của bạn sau khi nội dung được hiển thị, hãy sử dụng Kiểm tra tính thân thiện với thiết bị di động hoặc Công cụ kiểm tra URL và xem HTML được hiển thị

Nếu nội dung không hiển thị trong HTML được hiển thị, Google sẽ không thể lập chỉ mục nội dung đó

Ví dụ sau tạo một thành phần web hiển thị nội dung DOM nhẹ bên trong DOM bóng của nó. Một cách để đảm bảo cả nội dung DOM sáng và DOM tối được hiển thị trong HTML được kết xuất là sử dụng phần tử Vị trí

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Sau khi kết xuất, Google có thể lập chỉ mục nội dung này

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

Sửa hình ảnh và nội dung lười tải

Hình ảnh có thể khá tốn kém về băng thông và hiệu suất. Một chiến lược tốt là sử dụng lazy-loading để chỉ tải hình ảnh khi người dùng sắp xem chúng. Để đảm bảo bạn đang triển khai tải từng phần theo cách thân thiện với tìm kiếm, hãy làm theo nguyên tắc tải từng phần của chúng tôi

Thiết kế cho khả năng tiếp cận

Tạo trang cho người dùng, không chỉ công cụ tìm kiếm. Khi bạn đang thiết kế trang web của mình, hãy nghĩ đến nhu cầu của người dùng, kể cả những người có thể không sử dụng trình duyệt hỗ trợ JavaScript (ví dụ: những người sử dụng trình đọc màn hình hoặc thiết bị di động kém tiên tiến hơn). Một trong những cách dễ nhất để kiểm tra khả năng truy cập trang web của bạn là xem trước trang web đó trong trình duyệt đã tắt JavaScript hoặc xem trang web đó trong trình duyệt chỉ có văn bản, chẳng hạn như Lynx. Việc xem một trang web ở dạng chỉ có văn bản cũng có thể giúp bạn xác định nội dung khác mà Google có thể khó xem, chẳng hạn như văn bản được nhúng trong hình ảnh

Làm cách nào để lấy nội dung của một trang bằng JavaScript?

Làm cách nào để lấy dữ liệu từ trang HTML bằng JavaScript?

Làm cách nào để in các giá trị trong JavaScript?

JavaScript có thể đọc nguồn của bất kỳ trang Web nào không?