JSON-LD Schema 完整教學:答案引擎優化(AEO)必學嘅 FAQ / HowTo / LocalBusiness / Service 4 種標記

測試環境同日期： 本文範例喺 Node.js 20 + Next.js 16（App Router）測試通過，用 Google Rich Results Test 同 Schema.org Validator 驗證，最後更新 2026-08-23。JSON-LD 語法本身跨框架通用（WordPress、Webflow、純 HTML 一樣可用），但插入方式（server-render vs client inject）會因框架而異，下文會講點揀。

1. 幫未被發現嘅頁入 retrieval pool。 AI 爬蟲爬到你網站時，schema 等佢快速判斷「呢頁值唔值得放入索引/候選答案池」，冇 schema 唔代表爬唔到，但揀你嘅機會會低過有結構化提示嘅對手。
2. 餵 Knowledge Graph 做 entity disambiguation。 Organization/LocalBusiness schema 配合 sameAs 連返 Wikidata、Google Business Profile、LinkedIn，等 Gemini 呢類引擎清楚知道「呢個品牌名對應緊邊個實體」，減少估錯（hallucination）。

curl -A "GPTBot" https://你嘅domain.com/服務頁 | grep -c "application/ld+json"

// app/services/[slug]/page.tsx — Server Component，直接 render，唔用 next/script
export default function ServicePage() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "AI 搜尋優化診斷",
    provider: { "@type": "Organization", name: "Webka" },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      {/* 頁面其餘內容 */}
    </>
  );
}

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "JSON-LD schema 一定要用先可以被 AI 引用？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "唔一定，冇 schema 都可以被引用，但 schema 幫 AI 更快判斷你頁面內容分類，等於加快入索引池嘅速度，尤其對未被發現嘅新頁面幫助較大。"
      }
    },
    {
      "@type": "Question",
      "name": "一個頁面可以放幾多個 schema block？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "冇上限，但要每個 @type 對應返頁面實際存在嘅內容區塊，例如一個服務頁可以同時有 Service + FAQPage + BreadcrumbList 三個 schema block。"
      }
    }
  ]
}

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "點樣喺 Next.js 網站部署 JSON-LD Schema",
  "step": [
    {
      "@type": "HowToStep",
      "name": "確認 schema 類型",
      "text": "根據頁面內容性質，揀 FAQPage、HowTo、LocalBusiness 或 Service 其中一種或多種。"
    },
    {
      "@type": "HowToStep",
      "name": "喺 Server Component 度直接 render script tag",
      "text": "唔好用 next/script 或 useEffect 注入，確保 curl 攞到嘅 raw HTML 已含 schema。"
    },
    {
      "@type": "HowToStep",
      "name": "確保可見 HTML 有對應文字",
      "text": "schema 入面嘅每句答案，頁面畫面都要有幾乎一模一樣嘅可見文字。"
    },
    {
      "@type": "HowToStep",
      "name": "用工具驗證",
      "text": "用 Google Rich Results Test 或 Schema.org Validator 檢查語法有冇錯誤。"
    }
  ]
}

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "你間公司名",
  "image": "https://你嘅domain.com/logo.jpg",
  "telephone": "+852-xxxx-xxxx",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "你嘅街道地址",
    "addressLocality": "香港",
    "addressCountry": "HK"
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "09:00",
      "closes": "18:00"
    }
  ],
  "sameAs": [
    "https://www.facebook.com/你嘅專頁",
    "https://www.linkedin.com/company/你嘅公司"
  ]
}

{
  "@context": "https://schema.org",
  "@type": "Service",
  "serviceType": "AI 搜尋優化診斷",
  "provider": {
    "@type": "Organization",
    "name": "Webka",
    "url": "https://webka.hk"
  },
  "areaServed": {
    "@type": "AdministrativeArea",
    "name": "香港"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "HKD",
    "url": "https://aeo.weblnno.info"
  }
}

1. curl -A "GPTBot" 你嘅網址 | grep "application/ld+json" — 確認 raw HTML 有出現 schema，唔係要等 JS 執行先出現。
2. 貼去 Google Rich Results Test — 檢查語法有冇 error。
3. 貼去 Schema.org Validator — 交叉驗證。
4. 人手核對：schema 入面每句答案，喺頁面畫面度搵唔搵到幾乎一模一樣嘅可見文字。
5. 用 Chrome DevTools「Disable JavaScript」重新載入頁面 — 主要內容（包括 schema 覆蓋嘅答案）唔應該消失。