Как сделать локализацию сайта js

Обновлено: 04.07.2024

SEO-специалистам учить язык программирования JavaScript (далее — JS) вовсе не обязательно, но понимание принципов сканирования и рендеринга поможет превратить JS из помехи в союзника. Давайте разбираться, что к чему!

Речь пойдёт о технической оптимизации. Абсолютное большинство сайтов используют JS для улучшения пользовательского опыта, сбора статистики, интерактивности, загрузки контента, меню, кнопок и других элементов. Наша цель, как SEO-специалистов, облегчить процесс сканирования контента и по возможности избегать проблем, которые часто возникают при обработке страниц, использующих JavaScript.

Руководство частично основано на материалах от Ahrefs, Onely, Google Developers, за что им большое спасибо.

Поисковые системы пытаются получить тот же контент, что видят в браузере пользователи. В Google за процесс рендеринга и сканирования отвечает сервис обработки веб-страниц Web Rendering Service (WRS, часть системы индексации Caffeine). Вот упрощенная схема процесса:

Разберём процесс на примере отдельного URL.

Здесь важно учитывать некоторые нюансы.

Хороший вариант:

Плохой вариант, если вы, конечно, хотите, чтобы ссылки были понятны поиску:

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

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

Важно знать, что JS может стать причиной появления дубликатов, если уникальный контент подгружается динамически и возникли проблемы с его отображением или загрузка занимает слишком много времени. Google может увидеть только дубликаты шаблонов. Актуально для SPA-проектов, использующих использующих фреймворки Angular, React, Vue.Решение — SSR (server-side rendering), то есть рендеринг на стороне сервера. В таком случае Googlebot получит заранее отрисованный контент в исходном коде документа и проблем с его сканированием/индексацией не возникнет.

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

Одно из опасений SEO-специалистов, что при двухэтапном рендеринге (сначала HTML — потом отрисовка с помощью JS) процесс сканирования может занимать много времени. На самом деле, медиана ожидания для рендеринга сканируемого HTML-документа, как правило, не превышает 5 секунд.

Показатель не стоит путать с популярным SEO-мифом о том, что рендерер Google ждёт полной отрисовки страниц всего 3-5 секунд. На деле, как уверяет Джон Мюллер, тайм-аут может быть выше, а благодаря активному кэшированию ресурсов страницам не придётся каждый раз загружать CSS- и JS-файлы.

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

Тем не менее, чем быстрее отрисовывается страница, тем лучше. Процесс рендеринга тратит много ресурсов, а Google старается их экономить.

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

Googlebot работает на движке Chromium 74-й версии, поэтому поддерживает все возможности современных браузеров, но краулер не умеет выполнять пользовательские сценарии вроде кликов, заполнения форм и прочих взаимодействий с элементами на странице, поэтому всё, что должно попасть в индекс, обязано быть доступно сразу в DOM документа. Если что-то подгружается с сервера по клику, то оно не будет просканировано поисковым роботом.

Googlebot не умеет скроллить страницу, поэтому загружаемый визуальный размер документа отличается от привычного пользователю. Для мобильных устройств страница загружается с шириной 411px и высотой 12140px, для десктопа — 1024x9307px.

Например, на сайте бренда H&M часть контента подгружается по клику с помощью JS.

Попробуем проверить попадает ли этот текст в индекс? Увы:

В тоже время контент реализованный в рамках HTML и найденный в исходном коде документа, без труда индексируется:

Такой разброс говорит о возможности, как минимум, облегчить доступ Googlebot и WRS к сканированию и рендерингу наших проектов. Несколько советов и рекомендаций.

Рендеринг (отрисовка) контента на стороне сервера. В этом случае, Googlebot получает уже готовый код документа. Это значительно повышается скорость First Paint и First Contentful Paint, что важно в условиях нового фактора ранжирования Google Page Experience.

Но есть и недостаток — генерация страниц на сервере требует времени, что может привести к задержке TTFB (время до получения первого байта).

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

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

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

Динамический и серверный рендеринг важны для продвижения под Яндекс. Как увидим ниже, поисковик пока не особенно умеет в JavaScript-индексацию.

Вот список популярных JS-фреймворков + HTML5 и возможность индексации реализованного с помощью них контента различными поисковыми системами.

Здесь следует добавить, что робот Яндекса всё-таки может проиндексировать AJAX-версию контента, но только если есть его HTML-копия.

Очевидно, у краулеров должен быть доступ к файлам, влияющим на отображение страницы. Убедитесь, что они открыты для сканирования. Самый просто способ — добавить соответствующие директивы в robots.txt. Например, для Googlebot:

Подробнее о продвинутом использовании robots.txt можно узнать в нашем руководстве.

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

Для решения проблемы с хешами используется History API, появившийся вместе с HTML5. Метод позволяет привести URL к стандартному виду, но здесь придётся подробнее разобраться с темой и правильно настроить конфигурацию сервера. В основном это снова актуально для SPA-проектов (англ. single page application — одностраничное приложение), где контент подгружается полностью динамически.

