Kuinka lisätä useita kieliä sovellukseen tai verkkosivustoon

Kun haluat lisätä useita kieliä sovellukseen, siirrä jokainen käyttöliittymän teksti käännöstiedostoihin (yksi tiedosto kieltä kohden), lataa ne i18n-kirjastolla ja lisää kielenvaihtaja, joka muistaa valinnan. Hakuun haluamillesi julkisille sivuille anna jokaisella kielellä oma URL-osoite, kuten /fi/, ja yhdistä versiot hreflang-tageilla. Sen jälkeen hoida asiat, joita ihmiset usein unohtavat: päivämäärät, luvut ja valuutat, joissakin kielissä pidempi teksti, oikealta vasemmalle kirjoitettavat kirjoitusjärjestelmät sekä tietokannassa oleva sisältö.

Termit, joita kohtaat

• Kansainvälistäminen (i18n): koodin valmistelu tukemaan mitä tahansa kieltä — ei kovakoodattuja merkkijonoja, paikallista muotoilua ja joustavia asetteluja. Luku "18" on kirjainten määrä i:n ja n:n välissä.
• Lokalisointi (l10n): sovelluksen sovittaminen tiettyyn kieleen tai markkinaan, pääasiassa käännös, joskus myös valuutta, kuvat ja oikeudellinen teksti.
• Locale (kieliasetus): kieli ja tarvittaessa alue, kuten en-GB tai pt-BR.

Tee i18n kerran, jolloin jokaisen uuden kielen lisääminen on enimmäkseen käännöstyötä.

Vaihtoehdot ja kompromissit

Useimmille sovelluksille sopiva perusta on tavallinen i18n-kirjasto käännöstiedostoineen. Voit luoda käännösluonnoksia konekäännöksellä tai tekoälyllä, ja sen jälkeen sujuvat kielen puhujat tarkistavat eniten asiakkaiden näkemän tekstin.

Monikielisen sovelluksen osat

Käännöstiedostot

Koodissa ei lukisi <h1>Tervetuloa takaisin</h1>, vaan t('dashboard.welcome'), ja jokaisella kielellä on tiedosto tekstillä:

{
  "dashboard": {
    "welcome": "Tervetuloa takaisin, {{name}}",
    "items_one": "{{count}} kohde",
    "items_other": "{{count}} kohdetta"
  }
}

Käytä muuttujille paikanvaraajia sen sijaan, että yhdistät lauseen osia, koska sanajärjestys vaihtelee kielten välillä. Käytä myös kirjaston monikon sääntöjä: englannissa on kaksi muotoa (1 kohde, 2 kohdetta), mutta joissakin kielissä on kolme, neljä tai enemmän.

Päivämäärien, lukujen ja rahan muotoilu

Älä muotoile näitä käsin. Selaimen sisäänrakennettu Intl-rajapinta muotoilee minkä tahansa kielen mukaan: 1,234.5 englanniksi on 1.234,5 saksaksi; päivämäärät vaihtavat päivä edellä ja kuukausi edellä -järjestyksen; valuuttamerkit siirtyvät. Tallenna päivämäärät UTC-ajassa ja rahat lukuina valuuttakoodin kanssa ja muotoile vain näyttämistä varten.

Asettelu, joka venyy

Käännetty teksti on usein englantia pidempää, erityisesti saksaksi ja suomeksi. Vältä kiinteän levyisiä painikkeita ja katkaistuja nimiä ja testaa pisimmällä kielelläsi.

Oikealta vasemmalle kirjoitettavat kielet

Arabia, heprea, persia ja urdu kirjoitetaan oikealta vasemmalle. Aseta sivulle dir="rtl" näille kielille ja käytä CSS:n loogisia ominaisuuksia (margin-inline-start margin-leftin sijaan; Tailwindissä ms-4 ml-4:n sijaan), jolloin asettelu peilautuu itsestään. Suuntaa ilmaisevat kuvakkeet, kuten nuolet, täytyy myös kääntää.

Kielenvaihtaja ja tunnistus

