Tehnički SEO za developere (Next.js): Sve što trebate znati u 2026.

# Što ćete naučiti (SEO za developere)#

Ovaj je vodič napisan za inženjere koji žele predvidljive, testabilne SEO rezultate — a ne maglovite savjete. Naučit ćete kako implementirati SEO za developere u Next.js codebaseu uz produkcijski spremne obrasce za meta tagove, strukturirane podatke, Core Web Vitals, sitemapove, robots.txt i kanonske URL-ove.

Cilj: da vaše stranice budu crawlable, indexable, brze i nedvosmislene. To je tehnički SEO u praksi.

# Zašto je tehnički SEO važan (čak i ako je sadržaj odličan)#

Ako tražilice ne mogu dosljedno crawlati i razumjeti vaše stranice, kvaliteta sadržaja neće pomoći. Tehnički problemi često uzrokuju:

• Stranice se ne indeksiraju (blokirane robots pravilima ili nedostaju u sitemapovima).
• Duplicirani URL-ovi dijele ranking signale (loši canonicals, varijante s query parametrima).
• Loše UX metrike snižavaju performanse na konkurentnim upitima (Core Web Vitals).

Google i dalje primarno indeksira na temelju onoga što može učinkovito dohvatiti. Bolja učinkovitost crawl-a i čisti signali tipično rezultiraju bržim indeksiranjem i stabilnijim pozicijama na velikim webovima.

ℹ️ Napomena: Googleovo “page experience” nije jedan prekidač za rangiranje, ali Core Web Vitals su mjerljivi, koreliraju s ishodima za korisnike i često su prva stvar koja se pokvari kad timovi isporučuju neoptimizirani JavaScript i slike.

# Next.js opcije renderiranja i SEO implikacije#

Next.js vam daje više modela renderiranja. Iz SEO perspektive, ključna razlika je: koliko brzo HTML sadrži smislen sadržaj i linkove.

Ako gradite javnu web stranicu, ciljajte na SSG ili ISR kad god je moguće. SSR zadržite za stranice kojima to stvarno treba.

Ako ste na početku projekta, krenite sa solidnim Next.js temeljima: Kako započeti s Next.js.

# Meta tagovi u Next.js-u: ono bez čega se ne može#

Meta tagovi sami po sebi ne “rangiraju” stranicu, ali kontroliraju kako se stranice prikazuju u rezultatima pretraživanja i previewima. Nekonzistentni metapodaci također stvaraju duplicirane/dvosmislene signale.

Title i meta description (po stranici)#

U Next.js App Routeru koristite metadata export ili generateMetadata za dinamičke podatke. Neka naslovi budu jedinstveni, a opisi usklađeni s namjerom stranice.

// app/(marketing)/services/page.js
export const metadata = {
  title: "Mobile & Web Development in React and Next.js | Samioda",
  description:
    "We build fast React/Next.js web apps and Flutter mobile apps with measurable performance and clean delivery.",
  alternates: {
    canonical: "https://samioda.com/en/mobile-web",
  },
  openGraph: {
    title: "Mobile & Web Development | Samioda",
    description:
      "React, Next.js, Flutter, and automation—delivered with performance and maintainability in mind.",
    url: "https://samioda.com/en/mobile-web",
    type: "website",
  },
};

Praktične mete:

• Title: 50–60 znakova (nije stroga granica, ali smanjuje truncation).
• Description: ~150–160 znakova; pišite radi CTR-a, ne radi keyword stuffing-a.
• Osigurajte da svaka ruta koja se može indeksirati ima title i description.

Meta robots tag vs robots.txt#

Koristite meta robots kada trebate kontrolirati indeksiranje na razini stranice (npr. interne search stranice, “thin” filteri). robots.txt čuvajte za crawl pravila.

// app/(marketing)/search/page.js
export const metadata = {
  title: "Search | Example",
  robots: {
    index: false,
    follow: true,
  },
};

Open Graph i Twitter Cards#

