Học cách làm cho các schema JSON-LD (application/ld+json) hoạt động trong Next.js và các dự án ReactJS khác.
Để render dữ liệu JSON-LD trong Next.js (hoặc bất kỳ ứng dụng React nào), bạn cần dùng:
- Phần tử
<script>. - Thuộc tính
dangerouslySetInnerHTML. - Phương thức
JSON.stringify(để serialize).
JSON-LD là viết tắt của JavaScript Object Notation for Linked Data. Đây là phương pháp nhẹ để trình bày dữ liệu Schema.org cho công cụ tìm kiếm về nội dung trang web của bạn.
Hãy xem ví dụ.
Giả sử bạn có một schema JSON-LD HTML cấu trúc như sau:
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Product", "name": "Tên dịch vụ", "image": "https://somewebsite.com/static/images/some-image.jpg", "description": " Tìm kiếm phương tiện chống lại sự bất công. Chuyển nỗi sợ hãi thành vũ khí chống lại những kẻ săn mồi trên sự sợ hãi. Ai đó như bạn. Ai đó sẽ rung chuyển những cái lồng. Cơn giận của tôi lớn hơn lòng tội lỗi.", "brand": "Tên công ty", "review": { "@type": "Review", "name": "Tên công ty ", "reviewBody": "Đó là một con chó. Một con chó lớn. Không phải là tôi là ai bên dưới mà những gì tôi làm định nghĩa tôi. Bạn thấy... Tôi đang mua khách sạn này và thiết lập một số quy tắc mới về khu vực bể bơi.", "reviewRating": { "@type": "Rating", "ratingValue": "5" }, "datePublished": "2020-04-06", "author": {"@type": "Person", "name": "Emma"} } } </script>Để làm cho schema JSON-LD này hoạt động trong Next.js, bắt đầu bằng cách bỏ thẻ HTML <script> để chỉ còn lại đối tượng JSON-LD.
Sau đó gán đối tượng JSON-LD cho một biến, như sau:
const schemaData = { "@context": "https://schema.org/", "@type": "Product", "name": "Tên dịch vụ", "image": "https://somewebsite.com/static/images/some-image.jpg", "description": "Tìm kiếm phương tiện chống lại sự bất công. Chuyển nỗi sợ hãi thành vũ khí chống lại những kẻ săn mồi trên sự sợ hãi. Ai đó như bạn. Ai đó sẽ rung chuyển những cái lồng. Cơn giận của tôi lớn hơn lòng tội lỗi.", "brand": "Tên công ty", "review": { "@type": "Review", "name": "Tên công ty ", "reviewBody": "Đó là một con chó. Một con chó lớn. Không phải là tôi là ai bên dưới mà những gì tôi làm định nghĩa tôi. Bạn thấy... Tôi đang mua khách sạn này và thiết lập một số quy tắc mới về khu vực bể bơi.", "reviewRating": { "@type": "Rating", "ratingValue": "5" }, "datePublished": "2020-04-06", "author": {"@type": "Person", "name": "Emma"} } }Bây giờ bạn cần serialize biến schemaData với JSON.stringify():
JSON.stringify(schemaData)Cuối cùng, thêm JSON.stringify(schemaData) làm giá trị đối tượng của thuộc tính dangerouslySetInnerHTML bên trong phần tử <script> để render trên trình duyệt:
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} />Nếu bạn băn khoăn, đây là ví dụ trang hoàn chỉnh, dựa trên mã trong hướng dẫn này, sẽ hoạt động trên mọi website Next.js/React:
import React from 'react'; const schemaData = { "@context": "https://schema.org/", "@type": "Product", "name": "Tên dịch vụ", "image": "https://somewebsite.com/static/images/some-image.jpg", "description": "Tìm kiếm phương tiện chống lại sự bất công. Chuyển nỗi sợ hãi thành vũ khí chống lại những kẻ săn mồi trên sự sợ hãi. Ai đó như bạn. Ai đó sẽ rung chuyển những cái lồng. Cơn giận của tôi lớn hơn lòng tội lỗi.", "brand": "Tên công ty", "review": { "@type": "Review", "name": "Tên công ty ", "reviewBody": "Đó là một con chó. Một con chó lớn. Không phải là tôi là ai bên dưới mà những gì tôi làm định nghĩa tôi. Bạn thấy... Tôi đang mua khách sạn này và thiết lập một số quy tắc mới về khu vực bể bơi.", "reviewRating": { "@type": "Rating", "ratingValue": "5" }, "datePublished": "2020-04-06", "author": {"@type": "Person", "name": "Emma"} } } const SomePage = () => { return ( <> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} /> <div>Nội dung của bạn</div> </> ); }; export default SomePage;