Kompletan vodič za Hreflang 2026 (sa Next.js primerima)

Vaš veb-sajt može biti tehnički savršen na engleskom, a ipak nevidljiv većini sveta.

Engleski pokriva samo 49,7% celokupnog veb-sadržaja (W3Techs, maj 2026). To znači da druga polovina veba funkcioniše na drugim jezicima — a bez pravog signala, Google mora da pogađa koja verzija vaše stranice pripada kojoj publici. Vaši nemački posetioci dobijaju stranicu na engleskom. Odbijaju se. Gubite konverziju.

Hreflang je HTML atribut koji ovo rešava. A on je pokvaren na većini višejezičnih sajtova.

U ovom vodiču ćemo proći kroz to šta je hreflang, kako ga napisati bez uobičajenih grešaka koje većinu programera zbunjuju, i tačno kako ga implementirati u Next.js 15 App Router projektu — uključujući obrasce koje koristimo pri upravljanju sa 10 jezičkih varijanti u višejezičnim verzijama.

Ključni zaključci

• 58% višejezičnih veb-sajtova ima interne hreflang konflikte u svom izvornom kodu (Semrush, 2023)
• 76% onlajn kupaca preferira kupovinu na svom maternjem jeziku — 40% uopšte neće kupiti sa sajta na drugom jeziku (CSA Research, 2020)
• Google tretira hreflang kao nagoveštaj, a ne direktivu — nepouzdane oznake se ignorišu, ali problem dupliranog sadržaja ostaje
• U Next.js 15 App Routeru, alternates.languages unutar generateMetadata() je ispravna metoda implementacije bez zavisnosti
• 96% sajtova sa hreflang konfliktima nedostaje oznaka za samoreferenciranje — jedno jednostavno izostavljanje lomi ceo klaster (Semrush, 2023)

Šta je Hreflang i zašto je važan za vaše rangiranje?

Samo 25,9% korisnika interneta prvenstveno pretražuje onlajn na engleskom (Internet World Stats preko Vikipedije, 2025). Ipak, Google-ov posao je da svakom korisniku servira sadržaj na njegovom jeziku — a bez hreflanga, mora da pogađa samo na osnovu kontekstualnih signala. Hreflang je HTML atribut koji Google-u precizno govori koju jezičku i regionalnu verziju stranice da prikaže kom korisniku.

Osnovna sintaksa izgleda ovako:

``html ``

Ovaj blok mora da se pojavi na svim jezičkim verzijama stranice — uključujući i englesku verziju koja se povezuje sama sa sobom. Propustite to samoreferenciranje na jednoj stranici i ceo hreflang klaster za taj URL postaje nepouzdan u Google-ovim očima.

Zašto je ispravno postavljanje ovoga važno za komercijalne rezultate? Istraživanje CSA Research-a sprovedeno na 8.709 potrošača u 29 zemalja pokazalo je da 76% preferira kupovinu proizvoda sa informacijama na svom maternjem jeziku, a 65% bi izabralo stranicu na maternjem jeziku čak i ako je kvalitet prevoda niži od alternative na engleskom jeziku (CSA Research "Can't Read, Won't Buy", 2020). Hreflang ne samo da pomaže u rangiranju — on određuje da li prevedeni saobraćaj konvertuje.

Stopa internih konflikata od 58% je zapanjujuća, ali je osnovni uzrok skoro uvek isti: programeri dodaju hreflang u šablon engleske stranice i zaborave da preslikaju ceo klaster na prevedene stranice. Nedostajuća samoreferenca na nemačkoj stranici poništava vezu koja je Google-u potrebna da potvrdi da su engleska i nemačka stranica autentične varijante jedna druge — a ne duplikati.

Kako Google zapravo koristi Hreflang?

Evo šta većina hreflang vodiča propušta: Google je potvrdio da se hreflang oznake tretiraju kao nagoveštaji, a ne direktive. Google neće kažnjavati pokvaren hreflang — tiho će ignorisati oznake koje smatra nepouzdanim. Opasnost leži u onome što se dešava bez nagoveštaja: Google tretira vaše jezičke varijante kao zasebne stranice koje se takmiče za istu ključnu reč, često prikazujući pogrešan jezik pretraživačima ili stvarajući situaciju dupliranog sadržaja koji se sam sa sobom takmiči.

Recipročni zahtev je osnovno pravilo. Svaka jezička verzija stranice mora da sadrži hreflang oznake koje ukazuju na sve druge verzije, uključujući i samu sebe. Ako vaša engleska stranica linkuje ka nemačkoj stranici, ali nemačka stranica ne linkuje nazad ka engleskoj stranici, klaster je pokvaren.

