Czy hreflang zastępuje canonical?

Nie. Hreflang wskazuje alternatywne wersje językowe lub regionalne, a canonical wskazuje kanoniczny adres danej wersji. Oba mechanizmy powinny ze sobą współpracować.

Czy każda wersja językowa musi linkować do pozostałych?

Tak, konfiguracja hreflang powinna być wzajemna. Jeśli wersja polska wskazuje angielską, wersja angielska powinna wskazywać polską oraz samą siebie.

Gdzie najlepiej obsłużyć hreflang w Next.js?

Najczęściej w Metadata API oraz w sitemapie, zależnie od struktury routingu. Kluczowe jest, żeby adresy były spójne z canonicalami i realnie dostępne.

Czy hreflang wpływa na ranking?

Hreflang nie jest czynnikiem rankingowym i nie ma wpływu na poprawę pozycji, ale poprawia trafność wyświetlanej wersji, co wpływa na CTR i doświadczenie użytkownika. Jeśli miałby jakikolwiek wpływ to pośredni.

Czy muszę mieć osobne domeny dla języków?

Nie, podfoldery (`/pl/`, `/en/`) z hreflang to rekomendowane przez Google podejście, a osobne domeny (.pl, .com) to opcja raczej dla dużych marek.

Co jeśli mam tylko jeden język?

Nie potrzebujesz hreflang, jedynie ustaw canonical na każdej stronie — eliminuje duplikaty z parametrów URL i trailing slashy.

Hreflang i canonical w Next.js — SEO wielojęzycznych stron bez duplikacji

Czym jest hreflang i dlaczego jest krytyczny?

to atrybut HTML, który informuje Google, która wersja językowa strony jest przeznaczona dla danego regionu lub języka. Bez hreflang Google może wyświetlić polską wersję użytkownikowi anglojęzycznemu lub potraktować wersje językowe jako duplikaty (kanibalizacja). Może też indeksować tylko jedną wersję. Krótko mówiąc: bez hreflang czeka nas bałagan, podczas gdy hreflang wprowadza kontrolę i porządek.

(link rel="canonical") wskazuje „źródłową" wersję strony i w ten sposób eliminuje duplikaty wynikające z parametrów URL, trailing slashy, czy wariantów http/https. Oba tagi "współpracują" ze sobą, ponieważ hreflang łączy wersje językowe, canonical wyznacza kanoniczną wersję w każdym języku.

Hreflang w Next.js App Router — Metadata API

Code

// app/[locale]/page.tsx
import type { Metadata } from 'next'
 
const locales = ['pl', 'en', 'de']
const baseUrl = 'https://strivelab.pl'
 
// Polska wersja na rootu domeny, pozostałe języki z prefiksem
const getLocaleUrl = (locale: string, path = '') =>
  locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>
}): Promise<Metadata> {
  const { locale } = await params
 
  return {
    alternates: {
      canonical: getLocaleUrl(locale),
      languages: {
        pl: baseUrl,
        en: `${baseUrl}/en`,
        de: `${baseUrl}/de`,
        'x-default': baseUrl,
      },
    },
  }
}

Wynikowy HTML:

Code

<link rel="canonical" href="https://strivelab.pl/" />
<link rel="alternate" hreflang="pl" href="https://strivelab.pl/" />
<link rel="alternate" hreflang="en" href="https://strivelab.pl/en" />
<link rel="alternate" hreflang="de" href="https://strivelab.pl/de" />
<link rel="alternate" hreflang="x-default" href="https://strivelab.pl/" />

Polska wersja działa na rootu domeny (https://strivelab.pl/) bez prefiksu /pl — domena .pl już precyzuje rynek. Pozostałe języki mają własny prefiks (/en, /de). Kluczową zasadą jest by canonical, hreflang, i linkowanie wewnętrzne były konsekwentnie używane wobec tego samego wariantu URL.

Diagram

Poprawna relacja canonical i hreflang dla wersji językowych

Dynamiczne strony z parametrami

Code

// app/[locale]/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>
}): Promise<Metadata> {
  const { locale, slug } = await params
  const post = await getPost(slug, locale)
 
  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: getLocaleUrl(locale, `/blog/${slug}`),
      languages: Object.fromEntries(
        locales.map((l) => [
          l,
          getLocaleUrl(l, `/blog/${post.slugs[l] || slug}`),
        ]),
      ),
    },
  }
}

Jeśli slugi są tłumaczone (/pl/blog/jak-zbudowac-strone vs /en/blog/how-to-build-website), każda wersja językowa musi wskazywać na poprawny slug w danym języku.

Canonical — eliminacja duplikacji

Trailing slash

Code

// next.config.ts
const nextConfig = {
  trailingSlash: false, // Wymuś brak trailing slash
}

Dodatkowo w pliku middleware.ts:

Code

if (pathname.length > 1 && pathname.endsWith('/')) {
  return NextResponse.redirect(new URL(pathname.slice(0, -1), request.url), 308)
}

Parametry URL

Strona /products i /products?sort=price to ta sama treść. Canonical powinien wskazywać wersję bez parametrów:

Code

