Trong thời đại kỹ thuật số, việc tối ưu hóa trang web để phù hợp với các công cụ tìm kiếm ngày càng trở nên quan trọng. Một trong những phương pháp hiệu quả nhất để làm điều này là sử dụng dữ liệu có cấu trúc. Dữ liệu có cấu trúc không chỉ giúp các công cụ tìm kiếm hiểu rõ hơn về nội dung trang web của bạn mà còn cải thiện khả năng hiển thị trong kết quả tìm kiếm. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo dữ liệu có cấu trúc bằng JavaScript, từ những bước cơ bản đến các phương pháp nâng cao, giúp tối ưu hóa SEO cho trang web của bạn.
Các trang web hiện đại thường sử dụng JavaScript để hiển thị nhiều nội dung động. Tuy nhiên, khi sử dụng JavaScript để tạo dữ liệu có cấu trúc trên trang web, bạn cần chú ý đến một số điểm quan trọng. Hướng dẫn này sẽ giới thiệu các phương pháp tối ưu và chiến lược triển khai hiệu quả. Nếu bạn mới bắt đầu với dữ liệu có cấu trúc, hãy tìm hiểu thêm về cách nó hoạt động để đảm bảo rằng bạn đang áp dụng đúng các nguyên tắc.
Có nhiều phương pháp để tạo dữ liệu có cấu trúc bằng JavaScript, nhưng những cách phổ biến nhất bao gồm:
- Sử dụng google tag manager
- Tùy chỉnh javascript
Sử dụng Trình quản lý thẻ của Google để tạo JSON-LD động
Google Tag Manager là một nền tảng mạnh mẽ giúp bạn quản lý các thẻ trên trang web mà không cần phải chỉnh sửa trực tiếp mã nguồn. Để tạo dữ liệu có cấu trúc bằng Google Tag Manager, bạn có thể thực hiện theo các bước sau:
- Thiết lập và cài đặt google tag manager trên trang web của bạn.
- Thêm một thẻ html tùy chỉnh mới vào vùng chứa.
- Dán khối dữ liệu có cấu trúc mà bạn muốn sử dụng vào nội dung của thẻ.
- Cấu hình vùng chứa theo hướng dẫn trong phần cài đặt google tag manager trong trình đơn quản trị.
- Xuất bản vùng chứa trong giao diện google tag manager để thẻ được áp dụng trên trang web của bạn.
- Kiểm tra kết quả triển khai để đảm bảo tính chính xác và hiệu quả.
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) cho phép sử dụng các biến để khai thác thông tin trên trang web như một phần của dữ liệu có cấu trúc. Việc sử dụng các biến giúp bạn trích xuất dữ liệu có cấu trúc từ trang thay vì sao chép thông tin trực tiếp vào gtm. Việc sao chép thông tin có thể dẫn đến tình trạng dữ liệu có cấu trúc không đồng bộ với nội dung thực tế trên trang.
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 với tên là recipe_name như 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.
Nên tạo các biến để thu thập tất cả thông tin cần thiết trên trang bằng cách sử dụ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>
Lưu ý: ví dụ trên giả định rằng bạn đã cấu hì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 phương pháp khác để tạo dữ liệu có cấu trúc là sử dụng javascript để tự động tạo hoặc bổ sung thông tin vào dữ liệu có cấu trúc hiển thị phía máy chủ. Dù bạn chọn cách nào, google tìm kiếm vẫn có khả năng 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, bạn có thể tham khảo hướng dẫn cơ bản về javascript.
Ví dụ về dữ liệu có cấu trúc tạo bằng javascript:
- Xác định loại dữ liệu có cấu trúc bạn muốn triển khai.
- Chỉnh sửa mã html của trang web để thêm đoạn mã javascript như sau (tham khảo tài liệu của hệ thống quản lý nội dung, 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);
});
- 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 bạn sử dụng chế độ kết xuất phía máy chủ, bạn cũng có thể tích hợp dữ liệu có cấu trúc 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, thực hiện các bước sau:
- Mở công cụ kiểm tra kết quả nhiều định dạng.
- Nhập url mà bạn muốn kiểm tra. Nên nhập url thay vì mã vì có hạn chế liên quan đến javascript (ví dụ: hạn chế theo cors).
Bạn nên nhập URL thay vì nhập mã vì có một số điểm hạn chế đối với JavaScript khi nhập mã (ví dụ: hạn chế theo CORS). - 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ụ 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 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 chứa dữ liệu có cấu trúc, google tìm kiếm có thể xử lý dữ liệu đó.
Thử lại: Nếu bạn thấy lỗi hoặc cảnh báo, có thể do lỗi cú pháp hoặc thiếu thuộc tính. Hãy kiểm tra tài liệu về loại dữ liệu có cấu trúc của bạn để đảm bảo bạn đã thêm tất cả các thuộc tính cần thiết. Nếu vẫn gặp vấn đề, tham khảo hướng dẫn khắc phục sự cố với javascript liên quan đến tìm kiếm.
Tạo dữ liệu có cấu trúc bằng JavaScript không chỉ giúp trang web của bạn trở nên thân thiện hơn với công cụ tìm kiếm mà còn tối ưu hóa trải nghiệm người dùng. Bằng cách sử dụng các công cụ như Trình quản lý thẻ của Google và JavaScript tùy chỉnh, bạn có thể dễ dàng triển khai và kiểm soát dữ liệu có cấu trúc trên trang web của mình. Hãy đảm bảo rằng bạn luôn kiểm tra và xác minh kết quả để đạt hiệu quả SEO tối đa.
