Is there a way to provide custom Metadata to users based on the keywords from the search engine?

In order to improve SEO on my website, I'm trying to set up custom Metadata for both languages supported on my website: English and Portuguese. More specifically, provide the Next.js 13 Metadata API with some logic to achieve it.

Here's the code so far from the layout.tsx file:

...
const englishMetadata = {
  title: {
    default: "brand",
    template: "%s | brand.xyz",
  },
  description:
    "Some description",
  openGraph: {
    title: "brand",
    description:
      "Some description",
    url: "brand.xyz",
    siteName: "brand",
    type: "website",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  icons: {
    shortcut: "/favicon.png",
  },
  keywords:
    "events clothing, ...",
};

const portugueseMetadata = {
  title: {
    default: "Brand",
    template: "%s | brand.xyz",
  },
  description:
    "Alguma descrição",
  openGraph: {
    title: "brand",
    description:
      "Alguma descrição",
    url: "brand.xyz",
    siteName: "brand",
    type: "website",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  icons: {
    shortcut: "/favicon.png",
  },
  keywords:
    "eventos, vestuário, ...",
};

// export const metadata: Metadata = ? portugueseMetadata : englishMetadata;
export const metadata: Metadata = {};

Is there a way to provide custom Metadata to users based on the keywords from the search engine?

In order to improve SEO on my website, I'm trying to set up custom Metadata for both languages supported on my website: English and Portuguese. More specifically, provide the Next.js 13 Metadata API with some logic to achieve it.

Here's the code so far from the layout.tsx file:

...
const englishMetadata = {
  title: {
    default: "brand",
    template: "%s | brand.xyz",
  },
  description:
    "Some description",
  openGraph: {
    title: "brand",
    description:
      "Some description",
    url: "brand.xyz",
    siteName: "brand",
    type: "website",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  icons: {
    shortcut: "/favicon.png",
  },
  keywords:
    "events clothing, ...",
};

const portugueseMetadata = {
  title: {
    default: "Brand",
    template: "%s | brand.xyz",
  },
  description:
    "Alguma descrição",
  openGraph: {
    title: "brand",
    description:
      "Alguma descrição",
    url: "brand.xyz",
    siteName: "brand",
    type: "website",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  icons: {
    shortcut: "/favicon.png",
  },
  keywords:
    "eventos, vestuário, ...",
};

// export const metadata: Metadata = ? portugueseMetadata : englishMetadata;
export const metadata: Metadata = {};

• javascript
• reactjs
• typescript
• next.js
• seo

2 Answers 2

You could use the generateMetadata function. In an internalization setup where the URL param for the lang is called lang, it would be something like this:

// app/[lang]/page.js