Custom Metadata depending on the language in Next.js

Custom Metadata in Next.js: Providing Language-Specific SEO for Global Sites As developers striving to build globally accessible applications, optimizing...

2026-08-10

Custom Metadata in Next.js: Providing Language-Specific SEO for Global Sites

As developers striving to build globally accessible applications, optimizing Search Engine Optimization (SEO) across multiple languages is paramount. Simply translating content isn't enough; you need to provide unique, contextually relevant metadata—titles, descriptions, and keywords—for each language variant. This is a common challenge when working with internationalization (i18n), especially in modern frameworks like Next.js.

This guide will walk you through how to leverage the Next.js 13 Metadata API to dynamically provide custom SEO metadata based on the user's selected language, ensuring your site ranks effectively across different linguistic markets.

The Challenge of Internationalized Metadata

When dealing with multilingual sites, defining static metadata becomes cumbersome. If you define separate metadata objects for English and Portuguese, the challenge lies in determining which object to export dynamically based on the route segment (e.g., /en/page vs. /pt/page).

The core solution involves moving away from simple static exports and utilizing dynamic functions provided by Next.js, specifically generateMetadata, which allows you to fetch data based on the current request context—in this case, the locale.

Implementing Dynamic Metadata with Next.js

Instead of trying to conditionally assign a single object at the top level, the most robust approach is to implement metadata generation within the dynamic function. This gives you access to the route parameters, allowing for precise control over the output based on the detected language.

Here is how you can structure your layout.tsx or page component to handle this logic:

import { Metadata } from 'next';
  import { useLocale } from 'next-intl'; // Assuming you are using next-intl for i18n setup
  
  // Define the base metadata structures
  const englishMetadata = {
    title: {
      default: "Brand | brand.xyz",
      template: "%s | brand.xyz",
    },
    description: "Some description in English.",
    openGraph: {
      title: "Brand",
      description: "A great site in English.",
      url: "brand.xyz",
      siteName: "Brand",
      type: "website",
    },
    keywords: "events clothing, fashion, style",
  };
  
  const portugueseMetadata = {
    title: {
      default: "Marca | brand.xyz",
      template: "%s | brand.xyz",
    },
    description: "Alguma descrição em Português.",
    openGraph: {
      title: "Marca",
      description: "Um ótimo site em Português.",
      url: "brand.xyz",
      siteName: "Marca",
      type: "website",
    },
    keywords: "eventos, vestuário, moda",
  };
  
  export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
    const locale = params.locale;
  
    if (locale === 'pt') {
      return portugueseMetadata;
    }
  
    // Default to English if the locale is not Portuguese (or handle other locales)
    return englishMetadata;
  }
  
  // Note: In a real Next.js App Router setup, you would typically use this function 
  // inside a Server Component or layout file.

Breakdown and Best Practices

Dynamic Function (generateMetadata): By using generateMetadata, you instruct Next.js to execute this function on the server for every request that requires metadata generation. This is superior to static exports when content depends on runtime variables like locale.
Accessing Route Parameters: The function receives an object containing route parameters (params). We use params.locale to determine which set of metadata to return. If you are using a library like next-intl, this locale is readily available, making the logic clean and centralized.
Separation of Concerns: By defining your metadata objects separately (as shown above), you keep your SEO data organized. This makes maintenance significantly easier, especially when scaling to support more languages or regions.

This pattern ensures that the correct, localized metadata is injected into the <head> of the HTML document for each language variant. For robust application architecture, consider how separation of concerns applies to large projects; frameworks like those found in the wider ecosystem, such as Laravel and its associated tools, emphasize clear structure which translates well into Next.js development practices.

Conclusion

Providing custom metadata based on language is a crucial step for achieving true international SEO. By moving from static exports to dynamic functions like generateMetadata, you gain the necessary runtime context to tailor your SEO signals precisely. This approach not only solves your immediate problem with English and Portuguese localization but establishes a scalable pattern for handling any number of locales in your Next.js application. Embrace dynamic rendering, keep your data organized, and watch your global rankings improve.

Stefan

SEO engineer and Laravel developer. Building tools to help Laravel applications rank higher in search results.

Share this article

Back to Blog