Πώς να προσθέσετε πολλές γλώσσες στην εφαρμογή ή στον ιστότοπό σας

Για να προσθέσετε πολλές γλώσσες σε μια εφαρμογή, μεταφέρετε κάθε κείμενο διεπαφής σε αρχεία μετάφρασης (ένα για κάθε γλώσσα), φορτώστε τα με μια βιβλιοθήκη i18n και προσθέστε έναν επιλογέα γλώσσας που θυμάται την επιλογή. Για δημόσιες σελίδες που θέλετε να βρίσκονται στην αναζήτηση, δώστε σε κάθε γλώσσα τη δική της διεύθυνση, όπως /fr/, και συνδέστε τις εκδόσεις με ετικέτες hreflang. Έπειτα χειριστείτε όσα συχνά ξεχνούν οι άνθρωποι: ημερομηνίες, αριθμούς και νομίσματα, μεγαλύτερο κείμενο σε ορισμένες γλώσσες, γραφές δεξιά-προς-αριστερά και περιεχόμενο αποθηκευμένο στη βάση σας.

Όροι που θα ακούσετε

• Διεθνοποίηση (i18n): προετοιμασία του κώδικα για κάθε γλώσσα — χωρίς σταθερές συμβολοσειρές, μορφοποίηση με βάση την τοπική ρύθμιση, ευέλικτες διατάξεις. Το «18» είναι το πλήθος των γραμμάτων ανάμεσα στο i και το n.
• Τοπικοποίηση (l10n): προσαρμογή της εφαρμογής για μια συγκεκριμένη γλώσσα ή αγορά, κυρίως μετάφραση, και μερικές φορές και νόμισμα, εικόνες και νομικό κείμενο.
• Τοπική ρύθμιση (locale): μια γλώσσα και, προαιρετικά, μια περιοχή, όπως en-GB ή pt-BR.

Κάντε τη διεθνοποίηση μία φορά, και η προσθήκη κάθε νέας γλώσσας γίνεται κυρίως μετάφραση.

Επιλογές και συμβιβασμοί

Για τις περισσότερες εφαρμογές, μια τυπική βιβλιοθήκη i18n με αρχεία μετάφρασης είναι η σωστή βάση. Κάντε προσχέδια μεταφράσεων με αυτόματη ή AI μετάφραση αν θέλετε, και μετά δώστε σε ανθρώπους με άριστη γνώση της γλώσσας να ελέγξουν ό,τι βλέπουν περισσότερο οι πελάτες.

Τα μέρη μιας πολύγλωσσης εφαρμογής

Αρχεία μετάφρασης

Αντί για <h1>Welcome back</h1>, ο κώδικας γράφει t('dashboard.welcome'), και κάθε τοπική ρύθμιση έχει ένα αρχείο με το κείμενο:

{
  "dashboard": {
    "welcome": "Καλώς ήρθες ξανά, {{name}}",
    "items_one": "{{count}} στοιχείο",
    "items_other": "{{count}} στοιχεία"
  }
}

Χρησιμοποιήστε placeholders για τις μεταβλητές αντί να ενώνετε αποσπάσματα προτάσεων — η σειρά των λέξεων διαφέρει μεταξύ γλωσσών. Και χρησιμοποιήστε τους κανόνες πληθυντικού της βιβλιοθήκης: τα αγγλικά έχουν δύο μορφές (1 item, 2 items), αλλά ορισμένες γλώσσες έχουν τρεις, τέσσερις ή περισσότερες.

Μορφοποίηση ημερομηνιών, αριθμών και χρημάτων

Μην τα μορφοποιείτε με το χέρι. Το ενσωματωμένο API Intl του περιηγητή μορφοποιεί για οποιαδήποτε τοπική ρύθμιση: το 1,234.5 στα αγγλικά γίνεται 1.234,5 στα γερμανικά· οι ημερομηνίες αλλάζουν από ημέρα-πρώτη σε μήνα-πρώτο· τα σύμβολα νομισμάτων μετακινούνται. Αποθηκεύστε τις ημερομηνίες σε UTC και τα ποσά ως αριθμούς με κωδικό νομίσματος, και μορφοποιείτε μόνο για την εμφάνιση.

