SEO12 minJuly 5, 2026
Technical SEO on Next.js: Core Web Vitals, Schema and hreflang in 2026
Great keywords won't save a site if Google sees 5-second LCP, 400ms INP and empty HTML until React hydrates. In 2026, technical SEO for JavaScript frameworks is baseline hygiene: Core Web Vitals with INP replacing FID, JSON-LD Schema.org, correct hreflang for ru/en/uz/zh, and the right rendering strategy in Next.js 16 App Router. This is a code-level, production-focused guide for the Uzbekistan market — not a rewrite of the docs.
01Core Web Vitals 2026: LCP, INP and CLS explained
Core Web Vitals (CWV) are three real-user experience metrics Google uses in ranking and Search Console reports. They come from field data in the Chrome UX Report (CrUX) — 75th percentile over 28 days — not just lab scores.
LCP (Largest Contentful Paint) measures time until the largest visible element renders (hero image, headline, video poster). Good threshold: < 2.5 seconds. Slow LCP on 4G in Tashkent drives ad bounce; see our site speed guide for business impact.
INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. FID only tracked first-click delay; INP captures the worst response to any interaction in a session (taps, clicks, typing). Good threshold: < 200 ms. Heavy event handlers, main-thread blocking from React hydration, and third-party widgets are the usual suspects.
CLS (Cumulative Layout Shift) sums unexpected layout movement. Threshold: < 0.1. Cookie banners without reserved height, fonts without fallbacks, images without dimensions — classic causes.
How to measure:
1. PageSpeed Insights — lab + field data when CrUX exists.
2. Search Console → Core Web Vitals — URL groups with issues.
3. web-vitals npm library — send to GA4 or your endpoint.
4. Real User Monitoring (RUM) — Vercel Speed Insights, Datadog, Sentry Performance.
Lab scores help during development; field data drives SEO. PSI 95 with CrUX "Needs improvement" is a real problem.
02Optimizing Core Web Vitals in Next.js 16 App Router
Next.js 15/16 with React 19 and Turbopack (dev builds) provides built-in levers — use them instead of stacking jQuery plugins on top.
Images — `next/image`:
• `priority` on above-the-fold LCP element — disables lazy-load, adds preload.
• `sizes="(max-width: 768px) 100vw, 50vw"` — browser picks correct srcset, not 2000px on mobile.
• AVIF/WebP via Image Optimization API automatically.
Fonts — `next/font`:
```
const inter = Inter({ subsets: ['latin', 'cyrillic'], display: 'swap' })
```
Self-hosted, no extra Google Fonts round-trip, minimal layout shift with proper fallback.
Scripts — `next/script`:
• `strategy="afterInteractive"` — analytics after hydration.
• `strategy="lazyOnload"` — chat widgets, non-critical third parties.
Code splitting — `next/dynamic`:
```
dynamic(() => import('./HeavyChart'), { ssr: false, loading: () => <Skeleton /> })
```
Heavy client components don't block INP on first paint.
React Server Components (RSC): server-rendered HTML without shipping component JS — smaller bundles, faster LCP. Wrap slow blocks in `<Suspense fallback={<Skeleton />}>` for streaming and earlier first byte.
Hydration: server/client HTML mismatches (`typeof window`, random IDs, `Date.now()` in render) cause re-renders and hurt INP. Use `suppressHydrationWarning` only when unavoidable.
Turbopack speeds dev iteration — catch CWV regressions before deploy. Production on Vercel edge cache + CDN keeps TTFB low for UZ traffic.
03Schema.org JSON-LD in App Router for Uzbekistan businesses
Structured data helps Google show rich results: stars, FAQ, breadcrumbs, product cards. In App Router, inject JSON-LD in a Server Component — crawlers get markup in the first HTML response, no JavaScript wait.
Base pattern:
```
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
/>
```
Schemas for a typical UZ site:
• `Organization` — root `layout.tsx`: company name, logo, sameAs, url.
• `LocalBusiness` — contact page: Tashkent address, geo, openingHours, +998 phone.
• `Article` + `BreadcrumbList` — every blog post.
• `FAQPage` — service pages with Q&A blocks.
• `Product` + `Offer` + `AggregateRating` — e-commerce (UZS price, availability).
• `Service` — `/uslugi/*` pages.
LocalBusiness example:
```
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "UZNEO",
"address": {
"@type": "PostalAddress",
"streetAddress": "Example St, 1",
"addressLocality": "Tashkent",
"addressCountry": "UZ"
},
"telephone": "+998901234567",
"url": "https://uzneo.uz"
}
```
Production rules: one coherent `@type` per block, no conflicting phone numbers vs page content. Validate in Rich Results Test. Schema doesn't replace content — it boosts trust and CTR. Pair with general SEO.
04hreflang for multilingual sites: ru, en, uz, zh done right
Four-language sites are standard for export and local business in Uzbekistan. hreflang tells Google which URL serves which audience. Mistakes here mean duplicate indexing and lost en/uz traffic.
Language codes:
• Russian: `ru-UZ` or `ru`
• English: `en-UZ` or `en`
• Uzbek (Latin): `uz-Latn-UZ` — not `uz-UZ` (Cyrillic/legacy confusion)
• Chinese: `zh-CN` or `zh-Hans`
`x-default` — fallback for users without locale match. Usually Russian or English homepage.
Next.js `generateMetadata`:
```
alternates: {
canonical: 'https://uzneo.uz/en/blog/slug',
languages: {
'ru-UZ': 'https://uzneo.uz/blog/slug',
'en-UZ': 'https://uzneo.uz/en/blog/slug',
'uz-Latn-UZ': 'https://uzneo.uz/uz/blog/slug',
'zh-Hans': 'https://uzneo.uz/zh/blog/slug',
'x-default': 'https://uzneo.uz/blog/slug',
},
}
```
Next emits `<link rel="alternate" hreflang="…">` automatically.
Common bugs:
1. Missing return links — every locale must link to all others including itself.
2. hreflang without canonical — canonical points to current language, not another.
3. Different content per URL — hreflang only between full translations.
4. HTTP vs HTTPS — alternates only on canonical protocol.
Validation: Search Console reports + XML sitemap `xhtml:link` entries. UZNEO projects use a single slug → locale map in code to stay synced when adding a fifth language.
05sitemap.xml, robots.txt and MetadataRoute in App Router
In Next.js 16, static `public/sitemap.xml` gives way to dynamic route handlers — sitemap stays current after every new post or service page.
`app/sitemap.ts`:
```
import type { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://uzneo.uz/en/blog/slug',
lastModified: new Date('2026-07-05'),
changeFrequency: 'monthly',
priority: 0.8,
alternates: {
languages: {
ru: 'https://uzneo.uz/blog/slug',
en: 'https://uzneo.uz/en/blog/slug',
},
},
},
]
}
```
`app/robots.ts`:
```
export default function robots(): MetadataRoute.Robots {
return {
rules: { userAgent: '*', allow: '/', disallow: ['/admin/', '/api/'] },
sitemap: 'https://uzneo.uz/sitemap.xml',
}
}
```
Best practices:
• `lastModified` — real content change date, not `new Date()` on every request.
• Sitemap index — for 1000+ URLs: per-language files + index.
• Exclude `/api/`, preview URLs, filter params with duplicates.
• Limit — 50,000 URLs or 50 MB per file.
Submit to:
1. Google Search Console
2. Yandex.Webmaster — still relevant for UZ/CIS market.
3. Bing Webmaster — feeds DuckDuckGo and Copilot search.
Block staging (`*.vercel.app`) with `Disallow: /` or noindex. After CMS migration, refresh sitemap and request re-crawl in GSC — see CMS choice.
06SSR vs SSG vs ISR vs PPR: rendering strategy for SEO in 2026
Google renders JavaScript with delay and less reliably than ready HTML. Yandex is even more sensitive to pure CSR — client-only React SPAs often lose deep page indexing.
SSR: HTML per request. Fresh data, higher TTFB. Use for dashboards, frequently updated catalogs.
SSG: HTML at build time. Fastest LCP. Best for marketing, blog, landings — 80% of UZNEO business sites.
ISR:
```
export const revalidate = 3600
```
Static shell + background refresh hourly/daily. Sweet spot for product catalogs, UZS price lists, news feeds.
On-demand revalidation:
```
revalidatePath('/blog/[slug]')
```
Instant update after CMS publish without full rebuild.
PPR (Partial Prerendering, Next.js 15+): static shell (header, footer, hero) + streamed dynamic holes (personalization, cart). Experimental in 2025, production-ready on Vercel for mixed pages.
UZNEO defaults for local business:
1. Marketing + blog + services → SSG/ISR with `revalidate: 86400`.
2. E-commerce → ISR on product pages, SSG on categories.
3. Never make public SEO pages pure `'use client'` without RSC wrapper.
4. PPR — try on homepage with dynamic "current offers" block, static shell elsewhere.
Fully client-rendered Vite SPA without SSR is an SEO anti-pattern in 2026. If you need React, use Next.js App Router with Server Components by default.
Summary
Technical SEO in 2026 means measurable CWV (LCP < 2.5s, INP < 200ms, CLS < 0.1), valid JSON-LD, symmetric hreflang, and sitemaps with alternates. Next.js 16 App Router covers 90% out of the box — if you don't turn every page into a client component. UZNEO builds websites and e-commerce stores with these practices from day one: Schema, ru/en/uz/zh i18n, ISR, and Web Vitals monitoring. Avoid common website mistakes — start with architecture, not plugins. Discuss your project — on Telegram.
Need help with a project?
Tell us about your task — we'll suggest a solution and price
