Több nyelv hozzáadása az appodhoz vagy weboldaladhoz

Ahhoz, hogy az appodhoz több nyelv tartozzon, a felület minden szövegét nyelvenkénti fordítási fájlokba kell áthelyezned, betöltened egy i18n-könyvtárral, és készítened egy nyelvválasztót, amely megjegyzi a döntést. Azoknál a nyilvános oldalaknál, amelyeknek a keresőkben is meg kell jelenniük, nyelvenként külön URL kell, például /fr/, a változatokat pedig hreflang-címkékkel kell összekötni. Utána ne feledkezz meg azokról a részletekről, amelyeket az emberek gyakran kihagynak: a dátumokról, számokról és pénznemekről, a hosszabb szövegekről egyes nyelveken, a jobbról balra író írásrendszerekről, valamint az adatbázisban tárolt tartalomról.

Fontos szavak

• Internacionalizáció (i18n): a kód előkészítése arra, hogy bármilyen nyelvet támogasson – nincs beégetett szöveg, területi beállítást követő formázás, rugalmas elrendezés. Az „18” a szám a kezdő i és a záró n közötti betűk száma.
• Lokalizáció (l10n): az app adaptálása egy adott nyelvre vagy piacra, főleg fordítással, de néha pénznemmel, képekkel és jogi szövegekkel is.
• Területi beállítás (locale): nyelv és opcionálisan régió, például en-GB vagy pt-BR.

A i18n-t egyszer kell megcsinálni, utána minden új nyelv hozzáadása nagyrészt már csak fordítási munka.

Lehetőségek és kompromisszumok

A legtöbb appnak alapként a fordítási fájlokkal dolgozó, szabványos i18n-könyvtár a jó választás. Ha szeretnéd, készíts vázlatfordítást gépi vagy MI-fordítással, majd az ügyfelek által leggyakrabban látott szövegeket olvastasd át anyanyelvi beszélőkkel.

Egy többnyelvű app részei

Fordítási fájlok

A <h1>Welcome back</h1> helyett a kód ezt írja: t('dashboard.welcome'), és minden területi beállításhoz van egy fájl a szöveggel:

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

Változókhoz használj helyőrzőket, ne mondatfoszlányokat fűzz össze – a szórend nyelvenként eltér. A könyvtár többesszám-szabályait is használd: az angolban két alak van (1 item, 2 items), de egyes nyelveknek három, négy vagy még több alakja van.

Dátumok, számok és pénz formázása

Ezeket ne kézzel formázd. A böngésző beépített Intl API-ja bármely területi beállításhoz formáz: az angolban az 1,234.5 a németben 1.234,5; a dátumok a napot vagy a hónapot elől írják; a pénznem jele máshová kerül. A dátumokat UTC-ben tárold, a pénzt számként pénznemkóddal, és csak megjelenítéskor formázd.

Elrendezés, amely alkalmazkodik

A fordított szöveg gyakran hosszabb az angolnál – különösen a németben és a finnben. Kerüld a fix szélességű gombokat és a csonkított feliratokat, és a leghosszabb nyelveddel is tesztelj.

Jobbról balra író nyelvek

Az arab, a héber, a perzsa és az urdu jobbról balra íródik. Ezeknél a területi beállításoknál állítsd be a dir="rtl" attribútumot az oldalon, és használj CSS logikai tulajdonságokat (margin-inline-start a margin-left helyett; Tailwindben ms-4 az ml-4 helyett), hogy az elrendezés magától tükröződjön. Az irányt jelző ikonokat, például a nyilakat, szintén meg kell fordítani.

Nyelvváltó és nyelvfelismerés

Minden oldalon legyen nyelvváltó, amely a nyelvek saját nevén jelenik meg („Deutsch”, „Français”, „العربية”), nem zászlókkal – a zászló országokat jelöl, nem nyelveket. A látogató első látogatásakor a böngésző előnyben részesített nyelvét felismerheted, és javasolhatod a megfelelő változatot, de a látogató egyértelmű döntése legyen az érvényes, és ezt jegyezd meg.

URL-ek és SEO

Ahhoz, hogy az oldalak megjelenjenek a keresőkben, nyelvenként külön URL kell. A Google 2026 szeptemberétől érvényes útmutatása többnyelvű oldalakhoz:

• Külön URL nyelvenként – az alkönyvtárak (example.com/fr/) a legegyszerűbbek; az aldomainek és az országspecifikus domainek is működnek. Az URL-paraméterek (?lang=fr) nem ajánlottak.
• Ne válts nyelvet csak sütivel vagy böngészőbeállítással – a Google keresőrobotja előfordulhat, hogy soha nem látja a többi változatot.
• Ne irányíts át automatikusan nyelv alapján – inkább linkelj a változatok között.
• A hreflang megmondja a Google-nek, mely oldalak fordítják egymást. Minden változatnak tartalmaznia kell önmagát és az összes többit, különben a jelölést figyelmen kívül hagyhatják. Az alapértelmezett oldalhoz adj x-default értéket.
• A Google az oldal nyelvét a látható tartalomból állapítja meg, nem a lang attribútumból vagy a hreflangből – ezért a teljes oldalt fordítsd le, ne csak a menüt.

Attól még állítsd be minden változatnál a <html lang="fr"> attribútumot: a képernyőolvasók ezzel választják ki a megfelelő kiejtést, ami a akadálymentesség követelménye.

A bejelentkezés utáni app-képernyőket nem kell indexelni, ezeknél elfogadható, ha a nyelvet a felhasználói profilban tárolod. Arról, hogyan lehet a nyilvános oldalakat bejárhatóvá tenni, lásd a SEO AI-val épített weboldalakhoz útmutatót.