export const metadata: Metadata = {
  alternates: {
    canonical: '/products', // Bez ?sort=, ?page=, ?filter=
  },
}

www vs non-www

Wybierz jedną wersję i przekieruj drugą. W Vercel — konfiguracja domeny. Na VPS — nginx redirect:

Code

server {
    server_name www.strivelab.pl;
    return 301 https://strivelab.pl$request_uri;
}

Helper do generowania alternates

Code

// lib/seo.ts
const baseUrl = 'https://strivelab.pl'
const locales = ['pl', 'en'] as const
 
const getLocaleUrl = (locale: (typeof locales)[number], path: string) =>
  locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
export function generateAlternates(
  locale: (typeof locales)[number],
  localizedPaths: Record<(typeof locales)[number], string>,
) {
  const languages = Object.fromEntries(
    locales.map((l) => [l, getLocaleUrl(l, localizedPaths[l])]),
  )
 
  return {
    canonical: getLocaleUrl(locale, localizedPaths[locale]),
    languages: {
      ...languages,
      'x-default': `${baseUrl}${localizedPaths.pl}`,
    },
  }
}

Code

// Użycie
export async function generateMetadata(): Promise<Metadata> {
  return {
    alternates: generateAlternates('pl', {
      pl: '/uslugi',
      en: '/services',
    }),
  }
}

Sitemap wielojęzyczna z alternates

Code

// app/sitemap.ts
import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://strivelab.pl'
  const locales = ['pl', 'en'] as const
 
  const getLocaleUrl = (locale: string, path: string) =>
    locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
  const pages = [
    { plPath: '', enPath: '' },
    { plPath: '/uslugi', enPath: '/services' },
    { plPath: '/kontakt', enPath: '/contact' },
    { plPath: '/blog', enPath: '/blog' },
  ]
 
  return pages.flatMap((page) =>
    locales.map((locale) => ({
      url: getLocaleUrl(locale, locale === 'pl' ? page.plPath : page.enPath),
      lastModified: new Date(),
      alternates: {
        languages: Object.fromEntries(
          locales.map((l) => [
            l,
            getLocaleUrl(l, l === 'pl' ? page.plPath : page.enPath),
          ]),
        ),
      },
    })),
  )
}

Typowe błędy hreflang

1. Brakujący x-default

x-default wskazuje wersję dla użytkowników, których język nie jest obsługiwany. Warto zaznaczyć, że nie jest to obowiązkowe w każdym projekcie, ale zwykle warto go dodać, jeśli masz stronę domyślną albo selektor języka.

2. Brak wzajemności (reciprocal links)

Jeśli strona PL wskazuje na EN, to EN musi wskazywać z powrotem na PL. W wypadku braku wzajemności = Google ignoruje hreflang.

3. Canonical i hreflang wskazują na różne URL-e

Canonical powinien wskazywać na siebie (w danym języku), nie na inną wersję językową. Każda wersja językowa ma własny canonical.

4. Hreflang na stronach z noindex

Jeśli strona ma atrybut noindex, wtedy hreflang jest ignorowany.

Weryfikacja

Google Search Console → inspekcja konkretnych URL-i i raport indeksowania,
Ahrefs / Screaming Frog — audyt hreflang na dużą skalę,
Ręczne sprawdzenie — View Source → szukaj rel="alternate" hreflang.

Czym jest hreflang i dlaczego jest krytyczny?

Hreflang w Next.js App Router — Metadata API

Code

// app/[locale]/page.tsx
import type { Metadata } from 'next'
 
const locales = ['pl', 'en', 'de']
const baseUrl = 'https://strivelab.pl'
 
// Polska wersja na rootu domeny, pozostałe języki z prefiksem
const getLocaleUrl = (locale: string, path = '') =>
  locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>
}): Promise<Metadata> {
  const { locale } = await params
 
  return {
    alternates: {
      canonical: getLocaleUrl(locale),
      languages: {
        pl: baseUrl,
        en: `${baseUrl}/en`,
        de: `${baseUrl}/de`,
        'x-default': baseUrl,
      },
    },
  }
}

Wynikowy HTML:

Code

<link rel="canonical" href="https://strivelab.pl/" />
<link rel="alternate" hreflang="pl" href="https://strivelab.pl/" />
<link rel="alternate" hreflang="en" href="https://strivelab.pl/en" />
<link rel="alternate" hreflang="de" href="https://strivelab.pl/de" />
<link rel="alternate" hreflang="x-default" href="https://strivelab.pl/" />

Diagram

Poprawna relacja canonical i hreflang dla wersji językowych

Dynamiczne strony z parametrami

Code

// app/[locale]/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>
}): Promise<Metadata> {
  const { locale, slug } = await params
  const post = await getPost(slug, locale)
 
  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: getLocaleUrl(locale, `/blog/${slug}`),
      languages: Object.fromEntries(
        locales.map((l) => [
          l,
          getLocaleUrl(l, `/blog/${post.slugs[l] || slug}`),
        ]),
      ),
    },
  }
}

