On this page

Product Schema — Introduction & Guide

The TanaFlows theme includes a dedicated product page layout called product template that turns a regular post or page into a professional digital product sales landing page (Sales Page) without requiring third-party tools.

The interface is split into 2 columns:

Left Column: Displays the product’s feature image, detailed description (written directly inside the Ghost Editor), and a comments section (if enabled).
Right Column (Sticky Sidebar): Displays the pricing table, feature checklist, purchase button, technical specifications, a customer testimonial, and a creator/brand card.

Here is the step-by-step guide to setting up your product page.

Step 1: Activate the Product Page Layout

In Ghost Admin, create a new Page or Post for your product.
Open page settings (gear icon in the top-right corner):
- Find the Template field and select: Product.
- Upload a Feature Image for the product.
- Fill in the Excerpt field with a short description (this description will appear in the right sidebar).

All information displayed in the right sidebar (price, features, buttons, author, etc.) is configured via a JavaScript block inserted into the Code Injection section of that specific page.

Open the product page you created in Step 1.
Open page settings (gear icon) and select Code Injection.
Copy the code block below and paste it into the Page header (or Post header) box:

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('product', () => ({
      store: Alpine.$persist({
        // ── FEATURE CHECKLIST ───────────────────
        feature: [
          'Multi-language support',
          'Dark mode support',
          'Localized language ready',
          'Diverse pre-made templates'
        ],

        // ── PRODUCT PRICE ───────────────────────────────
        price: '$99',

        // ── CHECKOUT LINK (buy button) ─────────────────────────
        button_text: 'Buy Now',
        buyNowUrl: 'https://store.example.com/checkout/buy/sample-product-id?embed=1',

        // ── PREVIEW LINK (demo button) ───────────────────────────
        button_demo_text: 'View Demo Site',
        liveDemoUrl: 'https://demo.example.com',

        // ── DETAILED SPECIFICATIONS (product info) ──────────
        productInfo: [
          { name: 'Platform', info: 'Highly customizable system' },
          { name: 'Search', info: 'Integrated search out of the box' },
          { name: 'Dark Mode', info: 'Ready for other languages' },
          { name: 'Version', info: 'v1.0.0' },
        ],

        // ── SMALL DISCLAIMER (note) ─────────────────────────────────
        note: null,

        // ── CUSTOMER TESTIMONIAL (review) ─────────────────
        testimonial: {
          words: 'Amazing product! It completely transformed my daily workflow.',
          name: 'Jane Smith',
          website: 'https://janesmith.example.com',
          title: 'Early Adopter'
        },

        // ── CREATOR DETAILS (manufacturer) ───────────────────
        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: 'Digital product creator and solopreneur passionate about helping others streamline their digital workflows.'
        },

        // ── BRAND ───────────────────────────────────
        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: 'Empitling creators to turn their passion into a sustainable business.'
        }
      }).as('product_page_data').using(sessionStorage),

      // Getters mapping nested store properties to the component root scope
      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>

Change the text values, images, and links in the code block above to match your actual product.
Click Save and refresh your web page to see the results.

Enable Comments on Product Pages

To allow readers to leave comments or ask questions at the bottom of the page, simply add the internal tag #comment to the product page settings under Tags.

Automated Product SEO Schema

This layout automatically generates and injects the Product Schema structured data. No additional tags or manual setups are required to activate it.

Mobile Responsiveness

On smartphones, the sidebar box (price, checklist, buy button) automatically shifts to display directly below the product feature image, allowing mobile customers to purchase easily without scrolling to the bottom.

Video Autoplay on Product Pages

You can transform the static feature image of a product into an autoplaying video (Muted Autoplay) when visitors enter the page, while maintaining full performance and SEO optimization.

1. How to Set Up in Ghost Admin

When creating or editing a product page/post:

Upload the Feature Image as usual. This image acts as the immediate background poster (LCP Poster), ensuring optimized page loading speed.
Click the ⚙️ (Post Settings) button in the top right, scroll down to Feature Image Alt Text, and paste your video link directly.

Supported Video Formats:

YouTube: Full format https://www.youtube.com/watch?v=XXXXX or shortened format https://youtu.be/XXXXX.
Vimeo: Format https://vimeo.com/XXXXX.
Direct Video link (MP4/WebM): URL ending with the video extension, e.g., https://your-domain.com/assets/intro.mp4.

2. User Experience (UX) & Behavior

Progressive Loading: The static feature image loads immediately first. JavaScript then loads the video in the background. Once the video is ready to play, the static image fades out and the video starts playing automatically.
Autoplay Muted: The video plays muted by default, adhering to browser autoplay policies.
Audio Controls: A minimalist Glassmorphism toggle button automatically appears at the top right of the video, allowing users to turn the sound On/Off at any time.
Power & CPU Optimization (IntersectionObserver): When users scroll down and the video moves out of the viewport, the video automatically pauses. It resumes playing when scrolled back into view.

Image SEO: Search engine crawlers (like Googlebot) won’t see the video URL in the alt attribute. The template automatically replaces the image’s alt attribute with the Product Title in the rendered HTML.
Google Merchant Center: Structured data Schema (JSON-LD) continues to point to the original static image, ensuring smooth display on Google Shopping and Google Images.

Auto Product Schema

JSON-LD Product Schema is structured data following the schema.org/Product standard embedded into the page. This helps Google read and understand your product information to display Rich Results on search engine results pages (SERPs):

🏷️ Product Price displayed directly below the page title in search results.
🛒 Stock Status (In Stock).
⭐ Review Ratings (if available).
🔍 Merchant listings in Google Shopping.

[!IMPORTANT] Google only displays Rich Results when the schema is fully valid. Incorrect properties (such as using author instead of manufacturer) or missing identifiers (like sku) will cause Google to ignore the entire schema.

Output JSON-LD:

"brand": {
  "@type": "Brand",
  "name": "TanaFlows",
  "logo": "https://yoursite.com/logo.png",
  "url": "https://tanaflows.com",
  "description": "A modern learning platform"
}

Full Output JSON-LD Example

Example with price: '3.500.000 VND' along with both author and brand:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Tana Digital Brain",
  "url": "https://yoursite.com/en/product/tana-digital-brain/",
  "sku": "tana-digital-brain",
  "description": "Intelligent note-taking system built on top of Tana...",
  "image": "https://yoursite.com/content/images/product.jpg",
  "brand": {
    "@type": "Brand",
    "name": "TanaFlows",
    "logo": "https://yoursite.com/logo.png",
    "url": "https://tanaflows.com"
  },
  "offers": {
    "@type": "Offer",
    "price": "3500000",
    "priceCurrency": "VND",
    "url": "https://yoursite.com/en/product/tana-digital-brain/",
    "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"
  }
}

Testing Your Schema

After deploying, verify the implementation using these tools:

| Tool | URL | Purpose | |---|---|---| | Google Rich Results Test | search.google.com/test/rich-results | Confirms if your schema is eligible for search Rich Results | | Schema Markup Validator | validator.schema.org | Validates syntax compliance with schema.org | | Google Search Console | Enhancements → Products | Tracks index status and health after deployment |

Special Cases & Edge Cases

| Scenario | Behavior | |---|---| | price: null without author or brand | Schema is still injected with price: 0, defaulting brand to site name | | brand: null | Uses the Ghost site title ({{@site.title}}) as the default brand | | author: null | The manufacturer field is omitted entirely | | Missing feature_image | The image field is omitted | | price: '100% Free' | Matches free keywords first, ignoring the number 100 |