Hiểu kiến thức cơ bản về SEO JavaScript

JavaScript là một thành phần quan trọng của nền tảng web vì ngôn ngữ này 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ẽ. Khi giúp các ứng dụng web sử dụng JavaScript của mình có thể tìm kiếm được thông qua Google Tìm kiếm, bạn có thể tìm được người dùng mới và tương tác lại vớ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 thực thi JavaScript bằng một phiên bản Chromium tự động cập nhật, nhưng bạn vẫn có thể tối ưu hóa một số yếu tố.

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 các ứng dụng web dùng JavaScript cho Google Tìm kiếm.

Cách Googlebot xử lý JavaScript

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

  1. Thu thập dữ liệu
  2. Kết xuất
  3. Lập chỉ mục

Googlebot thu thập dữ liệu, kết xuất và lập chỉ mục một trang.

Googlebot lấy một URL từ hàng đợi thu thập dữ liệu, thu thập dữ liệu URL đó rồi chuyển sang giai đoạn xử lý.  Giai đoạn xử lý trích xuất các đường dẫn liên kết quay lại hàng đợi thu thập dữ liệu và đưa trang nói trên vào hàng đợi kết xuất.  Trang đi từ hàng đợi kết xuất đến trình kết xuất, chuyển HTML đã kết xuất trở lại giai đoạn xử lý và lập chỉ mục nội dung cũng như trích xuất các đường liên kết để đưa vào hàng đợi thu thập dữ liệu.

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

Sau đó, Googlebot phân tích cú pháp nội dung phản hồi cho các URL khác trong thuộc tính href của các đường dẫn liên kết HTML và thêm URL vào hàng đợi thu thập dữ liệu. Để ngăn chặn việc phát hiện đường liên kết, hãy sử dụng cơ chế nofollow.

Phương pháp thu thập dữ liệu URL và phân tích cú pháp nội dung phản hồi HTML sẽ hoạt động hiệu quả đối với các trang web kiểu cũ hoặc các trang kết xuất phía máy chủ, là các trang mà 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 giao diện ứng dụng, trong đó HTML ban đầu không chứa nội dung thực tế và Googlebot 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 đưa tất cả các trang vào hàng đợi kết xuất, trừ khi thẻ meta robots hoặc tiêu đề yêu cầu Googlebot không lập chỉ mục trang. Trang có thể ở trong hàng đợi này trong vài giây, nhưng cũng có thể lâu hơn. Khi tài nguyên của Googlebot cho phép, một phiên bản Chromium trong môi trường không có giao diện người dùng sẽ kết xuất trang và thực thi JavaScript. Googlebot phân tích cú pháp HTML đã kết xuất cho các đường dẫn liên kết một lần nữa và đưa các URL tìm thấy vào hàng đợi để thu thập dữ liệu. Googlebot cũng sử dụng HTML đã kết xuất để lập chỉ mục trang.

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

Mô tả trang của bạn bằng các tiêu đề và đoạn trích riêng biệt

Các tiêu đề riêng biệt, mô tả rõ ràng nội dung trang và nội dung mô tả meta hữu ích giúp người dùng nhanh chóng xác định kết quả phù hợp nhất với mục tiêu của họ. Chúng tôi có giải thích cách tạo ra các tiêu đề và nội dung mô tả chất lượng trong các nguyên tắc của chúng tôi.

Bạn có thể sử dụng JavaScript để đặt hoặc thay đổi nội dung mô tả meta cũng như tiêu đề.

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

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

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

Googlebot sử dụng mã trạng thái HTTP để phát hiện các vấn đề khi thu thập dữ liệu trang.

Bạn nên sử dụng mã trạng thái có ý nghĩa để chỉ dẫn Googlebot không nên thu thập dữ liệu hoặc lập chỉ mục một trang, như 404 cho một trang không thể tìm thấy hoặc mã 401 cho các trang yêu cầu đăng nhập. Bạn có thể sử dụng mã trạng thái HTTP để thông báo cho Googlebot khi một trang đã được chuyển sang URL mới, để Googlebot có thể cập nhật chỉ mục tương ứng.

