Different og-image based on language

Question

I tried something like this, but it doesn't work. What's the right approach?import { type Locale } from "@/lib/i18n.config";
import NextImage from "next/image";
import OGImageDE from "public/images/og-image-de.png";
import OGImageEN from "public/images/og-image-en.png";

export default async function Image({ params }: { params: { lang: Locale } }) {
  console.log(params)
  const src = params.lang === "de" ? OGImageDE : OGImageEN;
  return <NextImage src={src} alt="Locale-specific Open Graph image" />;
}

American black bear · Accepted Answer

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function// inside your generateMetadata
return {
    title: product.title,
    openGraph: {
      images: [locale === "de" ? "/de.jpg" :  "/en.jpg"],
    }

Different og-image based on language

1 Reply