Näytä kielenvaihtaja jokaisella sivulla ja merkitse kielet niiden omilla nimillä ("Deutsch", "Français", "العربية") lippujen sijaan, koska liput kuvaavat maita, eivät kieliä. Tunnista selaimen ensisijainen kieli ensimmäisellä käyntikerralla, jotta voit ehdottaa versiota, mutta anna kävijän oma valinta voittaa ja muista se.

URL-osoitteet ja hakukoneoptimointi

Hakutuloksiin haluamillesi sivuille jokaisella kielellä tarvitaan oma URL-osoite. Googlen ohjeet monikielisille sivustoille syyskuusta 2026 alkaen ovat seuraavat:

• Erilliset URL-osoitteet kielittäin — alihakemistot (example.com/fr/) ovat yksinkertaisimmat; myös aliverkkotunnukset ja maakohtaiset verkkotunnukset toimivat. URL-parametreja (?lang=fr) ei suositella.
• Älä vaihda kieltä pelkällä evästeellä tai selaimen asetuksella; Googlen indeksoija ei välttämättä näe muita versioita.
• Älä ohjaa automaattisesti kielen perusteella; linkitä versiot toisiinsa.
• Käytä hreflangia kertomaan Googlelle, mitkä sivut ovat toistensa käännöksiä. Jokaisen version täytyy listata itsensä ja kaikki muut, muuten merkinnät saatetaan jättää huomiotta. Lisää x-default varasivulle.
• Google tunnistaa sivun kielen näkyvästä sisällöstä, ei lang-attribuutista tai hreflangista — käännä siis koko sivu, ei vain valikkoa.

Aseta silti jokaiseen versioon <html lang="fi">: ruudunlukijat käyttävät sitä valitakseen oikean lausumisen, ja se on saavutettavuuden vaatimus.

Kirjautuneiden sovelluksen näkymiä ei tarvitse indeksoida, joten niille riittää kielen tallentaminen käyttäjäprofiiliin. Katso hakukoneoptimointi tekoälyllä rakennetuille verkkosivuille, jotta julkiset sivusi saadaan ensimmäisenä indeksoitua.

Sisältö tietokannassa

Käyttöliittymän teksti on tiedostoissa, mutta sisältö, kuten tuotenimet, blogikirjoitukset ja kategoriat, on tietokannassa. Kaksi yleistä mallia:

• Käännöstaulu: product_translations (product_id, locale, name, description). Selkeä ja skaalautuu moneen kieleen.
• JSON-sarake kenttää kohden: name: {"en": "...", "fr": "..."}. Yksinkertaisempi muutamalle kielelle.

Päätä, mitä tapahtuu, kun käännös puuttuu — yleensä palataan oletuskieleen sen sijaan, että näytetään tyhjää tilaa.

Sähköpostit ja ilmoitukset

Tallenna jokaisen käyttäjän kieli ja käytä sitä myös sähköposteissa, ilmoituksissa ja PDF-tiedostoissa. On helppo kääntää sovellus ja unohtaa, että tervetulosähköposti tulee yhä englanniksi.

Kehotteet, jotka toimivat

Lisää kansainvälistäminen react-i18next-kirjastolla. Siirrä jokainen käyttäjälle näkyvä merkkijono tiedostoon locales/en.json nimiavaruutetuilla avaimilla, käytä interpolointia ja monikon sääntöjä merkkijonojen yhdistämisen sijaan ja muotoile päivämäärät, luvut ja hinnat Intl-rajapinnalla nykyisen kielen mukaan. Älä muuta vielä yhtään sanamuotoa.

Lisää ranska ja saksa. Julkiset markkinointisivut saavat etuliitteet /fr/ ja /de/ ja englanti jää juureen, hreflang-linkit jokaiselle sivulle (myös itseviittaus ja x-default) ja html lang asetetaan sivukohtaisesti. Lisää kielenvaihtaja, joka näyttää kielten omat nimet. Kirjautuneille sivuille tallenna kieli käyttäjän profiiliin.

