Schema Markup Generator

ภาพรวม

งาน e-commerce ต้องการ structured data (JSON-LD) เพื่อให้ Google แสดง Rich Results เช่น star rating, ราคา และ availability ใน search results โปรเจกต์นี้เป็น form-based web tool ที่ generate JSON-LD แล้ว copy ไปใส่ใน HTML ได้เลย

สิ่งที่ทำแล้ว

• Product schema — form รับ name, brand, price, currency, availability, rating, reviewCount
• BreadcrumbList schema — รับ path เป็น text แล้ว generate JSON-LD อัตโนมัติ
• Organization schema — ชื่อ, URL, logo, contactPoint
• Live preview — แสดง JSON-LD แบบ formatted พร้อม syntax highlight
• Validator hint — แสดง required fields ที่ขาดด้วย color coding
• Copy button — copy JSON-LD ด้วยคลิกเดียว

ตัวอย่าง Output

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Akrapovic Titanium Exhaust",
  "brand": { "@type": "Brand", "name": "Akrapovic" },
  "offers": {
    "@type": "Offer",
    "price": "45000",
    "priceCurrency": "THB",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "12"
  }
}

กำลังทำ

• FAQ schema generator — สำหรับหน้า FAQ ที่ต้องการ accordion Rich Result
• HowTo schema — step-by-step installation guides
• Batch mode — paste CSV product data แล้ว generate JSON-LD หลายรายการพร้อมกัน

เทคโนโลยี

• Vanilla HTML/CSS/JS (ไม่มี framework — ง่ายกว่าสำหรับ tool เล็กๆ)
• CodeMirror สำหรับ JSON preview พร้อม syntax highlight
• Clipboard API สำหรับ copy button