How does the Metadata API work in Next.js (static and generateMetadata)?

// static (layout.tsx)
export const metadata = {
  title: { default: 'My Site', template: '%s | My Site' },
  description: 'Welcome',
};

// dynamic (blog/[slug]/page.tsx) — fetch deduped with the page
export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  return { title: post.title, openGraph: { images: [post.cover] } };
}