Question 217600 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – Custom Metadata depending on the language in Next.js

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 = {};
Tags:

2

Answers


  1. 0

    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 👈🏽

const englishMetadata = {
  title: "Hello Enlish Man",
};
const portugueseMetadata = {
  title: "Hello Portuguese Man",
};

export async function generateMetadata({ params }) {
  return params.lang === "en-US" ? englishMetadata : portugueseMetadata;
}

export default function Page() {}
    Login or Signup to reply.
  2. 0

    You can use or Dynamic metadata like this :

    export async function generateMetadata() {

    const {t} = await getTranslations(); // here use your way to get translation string

    return {
        title: t("appTitle"),
        description: t("appDescription")
    }
}

    Ref: https://nextjs.org/docs/app/api-reference/functions/generate-metadata

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search