Dodiet katrai valodai savu URL, tad anotējiet šos URL ar savstarpējiem hreflang tagiem. Nolaižamā izvēlne, kas pārmainā tekstus React stāvoklī, tulko saskarni personai, kas jau atrodas jūsu vietnē, bet tas neko nerada, ko meklētājprogramma varētu indeksēt, tāpēc jūsu vācu un spāņu versijas paliek neredzamas. globalize.now ir AI vadīta lokalizācijas infrastruktūra, kas ekstrahē burtiskos tekstus iekļautos Lingui PO katalogos un uztur tos sinhronizētus ar katru Git push — tas ir tas, kas padara pa lokalēm maršrutus praktiski uzturamus, ne vienreizēju darbu.

Šis ir tas solis, kuru lielākā daļa Lovable veidotāju izlaiž. Lietotne tiek tulkota, pārslēdzējs darbojas pārlūkā, un trafiks nekad neatnāk.

Kāpēc Google neindeksē manas Lovable lietotnes citas valodas?

Tāpēc, ka šīm valodām gandrīz noteikti nav savu adrešu.

Noklusējuma modelis, kuru rada AI veidotājs, ir useState lokales vērtība un nolaižamā izvēlne, kas to iestata. Katra valoda tiek atveidota tajā pašā URL. Meklēšanas robots, pieprasot šo URL, saņem vienu atbildi, vienā valodā, un indeksē vienu lapu. Tam nav nekā, ko atklāt, un nav signāla, kas pastāstītu, ka pastāv citas valodu versijas.

Risinājums ir strukturāls, ne kosmētisks. Google pašu vadlīnijas par lokalizētām versijām skaidri nosaka, ka alternatīvās valodu lapas identificējas pēc URL, un ka anotācijas, kas tās savieno, jāatgriezt katrai lapai kopā. Ja /de/pricing nepastāv kā piesaistāma adrese, nekāda iezīmēšana to nepacels virspusē.

Kas patiesam valodas pārslēdzējam ir jādara?

Trīs lietas, secīgi: mainīt URL, paturēt lietotāju uz tās pašas lapas un atcerēties izvēli.

Adreses (URL) maiņa ir tā daļa, kas ir svarīga meklētājprogrammām. Lietotāja paturēšana tajā pašā lapā ir tā daļa, kas ir svarīga lietotājam, un tieši šeit vairums implementāciju sabrūk: pārslēdzoties no /en/pricing, jānonāk /de/pricing, nevis /de/. Izvēles atcerēšanās ir tikai ērtība, un tai nekad nevajadzētu ignorēt URL adresē skaidri norādītu lokāli.

Ir viens anti-modelis, ko vērts pieminēt vārdā: automātiska pāradresācija pēc pārlūkprogrammas valodas. Ja rāpotājs (crawler) no ASV pieprasa /de/pricing un tiek pāradresēts uz /en/pricing, vācu valodas lapa faktiski neeksistē. Piedāvājiet iespēju pārslēgties, nevis uzspiediet to.

Kā pievienot lokāles maršrutēšanu Lovable TanStack Start lietotnei?

Pievienojiet lokāles segmentu maršrutu koka augšpusē un aktivizējiet katalogu no tā.

2026. gada maijā Lovable pārcēla jaunos projektus uz servera puses renderēšanu (SSR) ar TanStack Start, tāpēc maršruts ar lokāles prefiksu atgriež pilnībā iztulkotu HTML jau pirmajā atbildē. Tieši to arī vēlaties, lai saņemtu rāpotājs (crawler).

Izveidojiet dinamisku segmentu, kas aptver pārējos jūsu maršrutus:

src/routes/
  $locale/
    route.tsx
    index.tsx
    pricing.tsx

Pēc tam aktivizējiet Lingui katalogu attiecīgajai lokālei, pirms tiek renderēti pakārtotie elementi (children):

