How do you add Open Graph and Twitter card metadata so your pages look good when shared on social media?

You include openGraph and twitter fields inside your metadata object, specifying an image, title, and description that social media platforms use to build an attractive preview card whenever someone shares a link to your page, rather than showing a plain, unstyled link.

export const metadata = {
  openGraph: {
    title: 'My Article',
    description: 'An interesting read about web development.',
    images: ['/og-image.jpg']
  },
  twitter: {
    card: 'summary_large_image'
  }
};