Отложенная загрузка улучшает юзабилити сайта, подгружая медиа элементы только тогда, когда они понадобятся пользователю (например, при скролле). Но если функционал настроен неправильно, Googlebot может просто не увидеть необходимый нам контент. Если используете Lazy Loading, убедитесь, что всё загрузка реализовано в соответствии с требованиями Google.

С одной стороны система рендеринга в Google (Web Rendering Service) значительно шагнула вперёд, используя последнюю версию Chrome на движке 74-й версии, что упрощает обработку сайтов с использованием JS, с другой — краулер не умеет кликать, скроллить или иначе взаимодействовать с контентом, а значит высока вероятность, что он пропустит часть важного для SEO контента.

Если у вас нет возможности или специалиста, способного выполнять все рекомендации Google по разработке, руководствуйтесь следующим правилом: всё, что хотим видеть в индексе, должно быть доступно в исходном коде документа (теги, ссылки, тексты, изображения, навигация, меню и любые другие элементы On-page). Это максимально актуально и для Яндекса.

Всем удачно проиндексироваться и пусть в поиске будет только желаемый контент!

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

Как лучше всего локализовать название?

Это было бы хорошей идеей?

3 ответа

Попробуйте записать необходимые локализованные ресурсы в объект JavaScript (хэш), а затем использовать его для поиска ваших динамически создаваемых объектов. Я думаю, что это лучше, чем возвращаться на сервер для переводов. Это похоже на добавление через viewdata, но может быть немного более гибким. FWIW, я мог бы считать ресурсы локализации частью View, а не частью контроллера.

Который будет выводить что-то вроде:

Без аргументов он выведет весь хэш перевода. Использование аргументов дает вам возможность настроить его для каждого представления.

Затем вы будете использовать его в ваших файлах JavaScript, таких как:

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

Я поместил все свои JavaScript-скрипты, включая любые для viewusercontrols, в контейнер скриптов. Код JavaScript для конкретного вида следует после включений. Я рефакторинг разделяемого кода обратно в сценарии по мере необходимости. Я думал об использовании метода контроллера для сопоставления сценариев, то есть включает несколько сценариев, используя один запрос, но пока не дошел до этого.

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

Добрый день.
Изучаю технологию написания пользовательских скриптоов userscripts - довольно сильная технология. Почему ее никто не использует для локализации сайтов? Можно хоть для каждой странички сайта написать свой скрипт, т.е. можно переводить частично, например, меню или подписи таблиц. Думаю, что сами сайты будут только рады. Да, я понимаю, что монетизация только через пожертвования, но я знаю людей, которые не пользуются разными интеренет сервисами, т.к. они не на русском. И мне самому всегда приятней работать с сайтом на русском.

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

Кому и зачем нужна локализация сайта

Что такое локализация

Локализация — это не просто перевод сайта на другой язык, а пошаговое создание копии проекта с учётом особенностей определённого региона. В процессе локализации у сайта появляется новая языковая версия в виде поддомена или подпапки.

Главная задача — максимально адаптировать проект под культурные и поведенческие характеристики целевой аудитории. Сайт, сделанный для России, нельзя просто перевести на английский, создать поддомен и запустить контекстную рекламу для США. В идеале языковые версии сайта должны сильно отличаться друг от друга. Из общего у них будет медиаконтент, линейка продуктов и команда. Любые компоненты могут выпасть из цепочки в зависимости от особенностей проекта.

Какие задачи решает локализация

Расширяет целевую аудиторию.
Позволяет увеличить доход.
Уменьшает потери при санкциях поисковых систем, если языковая версия сделана на поддомене.
Закрепляет эмоциональную связь с представителями целевой аудитории.
Даёт преимущества перед конкурентами.

Когда стоит задуматься о локализации

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

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

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

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

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

Советы по локализации сайта

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

1. Домен

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

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

Крупные проекты часто предпочитают отдельные домены для разных стран. Так поступили Tripadvisor, Tutu, Skyscanner, BlaBlaCar и другие бренды. Agoda выбрала языковые версии в подпапках. Некоторые сайты добавляют языковой переключатель и переводят контент на лету без изменения домена. Booking генерирует страницы с языковыми идентификаторами. Решение зависит от конкретного проекта, бюджета и других нюансов.

2. Способы перевода сайта на иностранный язык

Существует два основных способа перевода контента: машинный и ручной. В первом случае затраты будут минимальными, а скорость выполнения задачи — в несколько раз выше. Стоимость и сроки создания ручной локализации зависят от объёма контента и специфики проекта.

Машинный перевод

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

Плюсы	Минусы
Большой выбор сервисов	Низкое качество перевода
Экономия средств	Удар по имиджу проекта
Быстрое решение задачи

Кроме всем известных онлайн-переводчиков, таких как Google Translate и DeepL, можно использовать сервисы автоматизированного машинного перевода:

Ручной перевод

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

Плюсы	Минусы
Высокое качество	Высокая стоимость
Положительный имидж компании	Сложность контроля работы без знания языка
Рост доверия целевой аудитории