Ne utječu izravno na rangiranje, ali utječu na dijeljenja i click-through (posebno u Slacku/WhatsAppu/LinkedInu). Next.js metadata to pokriva uredno.

Minimalni set:

• og:title, og:description, og:url, og:image
• twitter:card (summary_large_image)

Hreflang (ako ste višejezični)#

Ako poslužujete više localeova, implementirajte hreflang ispravno. Česta greška je miješanje canonical i hreflang signala tako da Google ignorira alternative.

U Next.js App Routeru možete implementirati locale-aware metadata putem generateMetadata i alternates.languages.

# Kanonski URL-ovi: spriječite duplicirani sadržaj u startu#

Duplicirani sadržaj često dolazi od:

• varijanti /?utm_source=...
• trailing slash vs bez slash-a
• www vs non-www
• paginacije i filtera
• više ruta koje mapiraju na isti sadržaj

Kanonski URL govori tražilicama koja je verzija primarna.

Canonicals u Next.js-u (App Router)#

Koristite metadata.alternates.canonical po stranici. Za dinamičke rute izračunajte canonical iz params.

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const slug = (await params).slug;
  const url = `https://samioda.com/en/blog/${slug}`;
 
  return {
    title: `Article: ${slug}`,
    alternates: { canonical: url },
  };
}

Pravila za canonicals koja trebate provesti#

⚠️ Upozorenje: Nemojte kanonikalizirati sve na homepage. To je čest anti-pattern koji može uzrokovati da stranice potpuno ispadnu iz indeksa jer Google to tretira kao signal da je stranica duplikat.

# Strukturirani podaci (JSON-LD): učinite stranice čitljivima strojevima#

Strukturirani podaci pomažu tražilicama pouzdano izvući značenje. Mogu omogućiti rich rezultate poput breadcrumbs, FAQ-a i product snippetova. Ovo je jedan od zadataka s najvećim ROI-jem za “SEO za developere” jer je determinističan i testabilan.

Što prvo implementirati#

JSON-LD primjer za blog objavu (Next.js)#

U App Routeru možete ispisati <script type="application/ld+json"> u page komponenti. Držite ga kratkim i točnim.

// app/blog/[slug]/page.js
export default function BlogPostPage({ params }) {
  const slug = params.slug;
 
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: "Technical SEO for Developers (Next.js): Everything You Need to Know",
    author: { "@type": "Person", name: "Adrijan Omičević" },
    datePublished: "2026-03-07",
    dateModified: "2026-03-07",
    mainEntityOfPage: `https://samioda.com/en/blog/${slug}`,
  };
 
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* ... */}</article>
    </>
  );
}

Workflow za validaciju:

1. 1
   Pokrenite URL u Google’s Rich Results Test.
2. 2
   Popravite missing required properties.
3. 3
   Ponovno testirajte nakon deploya.

💡 Savjet: Koristite strukturirane podatke samo za sadržaj koji je vidljiv na stranici. Označavanje skrivenog sadržaja čest je razlog za manual actions ili ignoriranje sheme.

# Sitemap.xml: kontrola discoveryja na velikim webovima#

Sitemap nije ranking boost, ali je alat za otkrivanje i monitoring. Na velikim webovima, čist sitemap može skratiti time-to-index i pomoći u dijagnosticiranju URL-ova koji su ispali.

Što treba biti u sitemapu#

Uključite:

• samo indexable canonical URL-ove (status 200, bez redirecta).
• lastmod gdje ga možete pouzdano izračunati.
• alternate language URL-ove ako je primjenjivo (naprednije).

Izbacite:

• noindex stranice
• varijante s parametrima
• staging URL-ove
• stranice blokirane robots.txt-om

Implementacija sitemap-a u Next.js-u (App Router)#

Next.js podržava dedicated app/sitemap.js.

