Next.js Metadata Mastery: เสกเว็บให้ติด Search และหล่อเท่บน Social

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Awesome Blog',
  description: 'เรียนรู้ Programming ฉบับ Senior Developer',
  keywords: ['Next.js', 'React', 'Coding Tutorial'],
  openGraph: {
    title: 'My Awesome Blog',
    description: 'เรียนรู้ Programming ฉบับ Senior Developer',
    images: ['/og-image.png'], // รูปต้องอยู่ใน public folder
  },
}

export default function Page() {}

import type { Metadata } from 'next'
import { getPostBySlug } from '@/lib/markdown'

interface Props {
  params: { slug: string; category: string }
}

// 🪄 Magic Function: ทำงานที่ฝั่ง Server เท่านั้น
export async function generateMetadata(
  { params }: Props
): Promise<Metadata> {
  // 1. ดึงข้อมูลบทความ
  const post = await getPostBySlug(params.slug)

  if (!post) {
    return { title: 'Post Not Found' }
  }

  // 2. Return Metadata ที่สอดคล้องกับบทความ
  return {
    title: {
        absolute: post.metadata.title, // ใช้ Absolute เพื่อไม่ให้มี Template มาต่อท้าย
    },
    description: post.metadata.description,
    openGraph: {
      title: post.metadata.title,
      description: post.metadata.description,
      type: 'article',
      publishedTime: post.metadata.date,
      authors: [post.metadata.author || 'Nexis Team'],
      images: [
        {
          url: `/api/og?title=${encodeURIComponent(post.metadata.title)}`, // 🖼️ Dynamic Image!
          width: 1200,
          height: 630,
        }
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.metadata.title,
      description: post.metadata.description,
    },
  }
}

export default function Page({ params }: Props) {
    // ... render page content
}

import { ImageResponse } from 'next/og'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') || 'My Blog'

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 60,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        👋 {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}