Получить профессию в Skypro
Почему Chrome неверно определяет язык страницы: решение
Быстрый ответ
Для того чтобы браузер Chrome не предложил перевести веб-страницу, явно указывайте язык содержимого с помощью атрибута lang в теге <html>:
<html lang="ru">Если на странице представлен контент на различных языках, обозначьте каждый фрагмент соответствующим атрибутом lang:
<p lang="es">¡Hola, mundo!</p>Это позволит браузеру Chrome точно понять, на каком языке написан контент, и избежать нежелательных предложений о переводе страницы.
Объявляйте тип документа и кодировку символов
Сразу после объявления <!DOCTYPE html> определите кодировку символов:
<meta charset="UTF-8">Такие метаданные помогают Chrome корректно обрабатывать и определять содержание страницы.
Значимость каждого атрибута
Используйте мета-теги специфичные для Google, чтобы предотвратить предложения по переводу:
<meta name="google" content="notranslate">Хотя такой мета-тег не является частью стандартных атрибутов HTML, он эффективно указывает Chrome, что не требуется перевод страницы.
Будьте еще более ясны! Укажите язык явно
Если предыдущие методы оказались неэффективными, явно сообщите об этом браузеру с помощью мета-тега, эквивалентного заголовку HTTP Content-Language:
<meta http-equiv="Content-Language" content="ru">Этот метод не является таким широко применяемым для указания языка, как атрибут lang, но он отправляет явный сигнал браузеру.
Проверка на практике
Если после публикации веб-сайта Chrome продолжает предлагать перевод, попробуйте:
- Глубоко вздохнуть, расслабиться и перезапустить браузер или обновить Chrome.
- Добавить текст, который не требует перевода, в невидимый элемент, например, hidden div — Chrome не предложит перевести то, что не видно.
- Смеющимся шрифтом укажите элементам, чтобы они не привлекали внимание браузера:
<div translate="no">Тсс! Это содержимое не нужно переводить!</div>Устанавливайте границы для Chrome
Иногда требуется четко указать браузеру, что он должен делать, используя класс notranslate для элементов, которые должны остаться неизменными:
<div class="notranslate">Этот элемент не требует перевода!</div>Исследуйте, что воздействует на Chrome
Если вы хотите более глубоко изучить эту тему, ознакомьтесь с алгоритмами n-gram Google и поймите, что может заставить Chrome воспользоваться функцией перевода.
Ваша CMS — защитник языка
Если вы используете CMS для управления сайтом, ознакомьтесь с рекомендациями по установке языковых тегов, которые предоставляются в документации системы.
Постоянное совершенствование
Как и в кулинарии, не бойтесь экспериментировать и корректировать настройки до тех пор, пока ваш сайт не будет предлагать неправильный перевод — а именно, не будет предлагать его, когда в этом нет необходимости.
Визуализация
Восприятие браузера Chrome как туриста (🧳), который приехал в город с разноязычными табличками (🗽) может быть полезным:
Указатели в городе: [🇬🇧 Welcome, 🇫🇷 Bienvenue, 🇪🇸 Bienvenido]Chrome ошибается:
🧳💭 "Возможно, я во Франции. Пора подтянуть свой французский!"
🗣️🤖 *Желаете ли вы перевести страницу на французский?*Реальность — город полиглот:
🧳🌐 Здесь говорят на многих языках! Переводчик не требуется.Решение — четкие инструкции:
🛑🏷️ *Добавлен атрибут `lang="ru"` к HTML*
🧳✨ "В основном здесь говорят на английском! Перевод не нужен."Chrome отказывается от идеи перевода:
🗣️🤖 "Приятного времяпровождения без необходимости перевода!"
### Игра с полями ввода
Поля ввода формы могут стать причиной неправильного определения основного языка страницы браузером. Давайте сообщим об этом полю ввода:<input type="text" lang="ru" translate="no">
### Анализ заголовков
Проверьте HTTP-заголовки вашего сервера. Они должны корректно передавать браузеру Chrome информацию о языке, включая `charset` и `Content-Language`.
### Внешние ресурсы — ваш союзник
Не стесняйтесь обращаться к материалам, представленным создателями веб-разработок, а также к исследованиям кейсов. Они помогут вам разобраться с проблемой перевода вашего сайта. Выделяйтесь!
### Управление атрибутом `translate`
Атрибут `translate` — это ваш инструмент для управления переводом отдельных элементов на странице:<p translate="no">Этот абзац недоступен для переводчика.</p>
```
Полезные материалы
- Изменение настроек языка в Chrome и перевод веб-страниц – Компьютер – Справка Google Chrome — здесь вы найдете информацию о настройках языка в браузере Chrome.
- Понимание критерия успеха 3.1.1: Язык страницы | WAI | W3C — W3C подробно объясняет важность использования атрибутов языка.
- lang – HTML: Гипертекстовый язык разметки | MDN — руководство MDN по использованию атрибута
langв HTML. - JavaScript для определения языковых предпочтений браузера – Stack Overflow — советы по настройке языковых предпочтений в Chrome с помощью JavaScript.
- Локализованные версии ваших страниц | Google Search Central | Google для разработчиков — руководство Google по созданию локализованных версий веб-страниц.
- Информация о BCP 47 » RFC Editor — официальный документ с описанием языковых тегов BCP 47.