Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
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ểm 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 thường gặp 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:
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 làm 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 bằng 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 tuỳ chỉnh có tên recipe_name như sau:
function(){returndocument.title;}
Sau đó, bạn có thể sử dụng {{recipe_name}} trong thẻ HTML tuỳ 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 tuỳ 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 kết xuất ở 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 kết xuất 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:
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).
Nếu đang sử dụng tính năng kết xuất phía máy chủ, bạn cũng có thể đưa dữ liệu có cấu trúc vào kết quả kết xuất. Hãy xem tài liệu về khung JavaScript của bạn để tìm hiểu cách tạo JSON-LD cho kiểu 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:
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 đó.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-04 UTC."],[[["\u003cp\u003eThis guide provides best practices for implementing structured data with JavaScript on your website to enhance search engine understanding.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Tag Manager and custom JavaScript code are the primary methods for dynamically generating structured data.\u003c/p\u003e\n"],["\u003cp\u003eWhen using JavaScript, ensure your server has enough resources to handle potential increased traffic from Google, especially with \u003ccode\u003eProduct\u003c/code\u003e markup.\u003c/p\u003e\n"],["\u003cp\u003eValidate your structured data implementation using the Rich Results Test to identify and resolve any errors or warnings.\u003c/p\u003e\n"],["\u003cp\u003eRefer to the comprehensive structured data documentation and JavaScript troubleshooting guide for detailed information and support.\u003c/p\u003e\n"]]],["JavaScript dynamically generates website content and structured data through methods like Google Tag Manager (GTM) or custom JavaScript. GTM allows adding structured data via Custom HTML tags and using variables to avoid data duplication. Custom JavaScript can generate or augment structured data, which becomes available in the DOM. Server-side rendering can also include structured data. Implementation should be validated with the Rich Results Test, ensuring the data is crawlable and indexable by Google Search.\n"],null,["Generate structured data with JavaScript\n\nModern websites use JavaScript to display lots of dynamic content. There are a\nfew things you need to look out for when using JavaScript to generate structured data on your\nwebsites, and this guide covers best practices and implementation strategies. If you're new to\nstructured data, you can learn more about\n[how structured data works](/search/docs/appearance/structured-data/intro-structured-data).\n\nThere are different ways to generate structured data with JavaScript, but the most common are:\n\n- [Google Tag Manager](#use-google-tag-manager)\n- [Custom JavaScript](#custom-javascript)\n\n| **Using `Product` markup?** Be aware that dynamically-generated markup can make Shopping crawls less frequent and less reliable, which can be an issue for fast-changing content like product availability and price. If you're a merchant optimizing for all types of shopping results, make sure your server has enough computing resources to handle increased traffic from Google.\n\nUse Google Tag Manager to generate JSON-LD dynamically\n\n[Google Tag Manager](https://tagmanager.google.com/) is a\nplatform that lets you manage tags on your website without editing the code. To generate structured\ndata with Google Tag Manager, follow these steps:\n\n1. [Set up and install Google Tag Manager](https://support.google.com/tagmanager/answer/6103696) on your site.\n2. Add a new **Custom HTML** tag to the container.\n3. Paste a [supported structured data](/search/docs/guides/search-gallery) block into the tag content.\n4. Install the container as shown in the **Install Google Tag Manager** section of your container's admin menu.\n5. To add the tag to your website, publish your container in the Google Tag Manager interface.\n6. [Test your implementation](#testing).\n\nUsing variables in Google Tag Manager\n\nGoogle Tag Manager (GTM) supports [variables](https://support.google.com/tagmanager/topic/7683268?ref_topic=3441647)\nto use information on the page as part of your structured data. Use variables to extract\nthe structured data from the page instead of duplicating the information in GTM. Duplicating the information in GTM increases\nthe risk of having a mismatch between page content and the structured data inserted using GTM.\n\nFor example, you can dynamically create\na [Recipe](/search/docs/appearance/structured-data/recipe) JSON-LD block\nthat uses the page title as the recipe name by creating the following custom variable named\n`recipe_name`: \n\n```javascript\nfunction() { return document.title; }\n```\n\nYou can then use `{{recipe_name}}` in your custom tag HTML.\n\nWe recommend to create variables to collect all the necessary information from the page using variables.\n\nHere is an example for the custom HTML tag content: \n\n```javascript\n\u003cscript type=\"application/ld+json\"\u003e\n {\n \"@context\": \"https://schema.org/\",\n \"@type\": \"Recipe\",\n \"name\": \"{{recipe_name}}\",\n \"image\": [ \"{{recipe_image}}\" ],\n \"author\": {\n \"@type\": \"Person\",\n \"name\": \"{{recipe_author}}\"\n }\n }\n\u003c/script\u003e\n```\n| **Note:** The previous sample assumes that you defined the variables `recipe_name`, `recipe_image` and `recipe_author` in GTM.\n\nGenerate structured data with custom JavaScript\n\nAnother way you can generate structured data is by using JavaScript to either generate all of\nyour structured data or add more information to the server-side rendered structured data. Either way,\nGoogle Search can understand and process structured data that's available in the DOM when it\nrenders the page. To learn more about how Google Search processes JavaScript, check out the\n[JavaScript basics guide](/search/docs/crawling-indexing/javascript/javascript-seo-basics).\n\nHere is an example of JavaScript-generated structured data:\n\n1. [Find the type of\n structured data](/search/docs/appearance/structured-data/search-gallery) you are interested in.\n2. Edit your website's HTML to include a JavaScript snippet like the following example (refer to the documentation from your CMS or hosting provider, or ask your developers). \n\n ```javascript\n fetch('https://api.example.com/recipes/123')\n .then(response =\u003e response.text())\n .then(structuredDataText =\u003e {\n const script = document.createElement('script');\n script.setAttribute('type', 'application/ld+json');\n script.textContent = structuredDataText;\n document.head.appendChild(script);\n });\n ```\n3. [Test your implementation with the Rich Results Test](#testing).\n\nUsing server-side rendering\n\nIf you are using [server-side rendering](/web/updates/2019/02/rendering-on-the-web#server-rendering),\nyou can also include the structured data in the rendered output. Check the documentation\nof your framework to find out how to generate the JSON-LD for [the type of structured data](/search/docs/appearance/structured-data/search-gallery)\nyou're interested in.\n\nTest your implementation\n\nTo make sure Google Search can crawl and index your structured data, test your implementation:\n\n1. Open the [Rich Results Test](https://goo.gle/richresults).\n2. Enter the URL that you want to test. We recommend that you use the URL input instead of the code input because there are JavaScript limitations when using the code input (for example, CORS restrictions).\n3. Click **Test URL** .\n\n **Success** : If you did everything correctly and your [structured data type is supported in the tool](https://support.google.com/webmasters/answer/7445569),\n you will see the message \"Page is eligible for rich results\". \n\n If you are testing a structured data type that is not supported by the Rich Results test, check the rendered HTML.\n If the rendered HTML contains the structured data, Google Search will be able to process it.\n\n **Try again** : If you see errors or warnings, it is most likely a syntax error or a missing property.\n Read the [documentation\n for your type of structured data](/search/docs/appearance/structured-data/search-gallery) and make sure you've added all the properties. If your problem\n persists, make sure to also check the guide on [fixing search-related JavaScript problems](/search/docs/crawling-indexing/javascript/fix-search-javascript)."]]