Šta Google validira na svakoj hreflang oznaci: - Vrednost hreflang odgovara stvarnom jeziku povezane stranice - href je apsolutni kanonski URL — relativni URL-ovi tiho ne uspevaju - Sve stranice u klasteru se međusobno referenciraju dvosmerno

Nepodudarnost jezika — deklarisanje hreflang="de" na stranici koja je zapravo na engleskom — signalizira Google-u da vaše celokupno hreflang podešavanje može biti nepouzdano. Semrush studija je otkrila da 21% višejezičnih sajtova ima ovaj problem (Semrush, 2023). Ovo se obično dešava kada stranica još nije prevedena, ali i dalje nosi hreflang oznake koje ukazuju na engleski sadržaj.

Kako pravilno napisati Hreflang atribute

Deo hreflanga koji je najpodložniji greškama nije naziv atributa — to je vrednost jezičkog koda. Semrush studija je otkrila da 15% višejezičnih sajtova koristi nevažeće formate hreflang kodova, obično zbog brkanja separatora ili mešanja jezičkih i kodova zemalja (Semrush, 2023).

Pravila: - Koristite ISO 639-1 dvo-slovne jezičke kodove: en, de, fr, sv - Opciono kombinujte sa ISO 3166-1 Alpha-2 kodovima zemalja koristeći crticu: en-GB, de-CH, pt-BR - Nikada ne koristite donje crte — en_US je pogrešno; en-US je ispravno - Uvek uključite x-default za rezervnu stranicu

Željeni jezik	Ispravan hreflang	Uobičajena pogrešna vrednost
Engleski (globalno)	en	en-EN, english
Engleski (UK)	en-GB	en_GB, eng-UK
Nemački (Nemačka)	de	ger, de_DE sa donjom crtom
Nemački (Švajcarska)	de-CH	ch, de_CH sa donjom crtom
Švedski	sv	sw, swe
Norveški Bokmål	nb	no
Portugalski (Brazil)	pt-BR	pt_BR sa donjom crtom
Rezervna stranica / selektor	x-default	default, x_default

Švedski i norveški unosi su najčešće pogrešno shvaćeni. ISO 639-1 kod za švedski je sv, a ne sw. Norveški ima dva pisana standarda: nb (Bokmål) i nn (Nynorsk). Većina norveških sajtova bi trebalo da koristi nb. Korišćenje no u hreflangu je tehnički netačno — ne mapira se na važeći IANA jezički podtag.

Švajcarski nemački zaslužuje posebnu napomenu: ch je kod zemlje Švajcarske, a ne jezički kod. Vrednost hreflanga za švajcarski nemački sadržaj je de-CH. Korišćenje samog ch kao hreflang vrednosti je nevažeće i biće ignorisano.

Kako implementirati Hreflang u Next.js 15 App Routeru

Next.js 15 App Router čini implementaciju hreflanga čistom i izvornom za framework — nisu potrebni paketi za SEO trećih strana. Upravljamo sa 10 jezičkih varijanti u našim višejezičnim verzijama (engleski, finski, francuski, nemački, italijanski, norveški, švajcarski nemački, srpski, španski i švedski) i obrazac ispod je ono što koristimo u produkciji.

Ključ je polje alternates.languages unutar generateMetadata(). Next.js ga automatski renderuje kao oznake u , bez potrebe za prilagođenim renderovanjem.

Korak 1: Izgradite eksplicitno mapiranje jezičkih kodova

Vaši interni jezički ključevi URL-ova ne poklapaju se uvek sa ISO hreflang kodovima. Izgradite eksplicitnu mapu da biste izbegli greške u radu:

``typescript // src/lib/hreflang.ts export const HREFLANG_CODE: Record = { en: 'en', fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'nb', // Norwegian Bokmål — ISO hreflang code is nb, not no ch: 'de-CH', // Swiss German — URL prefix /ch, hreflang value de-CH sr: 'sr', es: 'es', sw: 'sv', // Swedish — internal key sw, ISO hreflang code sv }; ``

Dve stvarne zamke u produkciji: hreflang vrednost za norveški je nb, a ne no. A ISO kod za švedski je sv — korišćenje sw (što je interno pogodno kao prefiks tabele baze podataka) u hreflang atributu je nevažeće. Ova eksplicitna mapa je ono što sprečava da te greške dospeju u produkciju.

Korak 2: Izgradite centralizovanu getAlternates pomoćnu funkciju