Διάταξη που τεντώνεται

Το μεταφρασμένο κείμενο είναι συχνά μεγαλύτερο από τα αγγλικά — ιδιαίτερα τα γερμανικά και τα φινλανδικά. Αποφεύγετε κουμπιά σταθερού πλάτους και περικομμένες ετικέτες, και δοκιμάστε με τη μακρύτερη γλώσσα σας.

Γλώσσες δεξιά-προς-αριστερά

Τα αραβικά, τα εβραϊκά, τα περσικά και τα ουρντού διαβάζονται από δεξιά προς αριστερά. Ορίστε dir="rtl" στη σελίδα για αυτές τις τοπικές ρυθμίσεις και χρησιμοποιήστε λογικές ιδιότητες CSS (margin-inline-start αντί για margin-left· στο Tailwind, ms-4 αντί για ml-4), ώστε η διάταξη να αντικατοπτρίζεται αυτόματα. Τα εικονίδια που δείχνουν κατεύθυνση, όπως τα βέλη, χρειάζονται επίσης αναστροφή.

Επιλογέας γλώσσας και ανίχνευση

Δείξτε έναν επιλογέα σε κάθε σελίδα, με το όνομα κάθε γλώσσας στη δική της γραφή («Deutsch», «Français», «العربية») και όχι με σημαίες — οι σημαίες αντιπροσωπεύουν χώρες, όχι γλώσσες. Στην πρώτη επίσκεψη ανιχνεύστε την προτιμώμενη γλώσσα του περιηγητή για να προτείνετε μια έκδοση, αλλά η ρητή επιλογή του επισκέπτη να υπερισχύει και να θυμάται.

URLs και SEO

Για σελίδες που θέλετε στα αποτελέσματα αναζήτησης, κάθε γλώσσα χρειάζεται τη δική της διεύθυνση. Από τον Σεπτέμβριο του 2026, η καθοδήγηση της Google για πολύγλωσσους ιστότοπους είναι:

• Ξεχωριστές διευθύνσεις ανά γλώσσα — οι υποκατάλογοι (example.com/fr/) είναι το απλούστερο· λειτουργούν και υποτομείς και τοπικά domains. Οι παράμετροι διεύθυνσης (?lang=fr) δεν συνιστώνται.
• Μην αλλάζετε γλώσσα μόνο με cookie ή ρύθμιση του περιηγητή· το crawler της Google μπορεί να μην δει ποτέ τις άλλες εκδόσεις.
• Μην κάνετε αυτόματη ανακατεύθυνση βάσει γλώσσας· συνδέστε αντίθετα τις εκδόσεις μεταξύ τους.
• Χρησιμοποιήστε hreflang για να πείτε στην Google ποιες σελίδες είναι μεταφράσεις η μία της άλλης. Κάθε έκδοση πρέπει να αναφέρει τον εαυτό της και όλες τις άλλες, αλλιώς οι σημάνσεις μπορεί να αγνοηθούν. Προσθέστε x-default για τη σελίδα εναλλακτικής επιλογής.
• Η Google εντοπίζει τη γλώσσα μιας σελίδας από το ορατό περιεχόμενό της, όχι από το lang ή το hreflang — μεταφράστε λοιπόν ολόκληρη τη σελίδα, όχι μόνο το μενού.

Βάλτε πάντως <html lang="fr"> σε κάθε έκδοση: οι αναγνώστες οθόνης το χρησιμοποιούν για να επιλέξουν τη σωστή προφορά, κάτι που είναι απαίτηση προσβασιμότητας.

Οι οθόνες της συνδεδεμένης εφαρμογής δεν χρειάζεται να ευρετηριάζονται, οπότε για αυτές αρκεί να αποθηκεύεται η γλώσσα στο προφίλ του χρήστη. Δείτε SEO για ιστότοπους χτισμένους με AI για το πώς να εξασφαλίσετε ότι οι δημόσιες σελίδες θα σαρωθούν από την αρχή.