Lisää arabia oikealta vasemmalle -tuella: aseta dir="rtl" arabialle, korvaa vasen ja oikea marginaali ja täyte loogisilla ominaisuuksilla, peilaa suuntaa ilmaisevat kuvakkeet ja tarkista, että lomakkeet ja taulukot ovat yhä luettavia.

Vaihe vaiheelta

1. Valitse ensimmäinen lisäkieli todellisen kysynnän perusteella — missä kävijäsi tai asiakkaasi ovat.
2. Tee koodista kansainvälinen: siirrä merkkijonot tiedostoihin, lisää monikot ja Intl-muotoilu. Julkaise tämä vain englanniksi ja tarkista, ettei mikään muuttunut.
3. Päätä URL-rakenne julkisille sivuille ja lisää hreflang.
4. Käännä: luo luonnos konekäännöksellä tai tekoälyllä ja anna sen jälkeen sujuvan kielen puhujan tarkistaa. Anna kääntäjille asiayhteys — sana "Book" on substantiivi yhdellä näytöllä ja verbi toisella.
5. Käännä tietokantasisältö ja aseta varakieli.
6. Lokalisoi muu: sähköpostit, virheilmoitukset, oikeudelliset sivut, tekstiä sisältävät kuvat.
7. Testaa jokainen kieli puhelimen leveydellä ja tarvittaessa oikealta vasemmalle.
8. Luo prosessi, jotta uudet ominaisuudet julkaistaan käännösten kanssa eikä kuukausia myöhemmin.

Yleisimmät virheet

• Lauseiden yhdistäminen ("You have " + n + " messages"), mikä hajoaa muilla kielillä.
• Kovakoodattu teksti jäi komponentteihin, virheilmoituksiin ja validointiviesteihin.
• Päivämäärien ja hintojen muotoilu käsin.
• Liput kielten tunnuksina ja automaattiset uudelleenohjaukset, jotka jättävät ihmiset väärään versioon.
• Yksi URL kaikille kielille sivuilla, jotka haluat indeksoitavaksi.
• Puuttuvat hreflang-paluulinkit, joten Google jättää merkinnät huomiotta.
• Käyttöliittymä käännetty, mutta sisältö ei tai päinvastoin.
• Tarkistamaton konekäännös hinnoittelu-, oikeudellisilla ja ostosivuilla.

Monikielisyyden tarkistuslista

• Ei kovakoodattuja käyttäjälle näkyviä merkkijonoja; monikon säännöt ja paikanvaraajat käytössä
• Päivämäärät, luvut ja valuutat muotoiltu Intl-rajapinnalla
• Kielenvaihtaja kielten omilla nimillä jokaisella sivulla; valinta muistetaan
• Julkisille sivuille erilliset URL-osoitteet kielittäin; ei pakotettuja uudelleenohjauksia
• hreflang jokaisella versiolla, myös itseviittaus ja x-default
• html lang (ja dir="rtl" tarvittaessa) asetettu sivukohtaisesti
• Tietokantasisältö käännetty järkevillä varakielillä
• Sähköpostit ja ilmoitukset lähetetään käyttäjän kielellä
• Asiakkaille näkyvän tekstin on tarkistanut sujuva kielen puhuja

Useita kieliä Mythexissä

Mythexissä lisäät kielet kysymällä chatissa — erillistä käännöspaneelia ei ole — joten yllä olevat kehotteet toimivat sellaisinaan. Tee kansainvälistämisvaihe ensin ja tarkista se Previewssa ennen kielten lisäämistä; se on laaja refaktorointi, ja chat-tarkistuspiste antaa kohdan, johon voit palata, jos jokin hajoaa (chat ja tarkistuspisteet). Jos haluat sovelluksen kääntävän sisältöä automaattisesti tekoälyllä tai käännös-API:lla, se käyttää omaa API-avaintasi, joka tallennetaan projektin asetuksiin (ympäristömuuttujat ja salaisuudet); LLM-API:jen käyttö selittää kustannukset. Julkaise uudelleen, kun uudet kielet ovat valmiit.

Kysymykset