Tạo dữ liệu có cấu trúc bằng JavaScript

Các trang web hiện đại sử dụng JavaScript để hiển thị nhiều nội dung động. Có một vài điều bạn cần chú ý khi dùng JavaScript để tạo dữ liệu có cấu trúc trên trang web của mình. Hướng dẫn này sẽ trình bày các phương pháp hay nhất và các chiến lược triển khai. Nếu mới làm quen với dữ liệu có cấu trúc, bạn có thể tìm hiểu thêm về cách thức hoạt động của dữ liệu có cấu trúc.

Có nhiều cách tạo dữ liệu có cấu trúc bằng JavaScript, nhưng phổ biến nhất là những cách sau:

Sử dụng Trình quản lý thẻ của Google để tạo JSON-LD động

Trình quản lý thẻ của Google là một nền tảng cho phép bạn quản lý các thẻ trên trang web của mình mà không cần chỉnh sửa mã. Để tạo dữ liệu có cấu trúc bằng Trình quản lý thẻ của Google, hãy làm theo những bước sau:

  1. Thiết lập và cài đặt Trình quản lý thẻ của Google trên trang web của bạn.
  2. Thêm thẻ HTML tùy chỉnh mới vào vùng chứa.
  3. Dán khối dữ liệu có cấu trúc mà bạn muốn dùng vào nội dung thẻ.
  4. Cài đặt vùng chứa theo cách nêu trong phần Cài đặt Trình quản lý thẻ của Google trên trình đơn quản trị của vùng chứa.
  5. Để thêm thẻ vào trang web của bạn, hãy xuất bản vùng chứa trong giao diện Trình quản lý thẻ của Google.
  6. Kiểm tra kết quả triển khai.

Sử dụng các biến trong Trình quản lý thẻ của Google

Trình quản lý thẻ của Google (GTM) hỗ trợ các biến để dùng thông tin trên trang như một thành phần của dữ liệu có cấu trúc. Hãy sử dụng các biến để trích xuất dữ liệu có cấu trúc từ trang thay vì sao chép thông tin trong GTM. Việc sao chép thông tin trong GTM làm tăng nguy cơ xảy ra tình trạng nội dung trên trang không khớp với dữ liệu có cấu trúc được chèn qua GTM.

Ví dụ: bạn có thể tạo một khối JSON-LD động cho Công thức nấu ăn – trong đó sử dụng tiêu đề trang làm tên công thức – bằng cách tạo biến tùy chỉnh có tên recipe_name sau: 

function() { return document.title; }

Sau đó, bạn có thể sử dụng {{recipe_name}} trong thẻ HTML tùy chỉnh của mình.

Bạn nên tạo các biến để thu thập tất cả các thông tin cần thiết trên trang bằng các biến đó.

Dưới đây là một ví dụ về nội dung thẻ HTML tùy chỉnh:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Tạo dữ liệu có cấu trúc bằng JavaScript tùy chỉnh

Một cách khác để tạo dữ liệu có cấu trúc là sử dụng JavaScript để tạo tất cả dữ liệu có cấu trúc hoặc bổ sung thêm thông tin vào dữ liệu có cấu trúc được hiển thị phía máy chủ. Dù bằng cách nào đi nữa, thì Google Tìm kiếm vẫn có thể hiểu và xử lý dữ liệu có cấu trúc có trong DOM khi hiển thị trang. Để tìm hiểu thêm về cách Google Tìm kiếm xử lý JavaScript, hãy xem hướng dẫn cơ bản về JavaScript.

Dưới đây là một ví dụ về dữ liệu có cấu trúc tạo bằng JavaScript:

  1. Tìm loại dữ liệu có cấu trúc mà bạn quan tâm.
  2. Chỉnh sửa HTML của trang web để thêm đoạn mã JavaScript như ví dụ dưới đây (hãy tham khảo tài liệu của hệ thống quản lý nội dung hoặc của nhà cung cấp dịch vụ lưu trữ, hoặc hỏi nhà phát triển của bạn).
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Kiểm tra kết quả triển khai bằng công cụ Kiểm tra kết quả nhiều định dạng.

Sử dụng tính năng hiển thị phía máy chủ

Nếu đang sử dụng chế độ kết xuất phía máy chủ, bạn cũng có thể đưa dữ liệu có cấu trúc mà mình mong muốn vào kết quả hiển thị. Hãy tham khảo tài liệu về khung JavaScript của bạn để tìm hiểu cách tạo JSON-LD cho loại dữ liệu có cấu trúc mà bạn quan tâm.

Kiểm tra kết quả triển khai

Để đảm bảo Google Tìm kiếm có thể thu thập và lập chỉ mục dữ liệu có cấu trúc của bạn, hãy kiểm tra kết quả triển khai:

  1. Mở công cụ Kiểm tra kết quả nhiều định dạng.
  2. Nhập URL mà bạn muốn kiểm tra.
  3. Nhấp vào Kiểm tra URL.

    Thành công: Nếu bạn thực hiện đúng các bước và công cụ này hỗ trợ loại dữ liệu có cấu trúc của bạn, bạn sẽ thấy thông báo "Trang đủ điều kiện cho kết quả nhiều định dạng".
    Nếu bạn đang kiểm tra một loại dữ liệu có cấu trúc mà Công cụ kiểm tra kết quả nhiều định dạng không hỗ trợ, hãy kiểm tra HTML được hiển thị. Nếu HTML được hiển thị chứa dữ liệu có cấu trúc, Google Tìm kiếm sẽ có thể xử lý dữ liệu đó.

    Thử lại: Nếu bạn thấy lỗi hoặc cảnh báo thì khả năng cao là do một lỗi cú pháp hoặc do thiếu một thuộc tính. Hãy đọc tài liệu về loại dữ liệu có cấu trúc của bạn để chắc chắn bạn đã thêm tất cả các thuộc tính. Nếu vẫn không khắc phục được vấn đề, hãy xem cả hướng dẫn về cách khắc phục vấn đề với JavaScript liên quan đến Tìm kiếm.