// src/routes/$locale/route.tsx
import { createFileRoute, Outlet, notFound } from "@tanstack/react-router";
import { i18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";

const LOCALES = ["en", "de", "es", "fr"] as const;

export const Route = createFileRoute("/$locale")({
  loader: async ({ params }) => {
    if (!LOCALES.includes(params.locale as (typeof LOCALES)[number])) {
      throw notFound();
    }
    const { messages } = await import(
      `../../locales/${params.locale}/messages.po`
    );
    i18n.loadAndActivate({ locale: params.locale, messages });
    return { locale: params.locale };
  },
  component: LocaleLayout,
});

function LocaleLayout() {
  return (
    <I18nProvider i18n={i18n}>
      <Outlet />
    </I18nProvider>
  );
}

Šeit reālu darbu paveic divas detaļas. Nezināmu lokāļu noraidīšana ar notFound() neļauj /xx/pricing atgriezt "soft 200" atbildi katram nejaušam ceļam, ko izmēģina rāpotājs. Kataloga ielāde maršruta loaderī nozīmē, ka aktivizācija notiek serverī, pirms HTML tiek serializēts.

Ja izmantojat vecāko steku, URL struktūra ir tāda pati, taču renderēšanas process atšķiras. Lovable Vite i18n pamācība apraksta šo gadījumu, savukārt TanStack Start iestatīšanas ceļvedis sīkāk aplūko SSR pusi.

Kā izveidot valodas pārslēdzēja komponenti?

Naviģējiet uz to pašu maršrutu ar citu lokāles parametru un renderējiet katru variantu kā īstu saiti.

// src/components/LanguageSwitcher.tsx
import { Link, useLocation, useParams } from "@tanstack/react-router";

const LOCALES = {
  en: "English",
  de: "Deutsch",
  es: "Español",
  fr: "Français",
} as const;

export function LanguageSwitcher() {
  const { locale } = useParams({ from: "/$locale" });
  const { pathname } = useLocation();
  const rest = pathname.replace(`/${locale}`, "") || "/";

  return (
    <nav aria-label="Language">
      <ul>
        {Object.entries(LOCALES).map(([code, label]) => (
          <li key={code}>
            <Link
              to={`/${code}${rest}`}
              hrefLang={code}
              aria-current={code === locale ? "true" : undefined}
            >
              {label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Renderējiet variantus kā ⟨a⟩ saites, nevis kā pogas, kas izsauc maršrutētāja funkciju. Saites ir indeksējamas rāpotājiem, tāpēc tās sniedz meklētājprogrammām vēl vienu ceļu, kā atklāt jūsu lokāļu maršrutus, papildus vietnes kartei (sitemap). Katru opciju apzīmējiet attiecīgajā valodā, nevis ar karogu: karogi apzīmē valstis, bet spāņu valoda nav valsts.

Kā pareizi ģenerēt hreflang tagus?

Katrā komplekta lapā jāizvieto pa vienai anotācijai katrai lokālei, ieskaitot atsauci uz sevi, kā arī x-default.

Google pārbauda, vai alternatīvās URL adreses norāda atpakaļ, un ignorē anotācijas, kas nav savstarpējas vai norāda prom no lapas paša kanoniskā (canonical) adreses. Tāpēc vienīgā saprātīgā pieeja ir tās ģenerēt programmatiski — jo četru valodu kopums divdesmit lapās nozīmē 320 anotācijas, kuras manuāli uzturēt konsekventas praktiski nav iespējams.

TanStack Start vidē tās veidojiet maršruta head:

// src/routes/$locale/route.tsx (excerpt)
const SITE = "https://example.com";
const LOCALES = ["en", "de", "es", "fr"] as const;

export const Route = createFileRoute("/$locale")({
  head: ({ params, location }) => {
    const rest = location.pathname.replace(`/${params.locale}`, "") || "/";
    return {
      links: [
        { rel: "canonical", href: `${SITE}/${params.locale}${rest}` },
        ...LOCALES.map((code) => ({
          rel: "alternate",
          hrefLang: code,
          href: `${SITE}/${code}${rest}`,
        })),
        { rel: "alternate", hrefLang: "x-default", href: `${SITE}/en${rest}` },
      ],
    };
  },
});

Tā kā anotācijas tiek atvasinātas no tā paša LOCALES masīva, ko izmanto maršrutētājs, pievienojot valodu, vienlaikus atjaunojas gan maršruti, gan pārslēdzējs, gan hreflang kopums. Tieši šo īpašību ir vērts sargāt: viens saraksts, trīs patērētāji.

Pievienojiet tās pašas URL adreses savai vietnes kartei (sitemap) ar xhtml:link alternatīvām un pārliecinieties, ka jūsu <html lang> atribūts atbilst aktīvajai lokālei. Atribūts lang neietekmē hreflang, taču tas ietekmē ekrāna lasītājus un pārlūkprogrammas tulkošanas uzvednes.

Kāpēc izpildlaika (runtime) tulkošanas rīks to nespēj paveikt?

Tāpēc, ka šāds rīks tulko tikai pēc tam, kad lapa jau ir nosūtīta angļu valodā.

Izpildlaika rīks nomaina tekstu pārlūkprogrammā tikai pēc tam, kad ir ielādēts tā skripts. Pirmā atbilde, ko saņem rāpotājs, ir angļu valodas DOM, un iztulkotā versija eksistē tikai pēc tam, kad ir izpildījies klientpuses JavaScript. Daži rīki gan piedāvā apakšdomēna vai apakšdirektorija režīmus ar ģenerētu hreflang, taču tādā gadījumā URL struktūra un anotācijas pieder pakalpojuma sniedzēja infrastruktūrai, nevis jūsu repozitorijam.

Šī atkarība rada izmaksas, kas vairs nav tikai hipotētiskas. Lovalingo — starp Lovable veidotājiem populārs tulkošanas rīks — savu darbību pārtrauc 2026. gada 31. augustā, un pat tā paša ražotāja pamācības iesaka lietotājiem pāriet uz internacionalizāciju, kas pieder pašam projektam. Kad rīks pazūd, kopā ar to pazūd arī tā ģenerētās valodu URL adreses, un vietne atgriežas angļu valodā. Jūsu pašu kodā iekļautiem katalogiem un maršrutiem šāda "slēdža" nav. Praktisko šīs migrācijas versiju esam aprakstījuši Lovalingo alternatīvu salīdzinājumā.

Kā ir ar klasisko Vite SPA steku?

URL struktūra ir identiska; renderēšana — nē.

Lovable projekti, kas izveidoti pirms pārejas uz TanStack Start, ir Vite un React vienas lapas lietotnes (SPA), kas tiek pasniegtas kā statiski faili un renderētas pārlūkprogrammā. Jūs joprojām varat maršrutēt pēc /:locale, ģenerēt hreflang un uzturēt katalogus repozitorijā. Vienīgais, ko jūs zaudējat, ir garantija, ka rāpotāja saņemtais pirmais baits saturēs iztulkotu saturu.

Ja SEO ir jūsu galvenais iemesls lokalizācijai, pievienojiet iepriekšēju renderēšanu (prerendering) lokāļu maršrutiem, lai katrs no tiem sniegtu īstu HTML, vai plānojiet pāreju uz servera puses renderēšanas steku. Neatrisiniet to, uzliekot izpildlaika rīku virs klientpusē renderētas lietotnes — tas sakrauj divus klientpuses renderēšanas ciklus vienu virs otra un pasliktina pirmā jēgpilnā attēlojuma (first meaningful paint) ātrumu ikvienā valodā.

Kā panākt, lai četras lokāles neizklīstu (nedriftētu)?

Automatizējiet ekstrakciju un uztveriet katalogus kā pirmkodu.

Iemesls, kāpēc no maršrutēšanas pēc lokālēm bieži atsakās, nav pati maršrutēšana. Iemesls ir tas, ka katra jauna funkcija pievieno angļu valodas tekstus, kurus neviens neizekstraktē, tāpēc /de/ pamazām piepildās ar angļu valodas fragmentiem un sāk izskatīties sliktāk nekā vācu valodas versijas neesamība vispār. globalize.now risina tieši šo slāni: pievienojiet lovable-i18n prasmi (skill) savā Lovable darbvietā un lūdziet Lovable iestatīt i18n, vai instalējiet prasmes lokāli:

npx skills add globalize-now/globalize-skills

Pievienojiet --all, lai instalētu to visiem aģentiem. Jaunie teksti tiek ekstraktēti, izveidotas atslēgas, katalogi iztulkoti, un atjauninātie PO faili tiek iesūtīti (committed) atpakaļ pie katra Git push.

Cena ir 20 € mēnesī par darbvietu, ieskaitot 20 € tulkošanas kredīta (aptuveni 200 000 vārdu) mēnesī, pēc tam lietošana tiek uzskaitīta pēc marķieriem (token) ar to pašu cenu par rakstzīmi. Nav nedz maksas par lietotāju, nedz par valodu, tāpēc piektās lokāles pievienošana maina tikai jūsu maršrutēšanas konfigurāciju, nevis rēķinu. Reģistrējoties, saņemsiet 5 € tulkošanas kredīta, un karte nav nepieciešama. Vairāk informācijas izstrādātājiem un tiem, kas izlaiž ar mākslīgo intelektu veidotas lietotnes.

Maršrutēšana un hreflang iestatīšana ir viena pēcpusdienas darbs. Četru katalogu uzturēšana pilnīgā stāvoklī, mainoties lietotnei, ir tā daļa, kas nekad nebeidzas, — un tieši šo daļu automatizē globalize.now.

globalize.now pārvērš burtiski ierakstītus lietotnes tekstus tulkošanai gatavos lokalizācijas failos un pastāvīgi tos atjaunina līdz ar katru jauno versiju.

Izmēģiniet globalize.now bez maksas