Metadata API và SEO trong Next.js: generateMetadata, sitemap, robots, Open Graph?

// app/blog/[slug]/page.tsx
export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }, // Next 14: không phải Promise
): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug); // fetch cùng URL được dedupe với page
  return {
    title: post.title,
    description: post.summary,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  };
}

// app/sitemap.ts
export default async function sitemap() {
  return (await getPosts()).map((p) => ({ url: `https://x.com/blog/${p.slug}`, lastModified: p.updatedAt }));
}

• Metadata được merge theo thứ tự layout cha tới page; title.template đặt khuôn tiêu đề.
• fetch và hàm bọc cache() trong generateMetadata và page được dedupe.
• Metadata được stream sau shell nên không chặn render; bot vẫn nhận đủ thẻ trong HTML.