12  11. SEO — Metadata, JSON-LD, OG Images

12.0.1 Metadata Builder

ของจริงมี helper function ที่ reuse ได้:

// src/lib/seo.ts
export const siteConfig = {
  name: "MIMO",
  url: "https://mimoth.com",
  title: "MIMO | AI Tools Thailand",
  description: "MIMO คือคลังเครื่องมือ AI ภาษาไทยสำหรับค้นหา เปรียบเทียบ...",
  locale: "th_TH",
  language: "th-TH",
};

export function buildMetadata({ title, description, path, image, type, noIndex }) {
  const url = absoluteUrl(path);
  return {
    title,
    description,
    alternates: { canonical: url },
    openGraph: {
      title: `${title} | ${siteConfig.name}`,
      description, url, siteName: siteConfig.name,
      locale: siteConfig.locale, type,
      images: [{ url: image || defaultSocialImage, width: 1200, height: 630 }],
    },
    twitter: { card: "summary_large_image", title, description, images: [image || defaultSocialImage] },
    robots: noIndex ? { index: false, follow: false } : { index: true, follow: true },
  };
}

12.0.2 JSON-LD Helpers

createWebsiteJsonLd()        // WebSite schema — หน้า Home
createItemListJsonLd(name, path, items)  // ItemList — Tools, Guides, News listing
createToolJsonLd(tool)       // SoftwareApplication — tool detail
createGuideArticleJsonLd(guide) // Article + FAQ — guide detail
createNewsArticleJsonLd(article) // NewsArticle —ข่าว detail

12.0.3 Usage ในแต่ละหน้า

// tools/page.tsx
export const metadata = buildMetadata({
  title: "AI Tools Directory ภาษาไทย",
  description: "ค้นหาและกรองเครื่องมือ AI...",
  path: "/tools",
});

// ใน JSX
<JsonLd data={createItemListJsonLd("MIMO AI Tools Directory", "/tools", toolItems)} />

12.0.4 OG Image (Dynamic)

ของจริงใช้ Next.js OG image generation ที่ /opengraph-image.tsx — สร้างภาพ 1200×630 แบบ dynamic