Главное
foura.ai теперь доступен на шести языках. Сайт, интерфейс Dashboard и девять маркетинговых страниц были извлечены, переведены и перенастроены для отдачи правильной локали на основе URL. Откройте карту сайта в браузере, и она отобразится в виде стилизованной таблицы вместо исходного XML.
Что нового
Сайт заговорил на шести языках
Английский, болгарский, немецкий, польский, вьетнамский и китайский. Маршрутизация с префиксами URL означает, что каждая локаль находится по своему пути: /de/, /pl/, /zh/ и так далее. Чистый путь отдает английскую версию, а /en/ перенаправляет на него, поэтому для каждой английской страницы существует только один канонический URL. Иконка глобуса в верхнем меню позволяет переключать язык, и ваш выбор сохраняется при переходе между страницами.
Серверный рендеринг выполняет основную работу для SEO. Каждая страница теперь поставляется с правильным атрибутом lang, полным набором hreflang, метаданными Open Graph для конкретной локали, а также локализованными тегами <title> и <meta description>. Карта сайта содержит каждый URL для всех локалей. Поисковые системы, которые предпочитают одну локаль другой (Baidu запрашивает китайский, польская версия поисковой системы запрашивает польский), теперь получают нужную страницу при первом же сканировании.
Формы множественного числа ICU работают ожидаемо. «1 API key» остается в единственном числе, «2 API keys» переходит во множественное, и правила меняются в зависимости от языка. В польском языке три формы множественного числа, в английском две, в китайском одна. Модуль разрешения в рантайме использует Intl.PluralRules, встроенный API браузера, поэтому в ваш бандл не добавляется ничего лишнего.
А если вы читаете на английском, визуально ничего не меняется. Ваши URL остаются прежними.
Локализация UI в Playground
Примерно 80 строк в инструменте Playground (метки, подсказки, плейсхолдеры, всплывающие подсказки) теперь соответствуют выбранной вами локали. Технический контент намеренно оставлен на английском: названия методов HTTP, примеры кода, ключи JSON, имена заголовков, коды состояния и значения, которые вы вставляете в request, выглядят одинаково во всех локалях. Интерфейс вокруг них говорит на вашем языке, но сами данные остаются на английском.
Это разделение важно. Любой разработчик, отлаживающий request в команде, где говорят на разных языках, может скопировать тело request и сопоставить его с документацией без искажений из-за перевода.
Отображение карты сайта в виде таблицы
Откройте https://foura.ai/sitemap.xml во вкладке браузера, и вы увидите стилизованную таблицу в темной теме FourA вместо исходного XML. Мы добавили таблицу стилей XSLT, которая обрабатывает как отдельные карты сайта, так и индекс карт сайта.
Причина, по которой она понадобилась: браузеры перестали отображать локализованные карты сайта в виде встроенного стилизованного дерева, как только появляются записи альтернативных локалей <xhtml:link>. Выбор стоял между тем, чтобы поставлять карту сайта без альтернативных локалей (и потерять сигнал SEO, связывающий локали вместе), или разработать собственное оформление. Мы выбрали второй вариант. Поисковые роботы игнорируют таблицу стилей и парсят XML как обычно, так что для них ничего не меняется.
Карта сайта является реальной страницей на реальном сайте. Она должна выглядеть соответствующе.
Что под капотом
Переводы поступают из автоматизированного конвейера. Мы фиксируем в коммитах только исходные строки на английском языке. При слиянии с веткой main конвейер генерирует все остальные локали и фиксирует результат. Редакторская правка вносится в одном месте и распространяется на шесть языков.
Стоит отметить одно исправление ошибки. При первом локализованном развертывании в production на короткое время попали необработанные плейсхолдеры перевода (вы могли видеть home.h1a там, где должен быть заголовок), так как на этапе сборки отсутствовала директория locales. Мы зафиксировали исправление и настроили сборку так, чтобы она считывала директорию locales перед созданием бандла, поэтому такое больше не повторится.
Сайт, доступный на шести языках, структурно представляет собой шесть разных сайтов. Поисковые системы, программы чтения с экрана и клиент в Варшаве, который ищет информацию в Google на польском языке, выигрывают, когда правильная локаль поступает на правильный URL с правильными метаданными. Передача данных не меняется, но интерфейс встречает каждого читателя на его языке.