```typescript // src/lib/hreflang.ts (continued) const BASE_URL = 'https://fridamarketing.com'; const LANG_CODES = ['fi', 'fr', 'de', 'it', 'no', 'ch', 'sr', 'es', 'sw']; // URL prefix for each lang key (ch → no prefix needed? no → /no) const LANG_URL: Record = { fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'no', ch: 'ch', sr: 'sr', es: 'es', sw: 'sv', };

export function getAlternates(routeKey: string, currentLang?: string) { const languages: Record = { en: `${BASE_URL}/${routeKey}`, };

for (const lang of LANG_CODES) { const urlPrefix = LANG_URL[lang]; const hreflangCode = HREFLANG_CODE[lang]; languages[hreflangCode] = `${BASE_URL}/${urlPrefix}/${routeKey}`; }

const canonical = currentLang ? `${BASE_URL}/${LANG_URL[currentLang] || currentLang}/${routeKey}` : `${BASE_URL}/${routeKey}`;

return { canonical, languages: { ...languages, 'x-default': `${BASE_URL}/${routeKey}` }, }; } ```

Korak 3: Koristite je unutar generateMetadata()

Za englesku stranicu:

```typescript // app/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata() { return { title: 'About Us | Frida Marketing', description: 'Next.js development and multilingual SEO agency.', alternates: getAlternates('about'), }; } ```

Za jezičke varijante:

```typescript // app/[lang]/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata({ params }: { params: { lang: string } }) { return { title: 'About Us | Frida Marketing', description: 'Next.js development and multilingual SEO agency.', alternates: getAlternates('about', params.lang), }; } ```

Next.js automatski kompajlira objekat alternates.languages u kompletan skup oznaka. Svaki jezik, uključujući samoreferencu za trenutnu stranicu, ispravno se renderuje sve dok je mapiranje kompletno.

Prema istraživanju DeepL-a i Regina Corso Consulting-a sprovedenom među višim marketinškim stručnjacima u SAD-u, Nemačkoj, Japanu i Francuskoj, 96% je prijavilo pozitivan ROI od napora za prevođenje i lokalizaciju, a 65% je prijavilo povrat od 3x ili više (BusinessWire, 2024). Tehnički troškovi ispravnog hreflanga su skromni u poređenju sa prihodima koji su iza njega zaključani.

Koju Hreflang metodu treba da koristite?

Postoje tri načina za deklarisanje hreflanga: HTML oznake, unosi u XML sitemap-u ili HTTP zaglavlja odgovora. Sva tri su važeća za Google — pravi izbor zavisi od vašeg steka i obima sadržaja.

Metoda	Kako funkcioniše	Najbolje za
HTML oznake	ubrizgano u svake stranice	Next.js App Router preko generateMetadata()
XML sitemap	unutar svakog bloka u sitemap.xml	Sajtovi kojima upravlja CMS, veliki obim stranica
HTTP zaglavlja	Link: zaglavlje u odgovoru servera	Sadržaj koji nije HTML (PDF-ovi, JSON krajnje tačke)

Za Next.js, pristup generateMetadata() je pravi podrazumevani izbor. On drži hreflang deklaracije zajedno sa logikom stranice, proverava se tip u vreme izgradnje i ne zahteva odvojeno održavanje sitemap-a. Pristup sitemap-u je koristan dodatak na velikim sajtovima, ali ne bi trebalo da bude jedini izvor hreflanga kada ga framework nativno podržava.

Jedna stvar koju vredi napomenuti: možete deklarisati hreflang i u oznakama i u sitemap-u na istom sajtu. Google prihvata oba i oni se ne sukobljavaju. Ali održavanje dva izvora istine za iste podatke je nešto što treba izbegavati — držite ga u generateMetadata() i neka sitemap zasebno upravlja prioritetom indeksiranja.

Kako testirati i validirati vašu Hreflang postavku

Implementacija hreflanga je pola posla. Validacija da ga je Google ispravno preuzeo je druga polovina. Ova četiri alata pokrivaju različite režime grešaka — koristite bar dva.

Google Search Console — Izveštaj o međunarodnom ciljanju Nakon implementacije, otvorite GSC → Stari alati → Međunarodno ciljanje. Prikazuje koje jezičke varijante je Google indeksirao i označava sve greške u konfiguraciji hreflanga koje je otkrio. Ovo je vaša osnovna istina — ako GSC pokaže podignutu zastavicu jezika ili regiona, istražite pre bilo čega drugog.

Semrush Site Audit Pokrenite potpunu reviziju i filtrirajte probleme sa hreflangom. Semrush hvata nedostajuće samoreference, pokvarene hreflang URL-ove i nepodudarnosti jezika — tri najčešća režima grešaka na 20.000 testiranih sajtova.

Ahrefs Site Audit Ahrefs izveštava o tome koje stranice nedostaju iz kompletnog hreflang klastera, što je dragoceno kada imate 10 jezika i trebate da potvrdite da se svaka varijanta međusobno referencira sa svim ostalima. Pronalazi propuste koje Semrush ponekad propusti.

