JSON-LD: dữ liệu có cấu trúc

Ở bài HTML cho SEO & metadata, mèo con đã gặp structured data (JSON-LD) ở mức "biết nó tồn tại". Bài này ta đi sâu: viết được JSON-LD cho trang của mình.

Semantic HTML giúp Google đoán nội dung: thấy article + time thì đoán đây là bài viết có ngày đăng. JSON-LD thì khai báo thẳng, không cần đoán: "đây là sản phẩm tên X, giá 250.000đ, 4,8 sao, còn hàng". Khi đã chắc chắn như vậy, Google có thể hiện một rich result - kết quả giàu thông tin hơn:

• ▸Structured data = dữ liệu có cấu trúc, khai báo nội dung trang theo bộ từ vựng schema.org.
• ▸JSON-LD là cách viết structured data phổ biến nhất - một khối JSON trong thẻ script.
• ▸Phần thưởng là rich result: sao đánh giá, giá, hỏi đáp, công thức… hiện ngay trên Google.

JSON-LD nằm trong một thẻ <script type="application/ld+json"> và bên trong là một object JSON. Hai khoá đặc biệt luôn có: @context (bộ từ vựng - gần như luôn là https://schema.org) và @type (đây là loại gì). Còn lại là các thuộc tính của loại đó.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "HTML: cấu trúc & semantic",
  "description": "Học HTML từ đầu và viết semantic HTML đúng chuẩn.",
  "provider": {
    "@type": "Organization",
    "name": "Mèo Ham Học",
    "url": "https://meohamhoc.vn"
  }
}
</script>

Đọc từ trên xuống: đây là một Course (khoá học), tên là…, mô tả là…, do một Organization tên "Mèo Ham Học" cung cấp. Thuộc tính có thể lồng nhau: provider lại là một object có @type riêng.

Loại sinh lời rõ nhất cho một web bán hàng là Product. Hai phần đắt giá: offers (một Offer chứa giá và tình trạng còn hàng) và aggregateRating (điểm trung bình + số lượt đánh giá). Đây chính là thứ dựng nên sao và giá ở hình trên.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Bàn cào cho mèo",
  "image": "https://meohamhoc.vn/shop/ban-cao.png",
  "description": "Bàn cào gỗ chắc chắn cho mèo con mài móng.",
  "brand": { "@type": "Brand", "name": "Mèo Shop" },
  "offers": {
    "@type": "Offer",
    "price": "250000",
    "priceCurrency": "VND",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "256"
  }
}
</script>

• ▸Product cần ít nhất name; muốn hiện giá thì thêm offers (price + priceCurrency).
• ▸availability dùng URL chuẩn schema.org: InStock (còn hàng), OutOfStock (hết hàng).
• ▸aggregateRating chỉ dùng khi có đánh giá THẬT trên trang - đừng bịa sao.

Trang bài báo dùng NewsArticle (hoặc Article cho bài thường). Nó khai báo tựa, ảnh, ngày đăng, tác giả và đơn vị xuất bản - đúng những gì semantic header/time đã gợi, nay nói thẳng cho máy:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "Mèo con học HTML trong một tuần",
  "image": "https://meohamhoc.vn/tin/meo-hoc-html.png",
  "datePublished": "2026-06-30T08:00:00+07:00",
  "author": { "@type": "Person", "name": "Mèo Biên Tập" },
  "publisher": {
    "@type": "Organization",
    "name": "Mèo Ham Học",
    "logo": { "@type": "ImageObject", "url": "https://meohamhoc.vn/logo.png" }
  }
}
</script>

Một loại đi kèm rất hữu ích cho mọi trang con là BreadcrumbList - đường dẫn phân cấp. Nó giúp Google hiện đường dẫn đẹp (Trang chủ › Tin tức › Bài) thay cho URL trần:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Trang chủ", "item": "https://meohamhoc.vn" },
    { "@type": "ListItem", "position": 2, "name": "Tin tức", "item": "https://meohamhoc.vn/tin" },
    { "@type": "ListItem", "position": 3, "name": "Mèo con học HTML" }
  ]
}
</script>

Mỗi loại hình kinh doanh có một @type riêng, mở một kiểu rich result riêng. Hai ví dụ đầy đủ thường gặp - nhà hàng/cửa hàng và trang hỏi đáp:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "Quán Cá Mèo",
  "servesCuisine": "Hải sản",
  "priceRange": "$$",
  "telephone": "+84-28-1234-5678",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "12 Đường Cá",
    "addressLocality": "TP.HCM",
    "addressCountry": "VN"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Giao hàng mất bao lâu?",
      "acceptedAnswer": { "@type": "Answer", "text": "Thường 2-3 ngày trong nội thành." }
    },
    {
      "@type": "Question",
      "name": "Có đổi trả không?",
      "acceptedAnswer": { "@type": "Answer", "text": "Đổi trả trong 7 ngày nếu còn nguyên hộp." }
    }
  ]
}
</script>

Cùng một khuôn, chỉ đổi @type và thuộc tính. Vài loại phổ biến khác:

• ▸LocalBusiness: cửa hàng/dịch vụ địa phương - address, telephone, openingHours → hiện địa chỉ, giờ mở cửa.
• ▸JobPosting: tin tuyển dụng - title, hiringOrganization, baseSalary, jobLocation → lên Google Jobs.
• ▸Recipe: công thức nấu ăn - recipeIngredient, recipeInstructions, cookTime → thẻ công thức có ảnh, thời gian.
• ▸Event: sự kiện - name, startDate, location → hiện ngày giờ, địa điểm trong kết quả.

Một khối JSON-LD sai một dấu phẩy là hỏng cả khối. Đừng tin nó đúng vì "trông có vẻ đúng" - hãy kiểm bằng công cụ. Google có Rich Results Test (search.google.com/test/rich-results): dán URL hoặc dán thẳng đoạn HTML, nó báo loại nào hợp lệ, thiếu thuộc tính gì, sai ở đâu.

• ▸Rich Results Test: kiểm trang có đủ điều kiện rich result chưa, báo lỗi cụ thể.
• ▸Schema Markup Validator (validator.schema.org): kiểm cú pháp schema.org tổng quát.
• ▸Lỗi hay gặp: thiếu thuộc tính bắt buộc, sai định dạng ngày, dữ liệu không khớp nội dung trang.