Smartcat Website Translator: для чего он нужен и как работает

Smartcat’s Website Translator — это инструмент локализации на основе скриптов, который переводит ваш сайт без изменения CMS, бэкэнда или кодовой базы.

Вместо создания отдельных языковых версий сайта с разными URL-адресами, он работает непосредственно с отображаемой страницей в браузере. Достаточно добавить на сайт небольшой фрагмент кода JavaScript, выбрать целевые языки, и ваши страницы будут автоматически переводиться и отображаться для международных посетителей.

Переведенный контент хранится в CDN и динамически отображается при загрузке сайта посетителями.

Поскольку перевод осуществляется на основе уже отображаемого веб-сайта, а не на серверной стороне, его внедрение обычно не требует значительного участия технических специалистов. Одним словом, с помощью Smartcat перевод могут осуществлять сами команды по контенту и маркетингу.

Суть перевода Smartcat сводится к тому, чтобы переводить то, что пользователи видят в своем браузере.

Когда кто-то заходит на ваш сайт, его браузер отображает страницу на основе HTML, CSS и JavaScript, которые вместе формируют конечный визуальный результат.

Эта отображаемая страница представляет собой структуру, называемую DOM ( Document Object Model ), и именно с ней работает переводчик.

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

Поскольку вся система перевода работает на уровне браузера, внутренний стек веб-сайта здесь не имеет значения. Неважно, создан ли сайт на WordPress, Shopify, Webflow, с использованием React или даже на более старых системах. Если сайт отображается в браузере, переводчик работает.

Кроме того, скрипт не останавливается после первоначальной загрузки страницы. Современные веб-сайты не загружают все сразу. После нажатия кнопок могут появляться модальные окна, раскрывающиеся списки, данные из API и/или сообщения о проверке после отправки форм.

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

Процесс настройки Smartcat занимает меньше времени, чем вы думаете.

Проект запускается после того, как вы введете URL-адрес сайта и выберете целевые языки. Затем Smartcat генерирует предварительную версию сайта в собственном интерфейсе, проксируя отображаемые страницы и переводя их.

Затем команда по работе с контентом может просмотреть переведенные страницы, внести правки и утвердить окончательную версию.

После утверждения переводов Smartcat публикует их в виде компактных JSON-файлов на своей CDN. Затем вам останется лишь добавить один фрагмент кода JavaScript в заголовок страницы вашего сайта, чтобы перевод стал доступен на рабочей версии сайта.

После этого при каждом посещении сайта пользователем переведённый контент загружается из CDN и предоставляется посетителю на выбранном им языке.

Вы можете ознакомиться с пошаговое руководство по настройке здесь.

Архитектура Smartcat обладает рядом ключевых преимуществ по сравнению с традиционными подходами к переводу. К ним относятся:

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

Формы остаются на языке оригинала, модальные окна отображаются без изменений, а выпадающие списки и сообщения о проверке данных остаются непереведенными. Для посетителя сайт выглядит переведенным лишь частично.

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

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

Smartcat доставляет готовые переводы через сеть CDN, а не напрямую со своих серверов.

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

Это также означает отказоустойчивость. После публикации переводы продолжают работать, даже если сервис Smartcat не работает и временно недоступен.

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

Когда посетитель попадает на страницу с непереведенным контентом, скрипт может сгенерировать перевод по запросу, сохранить его в кэше и использовать при последующих посещениях. Таким образом, каждый последующий посетитель мгновенно получает кэшированную версию. Smartcat называет этот механизм «краудингом».

Единственным недостатком является небольшая задержка при первом обращении к новому или обновленному контенту.

Smartcat поддерживает несколько поставщиков переводческих услуг, в том числе Google, DeepL, Gemini, ChatGPT, Claude, Apple, Amazon и Microsoft, и использует собственную алгоритмическую систему для выбора оптимального варианта для каждой языковой пары.

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

Smartcat учитывает переводческую память и позволяет последовательно использовать определенные термины на всех языках. Вы также можете доработать перевод с помощью настраиваемых подсказок для моделей LLM, касающихся тона и стиля.

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

Атрибут st-shared-section позволяет командам определять общие разделы, благодаря чему повторяющиеся элементы переводятся один раз и последовательно используются повсеместно.

Помимо видимого текста, Smartcat также предлагает возможность переводить элементы, влияющие на SEO.

Метаданные сайта, такие как заголовки страниц, описания, атрибуты alt изображений, текст-заполнитель, метки ARIA и теги hreflang, также переводятся.

Некоторые веб-сайты могут содержать личную или конфиденциальную информацию, которую не следует переводить.

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

Элементы, помеченные атрибутом st-ignore , полностью пропускаются системой перевода вместе с содержащимся в них контентом. Это позволяет командам изолировать данные учетной записи, платежные реквизиты, внутренние инструменты или другие конфиденциальные области интерфейса от рабочих процессов перевода.

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

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

Одним из самых серьезных препятствий являются междоменные iframe.

Если на сайте встроен сторонний инструмент бронирования, форма оплаты, встроенные инструменты планирования или внешние виджеты, правила безопасности браузера блокируют доступ скрипта к содержимому внутри.

Это ограничение распространяется на любую систему перевода, работающую в браузере. Единственный способ обойти его — отдельно установить скрипт перевода внутри iframe, что возможно только в том случае, если вы также контролируете встроенный источник.

Верстка — ещё один распространённый крайний случай, особенно для языков с направлением написания справа налево (RTL), таких как арабский или иврит. Smartcat может изменять направление страницы с помощью встроенной поддержки RTL в браузере, но не может переписать CSS-код сайта.

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

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

Когда посетитель попадает на страницу с контентом, который ещё не переведён, система сначала генерирует и кэширует перевод, а затем предоставляет его пользователю.

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

Системы защиты от ботов, такие как Cloudflare, иногда блокируют загрузку предварительного просмотра Smartcat во время настройки, поскольку запросы поступают с IP-адресов AWS и выглядят как автоматический трафик. Решением этой проблемы является добавление статических IP-адресов Smartcat в белый список.

Одностраничные приложения, созданные с использованием таких фреймворков, как React, могут иногда сталкиваться с конфликтами рендеринга, если структура переведенного HTML-кода не сохраняется должным образом.

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

Smartcat Website Translator подходит не для всех сайтов.

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

Это могут быть продукты SaaS, ориентированные на международных пользователей, веб-сайты с большим объемом контента, а также компании, выходящие на новые рынки и не желающие привязывать локализацию к циклам выпуска новых версий.

Для небольших сайтов, состоящих всего из нескольких страниц или поддерживающих один-два целевых языка, зачастую достаточно простого плагина CMS или ручного рабочего процесса.

Преимущества системы перевода на уровне браузера, такой как Smartcat, становятся очевидными по мере увеличения объема контента, количества языков и частоты обновлений.

Итак, если вы ищете инструмент для перевода своего сайта и не хотите возиться с изменением кода или управлением дубликатами URL-адресов, ознакомьтесь с Smartcat Website Translator .