// app/sitemap.js
export default async function sitemap() {
  const baseUrl = "https://samioda.com";
 
  const routes = [
    { url: `${baseUrl}/en/mobile-web`, lastModified: new Date("2026-03-07") },
    { url: `${baseUrl}/en/blog/getting-started-with-nextjs`, lastModified: new Date("2026-03-07") },
  ];
 
  return routes;
}

Za sadržaj iz CMS-a dohvatite slugove i mapirajte ih. Output neka bude strogo kanonski.

# robots.txt: kontrola crawl-a bez lomljenja indeksiranja#

robots.txt kontrolira crawling, ne indeksiranje (uglavnom). Ako je URL blokiran, ali je linkan izvana, i dalje može biti indeksiran kao “URL-only” rezultat bez sadržaja.

Minimalni sigurni robots.txt#

User-agent: *
Disallow:
 
Sitemap: https://samioda.com/sitemap.xml

Ako trebate blokirati interne dijelove, napravite to eksplicitno:

User-agent: *
Disallow: /api/
Disallow: /admin/
Disallow: /_next/

Next.js robots.txt (App Router)#

Koristite app/robots.js za generiranje.

// app/robots.js
export default function robots() {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/admin", "/api"],
    },
    sitemap: "https://samioda.com/sitemap.xml",
  };
}

⚠️ Upozorenje: Blokiranje /_next/ je obično u redu, ali blokiranje asseta ili image CDN putanja na koje se vaše stranice oslanjaju može pogoršati renderiranje i dijagnostiku. Uvijek testirajte s Google Search Console URL Inspection.

# Core Web Vitals u Next.js-u: što developeri stvarno trebaju napraviti#

Core Web Vitals su user-centric metrike performansi. U 2026. praktične mete i dalje izgledaju ovako:

• LCP (Largest Contentful Paint): ≤ 2.5s (good)
• INP (Interaction to Next Paint): ≤ 200ms (good)
• CLS (Cumulative Layout Shift): ≤ 0.1 (good)

Čak i kad je SEO utjecaj suptilan, performanse izravno utječu na konverzije. Često citiran nalaz Google/SOASTA pokazao je da kako se vrijeme učitavanja stranice poveća s 1s na 3s, vjerojatnost bouncea raste za ~32% (mobile). To nije SEO metrika, ali utječe na ishode koji su bitni.

LCP: popravite slike i server response#

U Next.js-u LCP je često hero slika ili headline blok.

Akcije koje obično najviše pomiču LCP:

• Koristite next/image i poslužujte pravilno dimenzionirane slike.
• Preload hero slike (priority).
• Izbjegavajte težak above-the-fold JavaScript.
• Držite SSR brzim (ili preferirajte SSG/ISR).

// app/(marketing)/page.js
import Image from "next/image";
 
export default function Home() {
  return (
    <main>
      <Image
        src="/images/hero.jpg"
        alt="Team building Next.js apps"
        width={1600}
        height={900}
        priority
      />
      <h1>Ship faster with Next.js</h1>
    </main>
  );
}

INP: smanjite posao na main threadu#

INP se pogoršava kad aplikacija radi previše na main threadu (hydration, veliki bundleovi, skupi event handleri).

Fixovi s velikim učinkom:

• Razdvojite client komponente; većinu stranice držite kao server komponente.
• Smanjite third-party skripte (chat widgeti, tag manageri).
• Memoizirajte skupe UI operacije i izbjegavajte layout thrashing.
• Koristite next/dynamic za non-critical widgete.

CLS: rezervirajte prostor i izbjegnite kasne promjene layouta#

CLS gotovo uvijek uzrokuju:

• slike bez dimenzija
• injectani bannere
• web fontovi koji kasno zamijene prikaz
• dinamički sadržaj koji gura stranicu

Popravci:

• Uvijek postavite width/height za slike (Next Image to radi kada se koristi ispravno).
• Preloadajte kritične fontove i oprezno koristite font-display: swap.
• Rezervirajte prostor za cookie bannere.

