Next.js App Router Metadata Object

layout.tsx

const meta = {
  title: 'Travel x Family',
  description:
    'Travel x Family is a family friendly travel blog with an emphasis on food and adventure!',
  image: `${WEBSITE_HOST_URL}/og-preview.jpg`,
}

export const metadata: Metadata = {
  title: {
    template: '%s - Travel x Family',
    default: meta.title,
  },
  description: meta.description,
  openGraph: {
    title: meta.title,
    description: meta.description,
    url: WEBSITE_HOST_URL,
    locale: 'en-US',
    siteName: meta.title,
    type: 'website',
    images: [
      {
        url: meta.image,
      },
    ],
  },
  twitter: {
    title: meta.title,
    description: meta.description,
    images: meta.image,
    card: 'summary_large_image',
  },
  alternates: {
    canonical: WEBSITE_HOST_URL,
  },
}

export function createMetadata({
  description,
  slug,
  title,
}: {
  description: string
  slug: string
  title: string
}): Metadata {
  return {
    title,
    description,
    openGraph: {
      title,
      description,
      url: `${WEBSITE_HOST_URL}/posts/${slug}`,
      type: 'article',
    },
    twitter: {
      title,
      description,
    },
    alternates: {
      canonical: `${WEBSITE_HOST_URL}/posts/${slug}`,
    },
  }
}