Dưới đây là danh sách mã trạng thái HTTP và thời điểm sử dụng:

Trạng thái HTTP Trường hợp nên sử dụng
301 / 302 Trang đã chuyển sang URL mới.
401 / 403 Trang không hoạt động do vấn đề về quyền truy cập.
404 / 410 Trang không còn hoạt động.
5xx Đã xảy ra lỗi phía máy chủ.

Tránh các lỗi 404 mềm trong ứng dụng trang đơn (SPA)

Trong các ứng dụng trang đơn do máy khách hiển thị, việc đị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 khả thi hoặc không thực tế. Để tránh lỗi 404 mềm khi sử dụng chức năng kết xuất và định tuyến phía máy khách, hãy sử dụng một trong các chiến lược sau:

  • Sử dụng lệnh chuyển hướng JavaScript đến một URL mà máy chủ phản hồi bằng mã trạng thái HTTP 404 (ví dụ: /not-found).
  • Thêm <meta name="robots" content="noindex"> vào các trang lỗi bằng JavaScript.

Sau đây là mã mẫu cho phương pháp sử dụng lệnh 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.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

Sau đây là mã mẫu cho phương pháp sử dụng lệnh noindex:

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ì mảnh

Khi tìm kiếm các đường liên kết trong các trang của bạn, Googlebot chỉ xem xét các URL trong thuộc tính href của các đường liên kết HTML.

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

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

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

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

Sử dụng thẻ meta robots cẩn thận

Bạn có thể ngăn Googlebot lập chỉ mục một trang hoặc đi theo các đường dẫn liên kết thông qua thẻ meta robots. Ví dụ: việc thêm thẻ meta sau vào đầu trang sẽ chặn Googlebot lập chỉ mục trang:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

Bạn có thể sử dụng JavaScript để thêm thẻ meta robots vào một trang hoặc thay đổi nội dung của thẻ. Mã ví dụ sau đây cho thấy cách thay đổi thẻ meta robots bằng JavaScript để ngăn Google 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(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Khi thấy noindex trong thẻ meta robots trước khi thực thi JavaScript, Googlebot sẽ không kết xuất hoặc lập chỉ mục trang.

Sử dụng bộ nhớ đệm tồn tại trong thời gian dài

Googlebot lưu nội dung vào bộ nhớ đệm thường xuyên để giảm số yêu cầu gửi đến các mạng và 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ố của phần chỉ nội dung trong tên tệp như main.2bb85551.js. Vân tay 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. 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 để tìm hiểu thêm.

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 trang của mình, bạn có thể sử dụng JavaScript để tạo JSON-LD bắt buộc rồi chèn vào trang đó. Hãy nhớ kiểm tra kết quả triển khai để tránh các sự cố.

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

Googlebot hỗ trợ các thành phần web. Khi kết xuất một trang, Googlebot sẽ làm phẳng nội dung trong các DOM tối và DOM sáng. Điều này nghĩa là Googlebot chỉ nhìn thấy phần nội dung hiển thị trong HTML được hiển thị. Để đảm bảo rằng Googlebot vẫn có thể thấy nội dung của bạn sau khi hiển thị, hãy sử dụng công cụ 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ị, Googlebot sẽ không thể lập chỉ mục nội dung đó.

Ví dụ sau đây là về cách một thành phần web hiển thị nội dung DOM sáng bên trong DOM tối đi kèm. Một cách để đảm bảo cả nội dung DOM sáng và DOM tối đều hiển thị trong HTML được hiển thị là sử dụng phần tử Slot.

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
            

Sau khi hiển thị, Googlebot sẽ lập chỉ mục nội dung này:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
    

Sửa ảnh và nội dung tải từng phần

Hình ảnh có thể chiếm nhiều băng thông và làm giảm đáng kể hiệu suất. Một phương pháp hay là sử dụng tính năng tải từng phần để chỉ tải hình ảnh khi người dùng sắp nhìn thấy ảnh. Để đảm bảo bạn đang triển khai tính năng tải từng phần theo cách phù hợp cho hoạt động tìm kiếm, hãy làm theo các nguyên tắc tải từng phần của chúng tôi.