🎯 Ključna poruka: U Next.js-u najbrži put do boljih Core Web Vitals najčešće je manje client JavaScripta: server komponente za sadržaj, optimizacija slika za LCP i stroga kontrola third-party skripti.

# Interno linkanje, navigacija i crawl depth (Next.js-specifično)#

SEO nije samo metadata. Google otkriva stranice kroz linkove. Za developere, “link arhitektura” se svodi na nekoliko praktičnih pravila:

• Svaka indexable stranica treba biti dostupna u nekoliko klikova s homepagea.
• Koristite semantičke <a> linkove (Next.js <Link> renderira anchor) i izbjegavajte click handlere za navigaciju.
• Izbjegnite orphan stranice (stranice dostupne samo kroz search).

Za velike webove dodajte:

• breadcrumb navigaciju (i BreadcrumbList schema)
• hub stranice za kategorije/usluge
• konzistentnu top-level navigaciju

Ako gradite service stranice, pobrinite se da su ključne stranice prominentno linkane, npr. Razvoj mobilnih i web aplikacija.

# Česte Next.js SEO zamke (i kako ih izbjeći)#

1. 1

   Slučajno noindexanje produkcije
   Logiku za robots po environmentu učinite maksimalno eksplicitnom. Jedna loša konfiguracija može izbrisati organski promet.

2. 2

   Index bloat zbog filtera i query parametara
   Ako imate /category?sort=...&color=..., odlučite koje kombinacije zaslužuju indeksiranje. Većina ne.

3. 3

   Duplicirane rute (trailing slash, locale varijante, miješano velika/mala slova)
   Uvedite jedan URL standard kroz redirecte i konzistentno generiranje linkova.

4. 4

   CSR-only renderiranje za marketinške stranice
   Nemojte isporučivati javne stranice kao client-only bez jakog razloga. Preferirajte SSG/ISR.

5. 5

   Nevalidirani strukturirani podaci
   JSON-LD koji ne odgovara sadržaju stranice u najboljem se slučaju ignorira, a u najgorem je rizičan.

# Praktična SEO checklista za Next.js release#

Koristite ovo prije isporuke.

Brzi test redirecta#

curl -I https://example.com
curl -I http://example.com
curl -I https://www.example.com/some-page

Tražite čiste 301 redirecte prema jednom kanonskom formatu.

# Ključne poruke#

• Implementirajte metadata po stranici u Next.js-u koristeći metadata / generateMetadata i osigurajte da svaka indexable ruta ima jedinstvene naslove, opise i OG tagove.
• Koristite kanonske URL-ove agresivno kako biste spriječili duplikate zbog UTM-ova, trailing slash-a i parametriziranih ruta — zatim provedite ista pravila i kroz redirecte.
• Dodajte strukturirane podatke (JSON-LD) za BlogPosting, BreadcrumbList i service stranice; validirajte ih s Google’s Rich Results Test.
• Generirajte sitemap.xml i robots.txt iz Next.js-a (app/sitemap.js, app/robots.js) i uključite samo kanonske, indexable URL-ove.
• Poboljšajte Core Web Vitals smanjivanjem client JavaScripta, optimizacijom slika za LCP i sprječavanjem layout shiftova (CLS) rezerviranim prostorom i predvidljivim UI-jem.
• Tretirajte SEO kao stavku na release checklisti: testirajte redirecte, direktive indeksiranja, pokrivenost sitemapom i performanse prije deploya.

# Zaključak#

Tehnički SEO je najlakši kada ga developeri tretiraju kao bilo koji drugi inženjerski sustav: eksplicitni inputi (metadata, canonicals, schema), deterministični outputi (HTML, sitemapovi) i mjerljive performanse (Core Web Vitals). Ako želite Next.js codebase koji je brz, crawlable i napravljen za dugoročni organski rast, možemo vam pomoći implementirati sve end-to-end — pogledajte naše usluge razvoja web i mobilnih aplikacija ili krenite tako da uskladite svoj stack s našim vodičem za Next.js postavke.