Tartalom az adatbázisban

A felületi szövegek fájlokban élnek; a tartalom, például a terméknevek, a blogbejegyzések és a kategóriák, az adatbázisban található. Két gyakori minta:

• Fordítási tábla: product_translations (product_id, locale, name, description). Tiszta, és sok nyelvre is jól skálázódik.
• JSON-oszlop mezőnként: name: {"en": "...", "fr": "..."}. Néhány nyelvhez egyszerűbb.

Döntsd el, mi történik, ha hiányzik egy fordítás – általában az alapértelmezett nyelvre esik vissza, nem mutat üres helyet.

E-mailek és értesítések

Tárold minden felhasználó nyelvét, és használd e-mailekhez, értesítésekhez és PDF-ekhez is. Könnyű lefordítani az appot, és elfelejteni, hogy az üdvözlő e-mail még angolul érkezik.

Promptok, amelyek működnek

Adj hozzá nemzetközivé tételt a react-i18next segítségével. Helyezd át minden felhasználónak látható szöveget a locales/en.json fájlba, névtérrel ellátott kulcsokkal, használj behelyettesítést és többesszám-szabályokat szövegösszefűzés helyett, és formázd a dátumokat, számokat és árakat az Intl-lel az aktuális területi beállítás szerint. Még ne változtass a szövegek tartalmán.

Adj hozzá franciát és németet. A nyilvános marketingoldalak kapjanak /fr/ és /de/ URL-előtagot, az angol maradjon a gyökérben, minden oldalon legyenek hreflang-linkek (az önhivatkozással és az x-default-tal együtt), és az oldalankénti html lang legyen beállítva. Adj nyelvválasztót, amely minden nyelvet a saját nevén mutat. A bejelentkezett oldalakhoz tárold a nyelvet a felhasználó profilján.

Adj hozzá arabot jobbról balra támogatással: arabnál állítsd be a dir="rtl" attribútumot, a bal és jobb oldali margókat és paddingokat cseréld logikai tulajdonságokra, tükrözd az irányt jelző ikonokat, és ellenőrizd, hogy az űrlapok és táblázatok továbbra is helyesen olvashatók.

Lépésről lépésre

1. Válaszd ki az első extra nyelvet a valós kereslet alapján – ahol a látogatóid vagy ügyfeleid vannak.
2. Tedd többnyelvűvé a kódot: a szövegeket fájlokba, add hozzá a többesszámot és az Intl formázást. Először csak angollal szállítsd, és ellenőrizd, hogy semmi nem változott.
3. Döntsd el az URL-szerkezetet a nyilvános oldalakhoz, és adj hozzá hreflangot.
4. Fordíts: vázlatot készíts gépi vagy MI-fordítással, majd olvastasd át anyanyelvi beszélővel. Adj a fordítóknak kontextust – a „Book” szó az egyik képernyőn főnév, a másikon ige.
5. Fordítsd le az adatbázis tartalmát, és állíts be tartalékokat.
6. Lokalizáld a többit: e-maileket, hibaüzeneteket, jogi oldalakat, a szöveget tartalmazó képeket.
7. Teszteld minden nyelven telefon szélességében, és ha releváns, jobbról balra íródó nyelven is.
8. Alakíts ki folyamatot, hogy az új funkciók fordítással együtt érkezzenek, ne hónapokkal később.

Gyakori hibák

• Mondatok összefűzése ("You have " + n + " messages"), ami más nyelveken eltörik.
• Beégetett szöveg maradt a komponensekben, hibaüzenetekben és érvényesítési szövegekben.
• Dátumok és árak kézi formázása.
• Zászlók nyelvek helyett, és automatikus átirányítások, amelyek rossz változatba zárják az embereket.
• Egy URL minden nyelvhez azoknál az oldalaknál, amelyeket indexelni szeretnél.
• Hiányzó hreflang visszalinkek, így a Google figyelmen kívül hagyja a jelöléseket.
• Csak a felület fordítása, a tartalomé nem, vagy fordítva.
• Átnézetlen gépi fordítás az ár-, jogi- és fizetési oldalakon.

Többnyelvűségi ellenőrzőlista

• Nincsenek beégetett, a felhasználó számára látható szövegek; többesszám-szabályok és helyőrzők használva
• Dátumok, számok és pénznemek Intl-lel formázva
• Nyelvváltó a nyelvek nevével minden oldalon; a választás megjegyezve
• Külön URL nyelvenként a nyilvános oldalaknál; nincs kényszerített átirányítás
• hreflang minden változaton, az önhivatkozással és az x-default-tal együtt
• html lang (és szükség esetén dir="rtl") oldalankénti beállítva
• Az adatbázis tartalma le van fordítva, ésszerű tartalékokkal
• E-mailek és értesítések a felhasználó nyelvén mennek ki
• Az ügyfeleknek szánt szöveget anyanyelvi beszélő olvastaz át

Többnyelvűség a Mythexen

A Mythexen új nyelveket chatben kérsz – nincs külön fordítópanel –, így a fenti promptok változtatás nélkül használhatók. Először végezd el a nyelvfüggetlenítést, és az előnézetben ellenőrizd, mielőtt új nyelveket adnál hozzá; ez nagy átalakítás, és a chat-ellenőrzőpont egy visszaállítási pontot ad, ha valami elromlana (chat és ellenőrzőpontok). Ha azt szeretnéd, hogy az app MI-vel vagy fordító API-val fordítson automatikusan, az a saját API-kulcsodat használja, amelyet a projekt beállításaiban tárolsz (környezeti változók és titkok); a LLM API-k használatáról szóló útmutató ismerteti a költségeket. Amikor az új nyelvek készen állnak, publikáld újra az appot.

Kérdések