How to Use Canonical Tags and Hreflang for in Next.js 15

I was building a client's multilingual website using Next.js and next-intl when I encountered a critical SEO challenge. While the site supported English, German, and Slovenian, the translated content wasn't unique enough yet—mostly machine translations and placeholder content. Publishing this as-is would trigger duplicate content penalties from Google, potentially tanking our search rankings.

After researching advanced international SEO strategies, I discovered the solution: strategic canonical tag implementation that consolidates SEO value while preserving multilingual infrastructure. This approach prevents duplicate content penalties during development while maintaining the ability to switch to self-referencing canonicals once unique content is ready.

If you're working with multilingual Next.js applications and need to handle SEO properly during the content development phase, this guide will show you exactly how to implement this advanced strategy.

Understanding Canonical Tags in Multilingual Context

Before diving into implementation, let's understand why canonical tags are crucial for multilingual sites and how they solve the duplicate content problem.

Canonical tags tell search engines which version of similar content should be considered the authoritative source. In multilingual contexts, you have two strategic options:

Self-referencing canonicals work when each language version has unique, valuable content. Each page points to itself as canonical, and hreflang tags help search engines understand language relationships.

Consolidating canonicals work when translations aren't unique enough yet. All language versions point to one authoritative version (typically English), preventing duplicate content penalties while hreflang tags maintain language discovery.

The key insight is that you can start with consolidating canonicals and gradually switch to self-referencing as you develop unique content for each language. This gives you the flexibility to launch multilingual infrastructure without SEO penalties.

Setting Up Strategic Metadata in Next.js 15

Next.js 15's generateMetadata function provides powerful tools for implementing this strategy. The alternates object handles both canonical and hreflang directives, while the robots directive controls indexing behavior.

Let's start with the homepage implementation:

// File: src/app/(intl)/[locale]/page.tsx
export async function generateMetadata({params}: {params: Promise<{locale: string}>}) {
  const {locale} = await params;
  const t = await getTranslations({locale, namespace: 'homepage.meta'});

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: 'https://buildwithmatija.com/',
      languages: {
        'en': 'https://buildwithmatija.com/',
        'de': 'https://buildwithmatija.com/de/',
        'sl': 'https://buildwithmatija.com/sl/',
        'x-default': 'https://buildwithmatija.com/',
      },
    },
    robots: locale !== 'en' ? 'noindex, follow' : 'index, follow',
  };
}

This implementation demonstrates the core strategy. The canonical URL always points to the English version regardless of the current locale, consolidating all SEO value to prevent duplicate content issues. The languages object maintains hreflang relationships so search engines can still discover alternate language versions. The robots directive allows non-English pages to be crawled for links but prevents them from being indexed.

The beauty of this approach is that search engines understand the relationship between your language versions while avoiding duplicate content penalties. Users searching in German or Slovenian may still find your English pages, but the hreflang tags help search engines serve the appropriate language version when available.

Implementing Across Page Types

Different page types require slightly different canonical URL structures while maintaining the same strategic approach. Let's implement this across various page types in your application.

For static pages like About and Contact:

// File: src/app/(intl)/[locale]/about/page.tsx
export async function generateMetadata({params}: {params: Promise<{locale: string}>}) {
  const {locale} = await params;
  const t = await getTranslations({locale, namespace: 'about.meta'});

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: 'https://buildwithmatija.com/about',
      languages: {
        'en': 'https://buildwithmatija.com/about',
        'de': 'https://buildwithmatija.com/de/uber-uns',
        'sl': 'https://buildwithmatija.com/sl/o-nas',
        'x-default': 'https://buildwithmatija.com/about',
      },
    },
    robots: locale !== 'en' ? 'noindex, follow' : 'index, follow',
  };
}

Notice how the language URLs reflect the localized slug structure while the canonical always points to the English version. This maintains your multilingual URL structure while consolidating SEO value.

Important: The hreflang URLs must include the language subdirectories (/de/ and /sl/) as they appear in your actual URL structure. While English pages can omit /en/ (defaulting to root), German and Slovenian pages must include their language prefixes to match your routing configuration.

For dynamic content sections like Services and Projects:

// File: src/app/(intl)/[locale]/services/page.tsx
export async function generateMetadata({params}: {params: Promise<{locale: string}>}) {
  const {locale} = await params;
  const t = await getTranslations({locale, namespace: 'services.meta'});

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: 'https://buildwithmatija.com/services',
      languages: {
        'en': 'https://buildwithmatija.com/services',
        'de': 'https://buildwithmatija.com/de/dienstleistungen',
        'sl': 'https://buildwithmatija.com/sl/storitve',
        'x-default': 'https://buildwithmatija.com/services',
      },
    },
    robots: locale !== 'en' ? 'noindex, follow' : 'index, follow',
  };
}

The pattern remains consistent: canonical consolidation to English, complete hreflang mapping for language discovery, and strategic robots directives. This approach scales across any number of pages and languages in your application.

Handling Nested Routes and Sub-pages

Service and project sub-pages require the same strategic approach with more specific URL structures. The implementation pattern scales naturally to deeper navigation levels.

For service sub-pages:

