How to add metadata and SEO in Next.js?

// app/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home | My App',
  description: 'Welcome to my application',
  keywords: ['Next.js', 'React', 'JavaScript'],
  openGraph: {
    title: 'My App',
    description: 'Welcome to my application',
    images: ['/og-image.jpg'],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My App',
    images: ['/twitter-image.jpg'],
  },
};

export default function Home() {
  return <h1>Home</h1>;
}

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

type Props = { params: { slug: string } };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      images: [post.coverImage],
    },
  };
}

export default function BlogPost({ params }: Props) {
  // ...
}

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | My App',
    default: 'My App',
  },
};

// app/about/page.tsx
export const metadata = { title: 'About' };
// Results in: "About | My App"