Как отключить предложение перевода в Chrome: HTML код

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы отключить автоматический перевод веб-страницы в Chrome, добавьте к элементу <html> класс notranslate:

HTML

Скопировать код

<html class="notranslate">
  <!-- Всё просто: "notranslate" означает "не переводить" -->
</html>

Класс notranslate сообщает браузеру Chrome о необходимости отображать страницу в оригинальном виде для всех пользователей, использующих функцию автоперевода.

Вы также можете использовать мета-тег для "защиты" страницы от автоматического перевода Google. Разместите следующий код в секции <head>:

HTML

Скопировать код

<meta name="google" content="notranslate">

Атрибут "notranslate" в мета-теге является указанием для Google, что перевод содержимого веб-страницы не желателен.

Глубокая реализация

Отключение перевода для отдельных элементов

Чтобы исключить конкретные фрагменты текста из автоперевода, используйте атрибут translate="no":

HTML

Скопировать код

<div translate="no">Этот текст особенный. Его не переведут.</div>

Атрибут translate можно применить ко всем HTML-элементам с целью защититы определенных участков контента от перевода.

Проверка совместимости

Проверка совместимости данного метода с браузером важна настолько же, как проверка парашюта перед скачком с высоты. Большинство современных браузеров поддерживают эти механизмы, однако рекомендуется всегда ознакомляться с официальной документацией для получения актуальной информации.

Защита примеров кода

Чтобы сохранить исходный вид примеров кода на веб-странице, используйте класс notranslate. Это позволит избежать искажений при отображении:

HTML

Скопировать код

<pre class="notranslate">const foo = 'bar'; // Верно? Это стоит оставить непереведенным.</pre>

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

Стилизация изменяемых элементов

Работая с атрибутами translate или классами notranslate, важно учитывать возможные вопросы стилизации. Возможно, вам придется модифицировать стили, используя гибкие верстки, вот пример:

HTML

Скопировать код

<div style="display: flex; gap: 20px;">
  <span translate="no">К этому относиться не нужно.</span>
  <span>Здесь текст доступен для перевода.</span>
</div>

Убедитесь, что текст, переведенный или нет, сохраняет единообразный и аккуратный вид.

Визуализация

Представьте себе, что ваша веб-страница – это ваш уютный дом, а Google Translate – назойливый сосед, который обожает всё перемещать:

Markdown

Скопировать код

Дом веб-страницы 🏡: [🛋️, 🪑, 🖼️, 📚]
Google Translate 🧑‍🔧: [🔄🛋️, 🔀🪑, 🔄🖼️, 🔀📚]

Чтобы заблокировать эту нежелательную активность, установите в HTML-двери запрещающий знак:

HTML

Скопировать код

<meta name="google" content="notranslate">

В итоге, сосед не сможет ничего менять без вашего разрешения:

Markdown

Скопировать код

Дом веб-страницы 🏡: [🛋️, 🪑, 🖼️, 📚]
Google Translate 🧑‍🔧: [🚫 Не трогай, все и так хорошо!]

И таким образом, ваш "дом" в Интернете останется в том виде, в котором вы его запланировали, без вмешательства Google Translate.

Выделение многоязычного контента

На многоязычных страницах можно выделить отдельные фразы или слова и не ограничивать их перевод. Для этого используйте тег <b>:

HTML

Скопировать код

<b>Внимание, это важно!</b> Обычный текст, который можно перевести.

Такое сочетание визуального акцента и контроля перевода сделает контент более удобным для пользователей в многоязычной среде.

Экспериментируя в поисках идеала

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

И помните, что подход Google к вопросам перевода меняется быстро, поэтому регулярно проверяйте документацию Google для получения последних обновлений по управлению переводами.

Полезные материалы

Официальный блог Вебмастера Google — Откройте для себя социально-культурное влияние веб-переводов на контент.
Атрибут "translate" в HTML: HyperText Markup Language | MDN — Подробное руководство по использованию атрибута 'translate' в HTML.
Использование атрибута translate в HTML — Глубокий дайджест атрибута translate по материалам W3C.
Изменение языков в Chrome и перевод веб-страниц – Справка Google Chrome — Инструкции Google по отключению автоперевода веб-страниц.
Переход на Manifest V3 | Расширения | Документация для разработчиков Chrome — Нужная информация для разработчиков расширений Chrome, включая функцию перевода.