Lấy trang web html javascript

Các trang web hiện đại sử dụng JavaScript để hiển thị nhiều nội dung động. Có một số điều bạn cần chú ý khi sử 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 các bước sau

1. Thiết lập và cài đặt Trình quản lý thẻ Google trên trang web của bạn
2. Thêm tùy chọn chỉnh sửa thẻ HTML 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 sử dụng vào thẻ nội dung
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 menu 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. .

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 để sử 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. Vui lòng 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ề tùy chỉnh thẻ nội dung HTML

Lưu ý. Ví dụ nêu trên giả định rằng bạn đã xác định các biến recipe_name, recipe_image và recipe_author trong GTM

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ị trên máy chủ. Dù bằng cách nào đi nữa, thì Google Search vẫn có thể hiểu và xử lý dữ liệu có cấu trú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 được tạo bằng JavaScript

1. Find the data type has structure that you 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 (vui lòng 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. .

Tính năng sử dụng được hiển thị trên máy chủ

Nếu đang sử dụng tính năng , bạn cũng có thể đưa dữ liệu có cấu trúc mong muốn vào kết quả hiển thị. Vui lòng xem 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ả khai thác

Để đảm bảo Google Tìm kiếm có thể thu thập và thiết 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ả khai thác

1. Open tool Kiểm tra kết quả nhiều định dạng
2. Nhập URL mà bạn muốn kiểm tra. Lưu ý. Bạn nên nhập URL thay vì nhập mã vì có một số giới hạn chế độ đối với JavaScript khi nhập mã (ví dụ:. mode by CORS)
3. Access to Check Tra URL

   thành công. Nếu bạn thực hiện đúng các bước và công cụ 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ị có 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 lỗi cú pháp hoặc thiếu thuộc tính. Hãy đọc tài liệu về các loại dữ liệu có cấu trúc của bạn để chắc chắn rằng bạn đã bổ sung tất cả các thuộc tính. Nếu vẫn không giải quyết được vấn đề, hãy xem cả hướng dẫn về cách giải quyết vấn đề với JavaScript liên quan đến Tìm kiếm