Три полезных сайта:

Можно найти переводчиков на российских фриланс-биржах и немного сэкономить. Проще всего переводить динамические сайты с турами или отелями, где в текст подставляются переменные. Наш аффилиат Алексей Морозов рассказал на TPAS-2019, что заказывает перевод на Kwork, а контент — на Advego.

Для крупных проектов с достаточным запасом финансов идеальным решением будет команда профессиональных переводчиков и несколько пруфридеров — носителей языка. С решением задачи в таком формате отлично помогает платформа POEditor. С её помощью можно создать языковые версии сайта или приложения с автоматическим и ручным переводом. Команда сервиса отобрала агентства, которые занимаются переводами на профессиональном уровне.

ВАЖНО: с помощью сервисов перевода можно локализовать только такой сайт, шаблон которого размечен по строкам. Например .PO или .YML

3. Названия изображений

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

У картинок есть два важных атрибута, которые частично влияют на SEO: это title и alt. Первый отображается при наведении мыши на элемент, а второй помогает роботам понять содержимое картинки и учитывается в ранжировании Google Images. Google активно работает над технологией распознавания Google Vision, но атрибуты по-прежнему играют важную роль.

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

4. Важные мелочи

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

Важно знать, как правильно писать:

дату и время;
номера телефонов;
языковые коды (ISO);
цены;
температуру;
единицы измерения.

В США температура измеряется по шкале Фаренгейта, а в европейских странах и России используется шкала Цельсия. Ещё больше различий в написании почтовых адресов. Переводчики и пруфридеры знают эти особенности досконально. Даже такие мелочи могут повлиять на пользовательский опыт.

5. Цвета

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

6. Диалект

Диалект — разновидность языка, которая используется на определённой территории. В США, Великобритании и других англоязычных странах есть свои диалекты, которые зависят от культурных особенностей. Диалект — это не просто уникальные слова и словосочетания, которые распространены в отдельных регионах, а целая система речевого общения.

Например, если хотите выйти на рынок Китая со своими продуктами и выбрали определённый регион, проанализируйте, какие диалекты использует местное население. В провинциях Гуандун и Гуанси распространён кантонский. В Северном и Западном Китае используют севернокитайский язык, а кантонский не понимают. В этом случае локализация сайта в соответствии с особенностями диалекта критически важна.

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

7. Длина строк и различия в написании

Что важно учитывать:

Некоторые понятия не переводятся на другой язык одним словом.
Есть шрифты с поддержкой только кириллицы или только латиницы.
Английское предложение на 20–30% короче русского. В китайском или корейском длинная фраза превращается в лаконичный иероглиф.
Некоторые языки читаются справа налево или снизу вверх. Например, так у арабов и евреев.

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

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

Локализация подразумевает адаптацию к реалиям целевого рынка. Поэтому надо по максимуму подстроить сайт под аудиторию: учесть региональные форматы даты и времени, единицы измерения, особенности пунктуации, написание валюты. На этапе разработки базовые проблемы решают JavaScript-библиотеки Date, Money, Moment. Они автоматически конвертируют дату, цены и формат времени в зависимости от активного языка.

8. Важность SEO-оптимизации для выбранного языка

Если рассчитываете на поисковый трафик из зарубежного Google, просто качественной локализации недостаточно. Будьте готовы к созданию нового проекта почти с нуля. На старте будет только базовый дизайн клиентской части и админка. С административной панелью проще: большинство CMS по умолчанию переведены на основные языки. Активируете переключатель в админке и пользуетесь.

В поисковом ранжировании Буржнета актуальны те же факторы, что и в Рунете:

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

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

Полезные инструменты:

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

9. Локальный линкбилдинг

Одна из главных проблем продвижения в Буржнете — наращивание ссылочной массы. Для успеха в зарубежном Google по-прежнему важны бэклинки, но добывать их сложнее, чем в Рунете. У нас торговля ссылками относительно развита, а там приходится отправлять сотни писем владельцам сайтов в надежде получить положительный ответ.

Условия локального линкбилдинга:

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

Для локального линкбилдинга подходят бэклинки с разных ресурсов: форумов, социальных сетей, Q&A-сервисов, каталогов.

10. Локализация всех каналов общения с пользователем

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

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

11. Юридические тонкости

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

Ещё один важный момент — покупка хостинга и домена. Для сайтов, ориентированных на США, лучше арендовать хостинг у американских провайдеров, чтобы обеспечить максимально быструю загрузку. Аналогичная ситуация с доменом: зарегистрировать имя в зоне .fr может только житель одной из стран Европейского союза или компания, работающая в ЕС.

12. Подходящие платёжные инструменты

Если на сайте возможна онлайн-оплата, то при выходе на зарубежный рынок вы столкнётесь с незнакомыми платёжными агрегаторами, которые пользуются спросом в Буржнете. В Америке лидирует PayPal, в Бельгии — MasterCard, в Дании — Visa, в Швейцарии — Ratepay.

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

13. Уникальный локальный контент

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

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

14. Локализация названия бренда

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

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

Читайте также: