Skip to main content
On this page

Product Schema — Giới thiệu & Hướng dẫn

Theme TanaFlows hỗ trợ giao diện trang sản phẩm chuyên biệt tên là product giúp bạn biến một bài viết hoặc trang đơn thành một trang bán sản phẩm số (Landing Page / Sales Page) chuyên nghiệp mà không cần dùng đến bên thứ ba.

Giao diện được chia thành 2 cột:

  • Cột bên trái: Hiển thị ảnh bìa sản phẩm, nội dung mô tả chi tiết (soạn thảo trực tiếp trong Ghost Editor) và khung bình luận (nếu bật).
  • Cột bên phải (Sidebar dính - Sticky Sidebar): Hiển thị bảng giá, danh sách tính năng (checklist), nút mua hàng, thông số kỹ thuật, lời đánh giá (Testimonial) và thẻ tác giả sáng tạo / thương hiệu.

Dưới đây là hướng dẫn chi tiết các bước thiết lập.

Bước 1: Kích hoạt Giao diện Trang sản phẩm

  1. Trong Ghost Admin, tạo một Page (Trang) hoặc Post (Bài viết) mới cho sản phẩm của bạn.
  2. Mở cài đặt trang (biểu tượng bánh răng ở góc trên bên phải):
    • Tìm mục Template và chọn: Product.
    • Tải lên Feature Image (Ảnh đại diện) cho sản phẩm.
    • Điền mô tả ngắn gọn vào ô Excerpt (đoạn mô tả này sẽ hiển thị ở cột bên phải).

Bước 2: Cấu hình dữ liệu bán hàng ở Sidebar bằng Code Injection

Toàn bộ thông tin ở cột Sidebar bên phải (Giá, tính năng, nút bấm, tác giả…) được cấu hình thông qua đoạn mã Javascript chèn vào phần Code Injection của trang đó.

  1. Mở trang sản phẩm bạn vừa tạo ở Bước 1.
  2. Mở cài đặt trang (biểu tượng bánh răng) và bấm chọn Code Injection.
  3. Sao chép đoạn mã dưới đây và dán vào ô Page header (hoặc Post header):
<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('product', () => ({
      store: Alpine.$persist({
        // ── TÍNH NĂNG NỔI BẬT ───────────────────
        feature: [
          'Hỗ trợ đa ngôn ngữ',
          'Hỗ trợ chế độ Darkmode',
          'Ngôn ngữ bản địa sẵn sàng',
          'Mẫu thiết kế đa dạng'
        ],


        // ── GIÁ SẢN PHẨM ───────────────────────────────
        price: '$99',


        // ── NÚT THANH TOÁN (mua ngay) ─────────────────────────
        button_text: 'Mua Ngay',
        buyNowUrl: 'https://store.example.com/checkout/buy/sample-product-id?embed=1',


        // ── NÚT XEM THỬ (demo) ───────────────────────────
        button_demo_text: 'Xem Site Mẫu',
        liveDemoUrl: 'https://demo.example.com',


        // ── THÔNG SỐ CHI TIẾT (thông tin sản phẩm) ──────────
        productInfo: [
          { name: 'Nền tảng', info: 'Hệ thống tùy chỉnh cao' },
          { name: 'Tìm kiếm', info: 'Tích hợp sẵn tìm kiếm' },
          { name: 'Dark Mode', info: 'Sẵn sàng dịch đa ngôn ngữ' },
          { name: 'Phiên bản', info: 'v1.0.0' },
        ],


        // ── GHI CHÚ NHỎ ─────────────────────────────────
        note: null,


        // ── LỜI ĐÁNH GIÁ (đánh giá khách hàng) ─────────────────
        testimonial: {
          words: 'Sản phẩm tuyệt vời! Nó đã thay đổi hoàn toàn quy trình làm việc hàng ngày của tôi.',
          name: 'Jane Smith',
          website: 'https://janesmith.example.com',
          title: 'Khách hàng đầu tiên'
        },


        // ── THÔNG TIN NGƯỜI TẠO (nhà sản xuất) ───────────────────
        author: {
          name: 'John Doe',
          avatar: 'https://images.example.com/avatars/john-doe.png',
          background_img: 'https://images.example.com/banners/john-doe-cover.jpg',
          website: 'https://johndoe.example.com',
          twitter: 'https://x.com/johndoe_example',
          subscribe: 'https://johndoe.example.com/#/portal/signup',
          bio: 'Nhà sáng tạo sản phẩm số cá nhân, đam mê giúp đỡ mọi người tối ưu hóa quy trình làm việc kỹ thuật số.'
        },


        // ── THƯƠNG HIỆU ───────────────────────────────────
        brand: {
          name: 'BrandName',
          avatar: 'https://images.example.com/brands/logo.png',
          background_img: 'https://images.example.com/brands/cover.jpg',
          website: 'https://brand.example.com',
          twitter: 'https://x.com/brand_example',
          subscribe: 'https://brand.example.com/#/portal/signup',
          bio: 'Hỗ trợ các nhà sáng tạo nội dung biến đam mê thành doanh nghiệp bền vững.'
        }
      }).as('product_page_data').using(sessionStorage),


      // Ánh xạ dữ liệu trong store ra ngoài phạm vi root của component
      get feature()          { return this.store.feature },
      get price()            { return this.store.price },
      get button_text()      { return this.store.button_text },
      get buyNowUrl()        { return this.store.buyNowUrl },
      get button_demo_text() { return this.store.button_demo_text },
      get liveDemoUrl()      { return this.store.liveDemoUrl },
      get productInfo()      { return this.store.productInfo },
      get testimonial()      { return this.store.testimonial },
      get note()             { return this.store.note },
      get author()           { return this.store.author },
      get brand()            { return this.store.brand },
    }));
  });
</script>
  1. Thay đổi các giá trị văn bản, hình ảnh và đường dẫn trong đoạn mã trên cho phù hợp với sản phẩm thực tế của bạn.
  2. Bấm Save (Lưu) và tải lại trang để kiểm tra kết quả.

Bật bình luận cho Trang sản phẩm

Để độc giả có thể để lại bình luận hoặc hỏi đáp ở cuối trang, bạn chỉ cần gắn tag nội bộ #comment vào trang sản phẩm trong mục cài đặt Tags.

Tự động Tạo Product Schema (SEO)

Giao diện này tự động kích hoạt Product Schema gửi dữ liệu cấu trúc chuẩn lên Google. Bạn không cần phải cấu hình hay gắn thêm tag nội bộ nào để kích hoạt.

Tương thích di động

On thiết bị di động (smartphone), phần hộp Sidebar bán hàng (Giá, checklist tính năng, nút mua) sẽ tự động được đẩy lên hiển thị ngay dưới ảnh bìa sản phẩm để khách hàng dễ dàng bấm mua mà không cần cuộn xuống tận đáy trang.

Hướng Dẫn Sử Dụng Video Autoplay Cho Trang Sản Phẩm

Tính năng này cho phép bạn biến ảnh đại diện tĩnh của sản phẩm thành một video tự động phát (Muted Autoplay) cực kỳ sinh động ngay khi khách truy cập vào trang, đồng thời vẫn bảo toàn 100% hiệu năng và điểm số SEO hình ảnh của trang trên Google.

1. Cách thiết lập trong Ghost Admin

Khi bạn tạo hoặc chỉnh sửa một sản phẩm (Product Post), hãy thực hiện 2 bước sau:

  1. Tải ảnh đại diện (Feature Image) lên như bình thường. Ảnh này rất quan trọng vì nó sẽ làm ảnh nền tải tức thì (LCP Poster), giúp tối ưu tốc độ load trang.
  2. Nhấp vào nút ⚙️ (Post Settings) ở góc phải màn hình, kéo xuống phần Feature Image Alt Text và dán trực tiếp đường dẫn video vào đó.

Định dạng liên kết video hỗ trợ:

  • YouTube: Dạng đầy đủ https://www.youtube.com/watch?v=XXXXX hoặc dạng rút gọn https://youtu.be/XXXXX.
  • Vimeo: Dạng https://vimeo.com/XXXXX.
  • Video trực tiếp (MP4/WebM): Đường dẫn kết thúc bằng đuôi mở rộng, ví dụ: https://ten-mien-cua-ban.com/assets/intro.mp4.

2. Cách hoạt động trên giao diện người dùng (UX)

  • Tải trước thông minh (Progressive Loading): Khi truy cập trang, trình duyệt sẽ tải ảnh tĩnh sản phẩm trước. Ngay sau đó, mã nguồn JavaScript sẽ tải ngầm video. Khi video sẵn sàng chạy, ảnh tĩnh sẽ mờ dần và video xuất hiện tự động phát.
  • Autoplay Muted (Theo chính sách trình duyệt): Video mặc định luôn chạy ở chế độ tắt tiếng.
  • Nút điều khiển âm thanh: Một nút Glassmorphism (Kính mờ) tối giản sẽ tự động xuất hiện ở góc trên bên phải của video. Người dùng chỉ cần nhấp vào nút này để Bật/Tắt âm thanh của video bất kỳ lúc nào.
  • Tối ưu năng lượng & CPU (IntersectionObserver): Khi người dùng cuộn chuột xuống dưới để đọc nội dung và video khuất khỏi màn hình, trình phát sẽ tự động tạm dừng (pause). Khi họ cuộn ngược lên lại, video sẽ tiếp tục phát. Điều này giúp tránh lãng phí pin thiết bị (đặc biệt là điện thoại).