Περιεχόμενο στη βάση σας

Το κείμενο της διεπαφής ζει σε αρχεία· το περιεχόμενο, όπως ονόματα προϊόντων, άρθρα ιστολογίου και κατηγορίες, ζει στη βάση δεδομένων. Δύο συνήθη μοτίβα:

• Πίνακας μεταφράσεων: product_translations (product_id, locale, name, description). Καθαρό και κλιμακώνεται σε πολλές γλώσσες.
• Στήλη JSON ανά πεδίο: name: {"en": "...", "fr": "..."}. Απλούστερο για λίγες γλώσσες.

Αποφασίστε τι γίνεται όταν λείπει μια μετάφραση — συνήθως επιστρέφετε στην προεπιλεγμένη γλώσσα αντί να δείχνετε κενό.

Emails και ειδοποιήσεις

Αποθηκεύστε τη γλώσσα κάθε χρήστη και χρησιμοποιήστε την και για emails, ειδοποιήσεις και PDF. Είναι εύκολο να μεταφράσετε την εφαρμογή και να ξεχάσετε ότι το email καλωσορισμού εξακολουθεί να φτάνει στα αγγλικά.

Προτροπές που δουλεύουν

Πρόσθεσε διεθνοποίηση με το react-i18next. Μετέφερε κάθε κείμενο που βλέπει ο χρήστης στο locales/en.json με ονομασμένα κλειδιά, χρησιμοποίησε παρεμβολή και κανόνες πληθυντικού αντί για ένωση συμβολοσειρών, και μορφοποίησε ημερομηνίες, αριθμούς και τιμές με το Intl με βάση την τρέχουσα τοπική ρύθμιση. Μην αλλάξεις ακόμα τη διατύπωση.

Πρόσθεσε γαλλικά και γερμανικά. Οι δημόσιες σελίδες marketing παίρνουν προθέματα /fr/ και /de/ με τα αγγλικά στη ρίζα, σύνδεσμοι hreflang σε κάθε σελίδα (συμπεριλαμβανομένης της αυτοαναφοράς και του x-default), και html lang ορισμένο ανά σελίδα. Πρόσθεσε επιλογέα γλώσσας που δείχνει το όνομα κάθε γλώσσας στη δική της γραφή. Για σελίδες με σύνδεση, αποθήκευσε τη γλώσσα στο προφίλ του χρήστη.

Πρόσθεσε τα αραβικά με υποστήριξη δεξιά-προς-αριστερά: όρισε dir="rtl" για τα αραβικά, αντικατάστησε τα αριστερά/δεξιά περιθώρια και εσοχές με λογικές ιδιότητες, αντέστρεψε τα εικονίδια κατεύθυνσης και έλεγξε ότι οι φόρμες και οι πίνακες εξακολουθούν να διαβάζονται σωστά.

Βήμα προς βήμα

1. Επιλέξτε την πρώτη επιπλέον γλώσσα με βάση πραγματική ζήτηση — πού βρίσκονται οι επισκέπτες ή οι πελάτες σας.
2. Κάντε διεθνοποίηση του κώδικα: μεταφέρετε τα κείμενα σε αρχεία, προσθέστε πληθυντικούς και μορφοποίηση με Intl. Κυκλοφορήστε το μόνο με αγγλικά και ελέγξτε ότι τίποτα δεν άλλαξε.
3. Αποφασίστε τη δομή διευθύνσεων για τις δημόσιες σελίδες και προσθέστε hreflang.
4. Μεταφράστε: κάντε προσχέδιο με αυτόματη ή AI μετάφραση και μετά ελέγξτε με άτομο που γνωρίζει άριστα τη γλώσσα. Δώστε στους μεταφραστές πλαίσιο — η λέξη «Book» είναι ουσιαστικό στη μία οθόνη και ρήμα στην άλλη.
5. Μεταφράστε το περιεχόμενο της βάσης και ορίστε εναλλακτικές τιμές.
6. Τοπικοποιήστε τα υπόλοιπα: emails, μηνύματα σφάλματος, νομικές σελίδες, εικόνες με κείμενο.
7. Δοκιμάστε κάθε γλώσσα σε πλάτος τηλεφώνου, και με δεξιά-προς-αριστερά αν χρειάζεται.
8. Ορίστε διαδικασία ώστε οι νέες λειτουργίες να βγαίνουν με μεταφράσεις, όχι μήνες αργότερα.

