javascript - Next.js'te dile bağlı özel meta veriler

Arama motorundan elde edilen anahtar kelimelere göre kullanıcılara özel Meta verisi sağlamak için bir yol var mı?

Web sitemde SEO'yu geliştirmek için, sitemde desteklenen iki dil için özel Meta veriler ayarlamaya çalışıyorum: İngilizce ve Portekizce. Daha spesifik olarak, bunu başarmak için Next.js 13 Metadata API'sine bazı mantıklar sağlamayı amaçlıyorum.

İşte layout.tsx dosyasından şu ana kadar olan kod:

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

Cevap #1

generateMetadata fonksiyonunu kullanabilirsiniz. Lang için URL parametresinin lang olarak adlandırıldığı bir uluslararasılaştırma kurulumunda, bu şöyle olabilir:

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

Cevap #2

Bu şekilde async dinamik meta veriyi kullanabilirsiniz:

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

İlgili makaleler