// File: src/app/(intl)/[locale]/services/web-app-development/page.tsx
export async function generateMetadata({params}: {params: Promise<{locale: string}>}) {
  const {locale} = await params;
  const t = await getTranslations({locale, namespace: 'services.webAppDevelopment.meta'});

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: 'https://buildwithmatija.com/services/web-app-development',
      languages: {
        'en': 'https://buildwithmatija.com/services/web-app-development',
        'de': 'https://buildwithmatija.com/de/dienstleistungen/web-app-entwicklung',
        'sl': 'https://buildwithmatija.com/sl/storitve/razvoj-spletnih-aplikacij',
        'x-default': 'https://buildwithmatija.com/services/web-app-development',
      },
    },
    robots: locale !== 'en' ? 'noindex, follow' : 'index, follow',
  };
}

Project pages follow the same pattern:

// File: src/app/(intl)/[locale]/projects/schnellsite/page.tsx
export async function generateMetadata({params}: {params: Promise<{locale: string}>}) {
  const {locale} = await params;
  const t = await getTranslations({locale, namespace: 'projects.schnellsite.meta'});

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: 'https://buildwithmatija.com/projects/schnellsite',
      languages: {
        'en': 'https://buildwithmatija.com/projects/schnellsite',
        'de': 'https://buildwithmatija.com/de/projekte/schnellsite',
        'sl': 'https://buildwithmatija.com/sl/projekti/schnellsite',
        'x-default': 'https://buildwithmatija.com/projects/schnellsite',
      },
    },
    robots: locale !== 'en' ? 'noindex, follow' : 'index, follow',
  };
}

This systematic approach ensures every page in your application follows the same SEO strategy. The pattern is predictable and maintainable, making it easy to apply across large applications with complex navigation structures.

Transitioning to Self-Referencing Canonicals

The power of this approach lies in its flexibility. Once you develop unique, valuable content for specific language versions, you can gradually transition those pages to self-referencing canonicals without affecting the rest of your site.

When you're ready to transition a page, simply update the metadata:

// File: src/app/(intl)/[locale]/about/page.tsx - After unique content development
export async function generateMetadata({params}: {params: Promise<{locale: string}>}) {
  const {locale} = await params;
  const t = await getTranslations({locale, namespace: 'about.meta'});

  // Determine canonical based on content uniqueness
  const canonicalUrl = locale === 'en' 
    ? 'https://buildwithmatija.com/about'
    : locale === 'de'
    ? 'https://buildwithmatija.com/de/uber-uns'  // Now self-referencing
    : 'https://buildwithmatija.com/about';   // Still consolidating

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: canonicalUrl,
      languages: {
        'en': 'https://buildwithmatija.com/about',
        'de': 'https://buildwithmatija.com/de/uber-uns',
        'sl': 'https://buildwithmatija.com/sl/o-nas',
        'x-default': 'https://buildwithmatija.com/about',
      },
    },
    robots: 'index, follow',  // Now allow indexing for unique content
  };
}

This graduated approach lets you optimize SEO on a page-by-page basis as your content matures, rather than making site-wide changes that might harm rankings.

Understanding the SEO Impact

This implementation strategy delivers measurable SEO benefits while preserving your multilingual infrastructure investment. By consolidating canonical signals to English pages, you prevent link equity dilution across similar content versions. Search engines treat your English pages as the authoritative source, building domain authority more effectively.

The hreflang implementation maintains language discovery capabilities, so users searching in German or Slovenian can still find your content through search engines' language preferences. The 'noindex, follow' directive allows search engines to crawl your non-English pages for internal linking signals without creating duplicate content issues.

Most importantly, this approach provides a clear migration path. As you develop unique content for each language, you can transition individual pages to self-referencing canonicals, gradually building language-specific authority without ever risking duplicate content penalties.

Implementation Checklist and Best Practices

When implementing this strategy across your multilingual Next.js application, follow this systematic approach to ensure complete coverage and consistent execution.

First, audit all your pages to ensure complete implementation. Every page with multilingual versions needs the canonical and robots metadata. This includes main navigation pages, nested routes, dynamic pages, and any special pages like sitemaps or contact forms.

Maintain consistent URL mapping across your hreflang declarations. Each language should have predictable URL structures that users and search engines can understand. If your German about page is '/uber-uns', ensure this mapping is consistent across all related references.

Monitor your implementation through Google Search Console to verify that search engines are interpreting your canonical and hreflang signals correctly. Look for any duplicate content warnings or indexing issues that might indicate implementation problems.

Document your transition criteria for when to switch from consolidating to self-referencing canonicals. This might include content uniqueness thresholds, translation quality standards, or business priorities for specific language markets.

This strategic approach to multilingual SEO represents advanced international optimization that prevents common pitfalls while preserving future flexibility. You've learned how to implement canonical consolidation to prevent duplicate content penalties, maintain language discovery through hreflang tags, and create a migration path for future content development.

The implementation scales across any size Next.js application and provides the foundation for sustainable multilingual growth. By consolidating SEO value during development phases and transitioning to self-referencing canonicals as content matures, you can build international presence without sacrificing search engine performance.

For more context on setting up the initial multilingual infrastructure this guide builds upon, check out our comprehensive guide on How to Make Your Next.js Website Multilingual with next-intl in 2025. For detailed API reference on the metadata options used here, see the Next.js generateMetadata documentation.

Let me know in the comments if you have questions about implementing this strategy in your own projects, and subscribe for more practical development guides covering advanced web development techniques.

Thanks, Matija