Πώς πρέπει να διαμορφωθεί η σελίδα στην οποία το…

Για SEO και ευκολία χρήστη, κάθε σελίδα πρέπει να χρησιμοποιεί το χαρακτηριστικό lang στο <html> tag.

<html lang="ru">
  ...
</html>

Για να δείξετε εναλλακτικές εκδόσεις της σελίδας σε άλλες γλώσσες, χρησιμοποιείται το meta-tag hreflang στο <head>. Αυτό ενημερώνει τις μηχανές αναζήτησης (π.χ. Google) ότι υπάρχουν άλλες γλωσσικές εκδοχές αυτής της σελίδας.

Παράδειγμα:

<head>
  <link rel="alternate" hreflang="ru" href="https://example.com/страница" />
  <link rel="alternate" hreflang="en" href="https://example.com/en/page" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

hreflang="ru": δείχνει την ρωσική έκδοση.
hreflang="en": δείχνει την αγγλική έκδοση.
hreflang="x-default": δείχνει την προεπιλεγμένη σελίδα ή τη σελίδα επιλογής γλώσσας.

Οι διαφορετικοί τρόποι διαχείρισης γλωσσικών επιλογών στο frontend περιλαμβάνουν:

Ξεχωριστές URLs για κάθε γλώσσα: example.com/ru/page, example.com/en/page. Προτιμάται για SEO.
Παραμέτρους ερωτήματος: example.com/page?lang=ru, example.com/page?lang=en. Λιγότερο προτιμώμενο για SEO.
Cookies ή Local Storage: Η γλώσσα αποθηκεύεται στον πελάτη. Απαιτείται διακομιστής ή client-side rendering.

Για διαχείριση μεταφράσεων στο frontend, συχνά χρησιμοποιούνται βιβλιοθήκες διεθνοποίησης (i18n):

React: react-i18next, react-intl
Vue: vue-i18n
Angular: @angular/localize
Vanilla JS: i18next

Αυτές οι βιβλιοθήκες επιτρέπουν:

Ανάκτηση μεταφρασμένων συμβολοσειρών από τον κώδικα.
Διαχείριση διαφορετικών αρχείων γλώσσας (π.χ. JSON).
Δυναμική αλλαγή γλώσσας χωρίς ανανέωση σελίδας.
Διαχείριση κλίσεων, πληθυντικού και μορφοποίησης ημερομηνιών/αριθμών.

Παράδειγμα χρήσης i18next με React:

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import translationEN from './locales/en/translation.json';
import translationRU from './locales/ru/translation.json';

const resources = {
  en: {
    translation: translationEN,
  },
  ru: {
    translation: translationRU,
  },
};

// αρχικοποίηση i18n
// ...

export default i18n;

src/locales/ru/translation.json:

{
  "title": "Привет, мир!"
}

src/locales/en/translation.json:

{
  "title": "Hello, world!"
}

src/App.js:

import React from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('title')}</h1>
      <button onClick={() => changeLanguage('ru')}>Русский</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}

export default App;

Το περιεχόμενο της σελίδας (κείμενα, εικόνες με κείμενο) πρέπει να μεταφράζεται και να εμφανίζεται ανάλογα με τη γλώσσα/URL που έχει επιλεγεί.

Πώς πρέπει να διαμορφωθεί η σελίδα στην οποία το περιεχόμενο είναι διαθέσιμο σε διαφορετικές γλώσσες;