Английская версия сайта с использованием переводчика от Яндекса

Для чего нужна английская версия сайта

Наличие многоязычной версии сайта — не роскошь, а необходимость для бизнеса, нацеленного на международную аудиторию. Ключевые причины:

• Расширение охвата: доступ к англоязычным пользователям (более 1,5 млрд человек в мире).
• Улучшение UX: посетители видят контент на привычном языке, что повышает доверие и конверсию.
• SEO‑преимущества: поисковые системы лучше ранжируют сайты с локализованным контентом.
• Конкурентное преимущество: выделение среди конкурентов, ограниченных одним языком.

Даже если вы не планируете полный перевод, базовая английская версия поможет иностранным клиентам найти вас и понять суть предложения.

Подключаем английский язык на сайт: код и инструкция

Вставьте в нужное место страницы (например, в шапку или сайдбар) выпадающий список языков:

<div id="ytWidget"></div>
<div class="lang language">
	<select id="lang-selector" class="lang__select">
		<option value="ru">RU</option>
		<option value="en">EN</option>
	</select>
</div>

Далее необходимо подключить файл стилей style.css со следующим содержимым:

#ytWidget {
    display: none;
}
.language {
    display: flex;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    background: #272727;
    margin-right: 10px;
}
.lang__select {
    border-radius: 5px;
    background: #272727;
    border: none;
    outline: none;
    color: #fff;
    font-weight: 600;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
}
.lang__select::-ms-expand {
  display: none;
}
.lang__select:hover {
    background: #ff7300;
}

И перед закрывающим тегом </body> подключаем файл со скриптом yatranslate.js следующего содержания:

const yatranslate = {
  lang: "ru" // Исходный язык сайта
};

document.addEventListener('DOMContentLoaded', function() {
  initLanguageSelector();
});

function initLanguageSelector() {
  const selector = document.getElementById('lang-selector');
  const currentLang = yaTranslateGetCode();
  selector.value = currentLang;

  // Подключаем виджет Яндекс Переводчика
  const script = document.createElement('script');
  script.src = `https://translate.yandex.net/website-widget/v1/widget.js?widgetId=ytWidget&pageLang=ru&widgetTheme=light&autoMode=false`;
  document.head.appendChild(script);

  // Обработчик смены языка
  selector.addEventListener('change', function() {
    yaTranslateSetLang(this.value);
    window.location.reload();
  });
}

function yaTranslateSetLang(lang) {
  localStorage.setItem('yt-widget', JSON.stringify({ lang, active: true }));
}

function yaTranslateGetCode() {
  const stored = localStorage.getItem('yt-widget');
  return stored ? JSON.parse(stored).lang : yatranslate.lang;
}

Результат: после перезагрузки страницы появится выпадающий список с языками. При выборе языка страница переведётся через виджет Яндекса. Язык сохраняется при переходе на следующие страницы.