Ефективне встановлення властивості HTML "lang" для багатомовного сайту на Angular з використанням Transloco

Ефективне встановлення властивості HTML “lang” для багатомовного сайту на Angular з використанням Transloco

6 Березня 2024 в 01:22 27

Створення багатомовного сайту є важливим завданням для багатьох розробників у світі веб-розробки. Однак, належне налаштування властивості HTML “lang” для кожної мови може бути викликом, особливо у фреймворку Angular з використанням Transloco для управління перекладами. У цій статті ми розглянемо ефективні способи встановлення властивості HTML “lang” для багатомовного сайту на Angular з використанням Transloco та розглянемо, чому це важливо для SEO.

&lt;html lang="en"&gt;

1	<html lang="en">

На перший погляд може здатися, що встановлення властивості HTML “lang” для багатомовного сайту – це проста задача, проте, коли ми використовуємо фреймворки, такі як Angular, і бібліотеки для управління перекладами, такі як Transloco, це може бути складніше.

Уявімо, що у нас є багатомовний сайт з трьома мовами: англійською, італійською та іспанською. Ми використовуємо Transloco для зберігання текстового контенту кожної мови у вигляді файлів JSON. Основний файл шаблону, index.html, являє собою єдиний файл, де ми можемо встановити властивість HTML “lang”. Як нам встановити цю властивість для кожної мови?

Перший спосіб – це встановити властивість “lang” прямо в HTML-тегу нашого файлу шаблону index.html. Однак цей підхід не є оптимальним, оскільки він вимагає статичного визначення мови і не дозволяє динамічно змінювати мову сайту залежно від поточної мови, вибраної користувачем або збереженої в налаштуваннях.

Для більш гнучкого та ефективного підходу ми можемо використовувати JavaScript для динамічного встановлення властивості “lang” нашого HTML-тегу залежно від обраної мови. Використовуючи Angular та Transloco, ми можемо отримати поточну мову збережену у LocalStorage або в іншому місці та динамічно вставити її у властивість “lang”.

// JavaScript код для встановлення властивості "lang"
let currentLanguage = localStorage.getItem("lang");
document.documentElement.lang = currentLanguage;

// JavaScript код для встановлення властивості "lang"

let currentLanguage = localStorage.getItem("lang");

document.documentElement.lang = currentLanguage;

Цей підхід дозволяє нам гнучко керувати мовою сайту та динамічно змінювати її залежно від вибору користувача. Однак, ми також повинні врахувати важливість SEO при роботі з мовами нашого сайту.

Для забезпечення оптимального SEO ми повинні також враховувати переклад метатегів “title” та “description” для кожної сторінки нашого багатомовного односторінкового додатку. Це дозволяє пошуковим системам правильно індексувати та відображати наш сайт у відповідних мовних результатах пошуку.

У нашому Angular додатку ми можемо використовувати методи Angular для оновлення метатегів “title” та “description” залежно від обраної мови. Наприклад, ми можемо використовувати метод updateTitle для оновлення заголовка сторінки відповідно до обраної мови.

// JavaScript код для оновлення метатега "title"
this.translocoService.selectTranslate('page.title').subscribe((title: string) => {
  this.titleService.setTitle(title);
});

// JavaScript код для оновлення метатега "title"

this.translocoService.selectTranslate('page.title').subscribe((title: string) => {

this.titleService.setTitle(title);

});

Таким чином, ми можемо динамічно змінювати метатеги для кожної сторінки нашого багатомовного сайту залежно від обраної мови, що допомагає покращити його SEO.

Загалом, ефективне встановлення властивості HTML “lang” для багатомовного сайту на Angular з використанням Transloco включає динамічне встановлення мови сайту залежно від обраної мови користувача, а також правильне перекладання метатегів “title” та “description” для кожної сторінки. Це допомагає покращити SEO та забезпечити оптимальний досвід користувача для всіх мовних груп аудиторії.