javascript - Metadata tùy chỉnh phụ thuộc vào ngôn ngữ trong Next.js

Có cách nào để cung cấp Metadata tùy chỉnh cho người dùng dựa trên các từ khóa từ công cụ tìm kiếm không?

Để cải thiện SEO trên trang web của tôi, tôi đang cố gắng thiết lập Metadata tùy chỉnh cho cả hai ngôn ngữ được hỗ trợ trên trang web của tôi: tiếng Anh và tiếng Bồ Đào Nha. Cụ thể hơn, cung cấp cho Next.js 13 Metadata API một số logic để đạt được điều đó.

Đây là mã cho đến nay từ tệp layout.tsx:

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

Câu trả lời #1

Bạn có thể sử dụng hàm generateMetadata. Trong một thiết lập quốc tế hóa nơi tham số URL cho ngôn ngữ được gọi là lang, nó sẽ như sau:

// 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() {}

Câu trả lời #2

Bạn có thể sử dụng async metadata động như sau:

export async function generateMetadata() {

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

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

Tham khảo: https://nextjs.org/docs/app/api-reference/functions/generate-metadata