Tìm hiểu kiến thức cơ bản về SEO cho JavaScript

JavaScript là một phần quan trọng của nền tảng web vì ngôn ngữ lập trình này cung cấp nhiều tính năng để đưa web trở thành một nền tảng ứng dụng mạnh mẽ. Việc tạo điều kiện cho người dùng tìm ra các ứng dụng web dùng JavaScript của bạn thông qua Google Tìm kiếm có thể giúp bạn tìm được người dùng mới và tiếp tục thu hút 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 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 dùng 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ý, các đường liên kết được trích xuất rồi quay lại hàng đợi thu thập dữ liệu và trang được đưa 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. Trình kết xuất chuyển HTML đã kết xuất trở lại giai đoạn xử lý. Ở giai đoạn xử lý, nội dung được lập chỉ mục và các đường liên kết được trích xuất, rồi tất cả được đư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 thu thập dữ liệu, thì Googlebot sẽ bỏ qua yêu cầu HTTP cũng như bỏ qua URL này.

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 liên kết HTML và thêm các URL đó vào hàng đợi thu thập dữ liệu. Để ngăn chặn việc tìm ra đường liên kết, hãy 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 toàn bộ 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 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.

Hãy nhớ rằng kết xuất phía máy chủ hoặc kết xuất trước vẫn là cách hay vì giúp trang web của bạn chạy 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ể chạy JavaScript.

Mô tả trang bằng tiêu đề và đoạn trích độc nhất

Các tiêu đề độc nhất, mô tả rõ ràng nội dung trang và phần 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 giải thích các yếu tố làm nên tiêu đề và nội dung mô tả chất lượng trong phần nguyên tắc.

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ố liên quan đến 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 để thông báo cho Googlebot khi 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 đã 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à các trường hợp nên 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

Trong các ứng dụng trang đơn kết xuất ở phía máy khách, 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ể sẽ không khả thi hoặc không thiết thực. Để 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 thẻ 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ì các 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 những 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 dùng API Lịch sử để triển khai định tuyến giữa các chế độ xem của ứng dụng web. Để đảm bảo Googlebot có thể tìm thấy các đường liên kết, hãy tránh dùng các mảnh để tải những nội dung trang khác biệt. Ví dụ sau đây là một cách làm không hay vì Googlebot sẽ không thu thập dữ liệu các đường liên kết này:

<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>

Cẩn thận khi sử dụng thẻ meta robots

Thông qua thẻ meta robots, bạn có thể ngăn Googlebot lập chỉ mục một trang hoặc đi theo các đường liên kết. Ví dụ: việc thêm thẻ meta sau đây 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 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 gặp noindex trong thẻ meta robots trước khi chạy JavaScript, Googlebot sẽ không kết xuất hoặc lập chỉ mục trang.

Sử dụng phương pháp lưu vào bộ nhớ đệm trong thời gian dài

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. Dịch vụ kết xuất web (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ũ. Tính năng tạo vân tay số cho nội dung có thể giúp bạn tránh vấn đề này thông qua việc 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.

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

Khi dùng dữ liệu có cấu trúc trên các trang của mình, bạn có thể dùng JavaScript để tạo nội dung JSON-LD cần thiết rồi đưa nội dung đó vào trang. Hãy nhớ kiểm tra kết quả triển khai để tránh các sự cố.

Làm theo các phương pháp hay nhất đối với 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ẽ gộp nội dung trong DOM tối (shadow DOM) và DOM sáng (light DOM) lại thành một. Điều này nghĩa là Googlebot chỉ nhìn thấy phần nội dung hiển thị trong HTML đã kết xuất. Để đảm bảo rằng Googlebot vẫn có thể thấy nội dung của bạn sau khi kết xuất, 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 đã kết xuất.

Nếu nội dung không xuất hiện trong HTML đã kết xuất, Googlebot sẽ không thể lập chỉ mục những nội dung đó.

Trong ví dụ sau đây, một thành phần web được tạo ra và hiển thị nội dung DOM sáng bên trong DOM tối tương ứng. Một cách để đảm bảo cả nội dung DOM sáng và DOM tối đều hiển thị trong HTML đã kết xuất 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 kết xuất, 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>
    

Khắc phục hình ả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 chiến lược hay là sử dụng phương pháp tải từng phần để chỉ tải hình ảnh khi người dùng sắp nhìn thấy hình ảnh đó. Để đảm bảo bạn đang triển khai 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.

Thiết kế nhằm hỗ trợ khả năng tiếp cận

Hãy tạo trang không chỉ cho các công cụ tìm kiếm mà còn cho người dùng. Khi bạn thiết kế trang web, hãy nghĩ đến nhu cầu của người dùng, gồm cả những người 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 chưa đủ tiên tiến). Một trong những cách dễ dàng nhất để kiểm tra khả năng tiếp cận trang web của bạn là xem trước trang web đó bằng trình duyệt đã tắt JavaScript, hoặc xem bằng một trình duyệt chỉ hỗ trợ văn bản như Lynx. Bằng cách xem một trang web dưới dạng văn bản đơn thuần, bạn cũng có thể xác định được những nội dung khác mà Googlebot có thể khó nhận thấy, chẳng hạn như văn bản được nhúng trong hình ảnh.