Jeśli slugi są tłumaczone (/pl/blog/jak-zbudowac-strone vs /en/blog/how-to-build-website), każda wersja językowa musi wskazywać na poprawny slug w danym języku.

Canonical — eliminacja duplikacji

Trailing slash

Code

// next.config.ts
const nextConfig = {
  trailingSlash: false, // Wymuś brak trailing slash
}

Dodatkowo w pliku middleware.ts:

Code

if (pathname.length > 1 && pathname.endsWith('/')) {
  return NextResponse.redirect(new URL(pathname.slice(0, -1), request.url), 308)
}

Parametry URL

Strona /products i /products?sort=price to ta sama treść. Canonical powinien wskazywać wersję bez parametrów:

Code

export const metadata: Metadata = {
  alternates: {
    canonical: '/products', // Bez ?sort=, ?page=, ?filter=
  },
}

www vs non-www

Wybierz jedną wersję i przekieruj drugą. W Vercel — konfiguracja domeny. Na VPS — nginx redirect:

Code

server {
    server_name www.strivelab.pl;
    return 301 https://strivelab.pl$request_uri;
}

Helper do generowania alternates

Code

// lib/seo.ts
const baseUrl = 'https://strivelab.pl'
const locales = ['pl', 'en'] as const
 
const getLocaleUrl = (locale: (typeof locales)[number], path: string) =>
  locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
export function generateAlternates(
  locale: (typeof locales)[number],
  localizedPaths: Record<(typeof locales)[number], string>,
) {
  const languages = Object.fromEntries(
    locales.map((l) => [l, getLocaleUrl(l, localizedPaths[l])]),
  )
 
  return {
    canonical: getLocaleUrl(locale, localizedPaths[locale]),
    languages: {
      ...languages,
      'x-default': `${baseUrl}${localizedPaths.pl}`,
    },
  }
}

Code

// Użycie
export async function generateMetadata(): Promise<Metadata> {
  return {
    alternates: generateAlternates('pl', {
      pl: '/uslugi',
      en: '/services',
    }),
  }
}

Sitemap wielojęzyczna z alternates

Code

// app/sitemap.ts
import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://strivelab.pl'
  const locales = ['pl', 'en'] as const
 
  const getLocaleUrl = (locale: string, path: string) =>
    locale === 'pl' ? `${baseUrl}${path}` : `${baseUrl}/${locale}${path}`
 
  const pages = [
    { plPath: '', enPath: '' },
    { plPath: '/uslugi', enPath: '/services' },
    { plPath: '/kontakt', enPath: '/contact' },
    { plPath: '/blog', enPath: '/blog' },
  ]
 
  return pages.flatMap((page) =>
    locales.map((locale) => ({
      url: getLocaleUrl(locale, locale === 'pl' ? page.plPath : page.enPath),
      lastModified: new Date(),
      alternates: {
        languages: Object.fromEntries(
          locales.map((l) => [
            l,
            getLocaleUrl(l, l === 'pl' ? page.plPath : page.enPath),
          ]),
        ),
      },
    })),
  )
}

Typowe błędy hreflang

1. Brakujący x-default

2. Brak wzajemności (reciprocal links)

Jeśli strona PL wskazuje na EN, to EN musi wskazywać z powrotem na PL. W wypadku braku wzajemności = Google ignoruje hreflang.

3. Canonical i hreflang wskazują na różne URL-e

Canonical powinien wskazywać na siebie (w danym języku), nie na inną wersję językową. Każda wersja językowa ma własny canonical.

4. Hreflang na stronach z noindex

Jeśli strona ma atrybut noindex, wtedy hreflang jest ignorowany.

Weryfikacja

Google Search Console → inspekcja konkretnych URL-i i raport indeksowania,
Ahrefs / Screaming Frog — audyt hreflang na dużą skalę,
Ręczne sprawdzenie — View Source → szukaj rel="alternate" hreflang.

Hreflang i canonical w Next.js — SEO wielojęzycznych stron bez duplikacji

Czym jest hreflang i dlaczego jest krytyczny?

Hreflang w Next.js App Router — Metadata API

Dynamiczne strony z parametrami

Canonical — eliminacja duplikacji

Trailing slash

Parametry URL

www vs non-www

Helper do generowania alternates

Sitemap wielojęzyczna z alternates

Typowe błędy hreflang

1. Brakujący x-default

2. Brak wzajemności (reciprocal links)

3. Canonical i hreflang wskazują na różne URL-e

4. Hreflang na stronach z noindex

Weryfikacja

Czytaj dalej

Hreflang i canonical w Next.js — SEO wielojęzycznych stron bez duplikacji

Czym jest hreflang i dlaczego jest krytyczny?

Hreflang w Next.js App Router — Metadata API

Dynamiczne strony z parametrami

Canonical — eliminacja duplikacji

Trailing slash

Parametry URL

www vs non-www

Helper do generowania alternates

Sitemap wielojęzyczna z alternates

Typowe błędy hreflang

1. Brakujący x-default

2. Brak wzajemności (reciprocal links)

3. Canonical i hreflang wskazują na różne URL-e

4. Hreflang na stronach z noindex

Weryfikacja

Czytaj dalej