3. Cơ chế tối ưu SEO & Khả năng tiếp cận (A11y)

  • Image SEO: Công cụ tìm kiếm (Googlebot) khi cào mã nguồn HTML thô của trang sẽ không đọc thấy liên kết video trong thẻ alt. Thay vào đó, mã giao diện đã tự động chuyển đổi thuộc tính alt của thẻ ảnh thành Tiêu đề sản phẩm (Title).
  • Google Merchant Center: Các Schema dữ liệu cấu trúc (JSON-LD) của trang vẫn trỏ đến ảnh tĩnh gốc, giúp sản phẩm được hiển thị đầy đủ hình ảnh trên Google Shopping và Google Images.

Tự động Tạo Product Schema

JSON-LD Product Schema là dữ liệu có cấu trúc theo chuẩn schema.org/Product được nhúng vào trang, giúp Google đọc hiểu thông tin sản phẩm và hiển thị Rich Results trên kết quả tìm kiếm:

  • 🏷️ Giá sản phẩm hiện ngay dưới tiêu đề trang trong SERP
  • 🛒 Trạng thái còn hàng (In Stock)
  • ⭐ Điểm đánh giá (nếu có)
  • 🔍 Merchant listing trong Google Shopping

[!IMPORTANT] Google chỉ hiển thị Rich Results khi schema hợp lệ đúng chuẩn. Sai property (như dùng author thay vì manufacturer) hoặc thiếu định danh (sku) sẽ khiến Google bỏ qua toàn bộ schema.

Đầu ra JSON-LD:

"brand": {
  "@type": "Brand",
  "name": "TanaFlows",
  "logo": "https://yoursite.com/logo.png",
  "url": "https://bepublish.com/vi/tanaflows/",
  "description": "Nền tảng học tập hiện đại"
}

Ví dụ Đầu ra JSON-LD Đầy đủ

Ví dụ khi thiết lập price: '3.500.000 VND' đi kèm cả author và brand:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Bộ Não Số Tana",
  "url": "https://yoursite.com/vi/product/bo-nao-so-tana/",
  "sku": "bo-nao-so-tana",
  "description": "Hệ thống ghi chú thông minh trên nền tảng Tana...",
  "image": "https://yoursite.com/content/images/product.jpg",
  "brand": {
    "@type": "Brand",
    "name": "TanaFlows",
    "logo": "https://yoursite.com/logo.png",
    "url": "https://bepublish.com/vi/tanaflows/"
  },
  "offers": {
    "@type": "Offer",
    "price": "3500000",
    "priceCurrency": "VND",
    "url": "https://yoursite.com/vi/product/bo-nao-so-tana/",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  },
  "manufacturer": {
    "@type": "Person",
    "name": "Cuong Thach",
    "image": "https://yoursite.com/avatar.jpg",
    "url": "https://yoursite.com/author/cuong"
  }
}

Kiểm tra Schema

Sau khi deploy, kiểm tra cấu hình tại:

| Công cụ | URL | Mục đích | |---|---|---| | Google Rich Results Test | search.google.com/test/rich-results | Xem schema có đủ điều kiện hiển thị Rich Result không | | Schema Markup Validator | validator.schema.org | Kiểm tra cú pháp schema.org | | Google Search Console | Enhancements → Products | Theo dõi trạng thái index sau khi deploy |

[!TIP] Nếu Rich Results Test báo “không đủ điều kiện”: kiểm tra xem Alpine đã khởi tạo xong chưa khi Google crawl. Google Crawler thực thi JavaScript nên schema được chèn sau alpine:initialized vẫn được nhận diện tốt — chỉ cần đảm bảo trang không bị lỗi runtime JS.

Các trường hợp đặc biệt

| Tình huống | Hành vi | |---|---| | price: null và không có author, brand | Schema vẫn được chèn với price: 0, brand mặc định từ tên site | | brand: null | Tự động dùng {{@site.title}} của Ghost làm brand mặc định | | author: null | Trường manufacturer sẽ bị bỏ qua hoàn toàn | | Không có feature_image | Trường image sẽ bị bỏ qua | | price: 'Miễn phí 100%' | Match từ khóa miễn phí trước, số 100 không bị nhầm thành giá | | URL có dấu gạch chéo cuối | Slug được trích xuất chính xác (tự xóa dấu / thừa qua replace(/\/+$/, '')) |