Συνηθισμένα λάθη

• Συνένωση προτάσεων ("You have " + n + " messages"), που σπάει σε άλλες γλώσσες.
• Σταθερό κείμενο που έμεινε μέσα στα στοιχεία, σε μηνύματα σφάλματος και σε μηνύματα επικύρωσης.
• Χειροκίνητη μορφοποίηση ημερομηνιών και τιμών.
• Σημαίες για γλώσσες, και αυτόματες ανακατευθύνσεις που παγιδεύουν τους ανθρώπους στη λάθος έκδοση.
• Μία διεύθυνση για όλες τις γλώσσες σε σελίδες που θέλετε να ευρετηριαστούν.
• Λείπουν οι αντίστροφοι σύνδεσμοι hreflang, οπότε η Google αγνοεί τις σημάνσεις.
• Μετάφραση της διεπαφής αλλά όχι του περιεχομένου, ή το αντίθετο.
• Αυτόματη μετάφραση χωρίς έλεγχο σε σελίδες τιμών, νομικές και ταμείου.

Λίστα ελέγχου πολυγλωσσίας

• Κανένα σταθερό κείμενο που βλέπει ο χρήστης· χρησιμοποιούνται κανόνες πληθυντικού και placeholders
• Ημερομηνίες, αριθμοί και νομίσματα μορφοποιούνται με Intl
• Επιλογέας γλώσσας με τα ονόματα στη γραφή τους σε κάθε σελίδα· η επιλογή θυμάται
• Ξεχωριστές διευθύνσεις ανά γλώσσα για δημόσιες σελίδες· χωρίς υποχρεωτικές ανακατευθύνσεις
• hreflang σε κάθε έκδοση, συμπεριλαμβανομένων της αυτοαναφοράς και του x-default
• html lang (και dir="rtl" όπου χρειάζεται) ορισμένο ανά σελίδα
• Περιεχόμενο βάσης μεταφρασμένο με λογικές εναλλακτικές τιμές
• Emails και ειδοποιήσεις στάλλονται στη γλώσσα του χρήστη
• Κείμενο που βλέπουν οι πελάτες ελεγμένο από άτομο που γνωρίζει άριστα τη γλώσσα

Πολλές γλώσσες στο Mythex

Στο Mythex προσθέτετε γλώσσες ζητώντας τες στο chat — δεν υπάρχει ξεχωριστός πίνακας μεταφράσεων — οπότε οι προτροπές παραπάνω δουλεύουν όπως είναι γραμμένες. Κάντε πρώτα το βήμα της διεθνοποίησης και ελέγξτε το στο Preview πριν προσθέσετε γλώσσες· είναι μεγάλη αναδιάρθρωση, και ένα checkpoint στη συνομιλία σας σας δίνει σημείο επιστροφής αν κάτι σπάσει (συνομιλία και checkpoints). Αν θέλετε η εφαρμογή να μεταφράζει αυτόματα περιεχόμενο με AI ή API μετάφρασης, αυτό χρησιμοποιεί το δικό σας κλειδί API, αποθηκευμένο στις ρυθμίσεις του έργου (μεταβλητές περιβάλλοντος και μυστικά)· το πώς να χρησιμοποιήσετε LLM APIs εξηγεί το κόστος. Δημοσιεύστε ξανά όταν είναι έτοιμες οι νέες γλώσσες.

Ερωτήσεις