hreflang.org — besplatni proveravač pojedinačnih URL-ova Nalepite URL, prikažite sve njegove hreflang oznake i proverite da li je klaster recipročan. Brzo za jednokratne provere tokom razvoja pre potpune revizije sajta.

Jedna stvar koju alati za reviziju neće uhvatiti: hreflang koji je tehnički validan, ali semantički pogrešan. Ako deklarirate hreflang="de-CH" na stranici koja služi generički nemački sadržaj umesto švajcarskog nemačkog sadržaja, oznake prolaze svaki validator. Ali Google na kraju zaključuje iz bihevioralnih signala da švajcarski korisnici nisu dobro usluženi, i poverenje u vaš hreflang klaster se smanjuje tokom vremena. Tehnička validacija je samo osnova — usklađivanje sadržaja sa deklarisanim lokalitetom je pravi cilj.

---

Gradimo višejezične Next.js sajtove sa potpunom hreflang implementacijom od prvog dana — ispravno mapiranje jezičkih kodova, prevedene sitemap-e, jezički specifičnu schema markaciju i strukturirane hreflang revizije nakon pokretanja. Stupite u kontakt da razgovaramo o vašem projektu, ili pogledajte naše cene za višejezični razvoj i SEO pakete.

---

Često postavljana pitanja

Šta je hreflang i šta radi?

Hreflang je HTML atribut linka koji Google-u govori koju jezičku verziju stranice da servira korisnicima u određenim regionima ili jezicima. Ispravna implementacija sprečava Google da prikazuje pogrešnu jezičku verziju, smanjuje stopu odbijanja i izbegava kazne za duplirani sadržaj među jezičkim varijantama.

Da li hreflang direktno poboljšava Google rangiranje?

Google tretira hreflang kao nagoveštaj, a ne direktivu — ignoriše oznake koje smatra nepouzdanim. Ispravna implementacija sprečava prikazivanje pogrešnog jezika pretraživačima, smanjujući stopu odbijanja i poboljšavajući signale angažovanja koji indirektno podižu rangiranje. Pokvaren hreflang stvara konkurenciju dupliranog sadržaja između vaših sopstvenih jezičkih varijanti.

Koje su najčešće hreflang greške?

Semrush studija na 20.000 višejezičnih veb-sajtova otkrila je da 58% ima interne konflikte u izvornom kodu, 37% linkuje ka pokvarenim ili preusmerenim URL-ovima, 21% ima nepodudarnost jezika između deklarisane hreflang vrednosti i stvarnog jezika stranice, a 15% koristi nevažeće jezičke ili kodove zemalja (Semrush, 2023).

Kako da implementiram hreflang u Next.js 15 App Routeru?

U Next.js 15, izvezite objekat alternates.languages iz generateMetadata(). Koristite ISO 639-1 jezičke kodove kao ključeve i apsolutne kanonske URL-ove kao vrednosti. Uključite x-default koji ukazuje na vašu podrazumevanu lokalizaciju. Next.js automatski renderuje ove kao oznake u zaglavlju dokumenta — nije potrebno odvojeno renderovanje niti biblioteka treće strane.

Za šta se koristi x-default hreflang?

x-default označava rezervnu stranicu za korisnike čiji jezik ili region ne odgovara nijednoj od vaših deklarisanih hreflang vrednosti. To je obično engleska verzija ili odredišna stranica za odabir jezika. Uvek je uključite — to signalizira Google-u da ste namerno uzeli u obzir posetioce iz nenavedenih lokaliteta, a ne samo propustili oznaku.

Zaključak

Hreflang je jedan od onih tehničkih SEO elemenata koje je lako delimično ispravno postaviti, a teško potpuno. Sintaksa je jednostavna, ali režimi grešaka — nedostajuće samoreference, relativni URL-ovi, netačni ISO kodovi, neuzvraćeni linkovi između jezičkih varijanti — su suptilni i ne pojavljuju se kao vidljive greške dok ne vidite pogrešan jezik koji se rangira na pogrešnom tržištu.

U Next.js 15, alternates.languages API u generateMetadata() obrađuje renderovanje čisto i bez dodatnih paketa. Prava investicija je u sloju mapiranja: osiguravanje da se svaki interni jezički ključ rešava u važeći ISO hreflang kod, i da su kanonski URL-ovi koje prosleđujete apsolutni i da ukazuju na stranicu koja se zapravo indeksira.

Ako gradite višejezični Next.js sajt i želite pregled vaše hreflang postavke, javite nam se — identifikovaćemo tačno koji klasteri imaju probleme pre nego što ih Google označi.