Как создать многоязычный веб-сайт с помощью HubSpot CMS (Полное руководство)

Человек, сидящий рядом с ноутбуком с иконками социальных сетей
Содержание

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

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

Почему стоит выбрать HubSpot CMS для вашего многоязычного веб-сайта?

Человек работает на ноутбуке с программным обеспечением для перевода. Различные флаги представляют языки.

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

Вот несколько причин, почему HubSpot CMS является отличным вариантом для вашего проекта многоязычного веб-сайта.

  • Бесплатная и простая в использовании без программирования – HubSpot CMS предлагает бесплатные инструменты, которые можно использовать без каких-либо знаний в области программирования. Благодаря редактору с функцией перетаскивания и гибким темам любой может создать профессионально выглядящий сайт, не нуждаясь в разработчике. Это идеально подходит, если вы хотите сосредоточиться на создании контента и пользовательского опыта, не занимаясь техническими сложностями.
  • Встроенная многоязычная поддержка – HubSpot CMS позволяет создавать версии страниц на разных языках. Каждой версией можно управлять отдельно, но при этом она остается связанной в рамках единой системы, что упрощает навигацию и управление контентом. Вы также можете настраивать URL-адреса для каждого языка и использовать многоязычные SEO-функции, такие как теги hreflang.
  • Интеграция с маркетинговыми и CRM-инструментами — Вы можете легко подключить свой многоязычный сайт к маркетинговым, торговым и клиентским сервисным инструментам HubSpot. Например, вы можете отображать контактные формы, чат-боты или контент для email-рассылок в зависимости от языка пользователя. Это создает более персонализированный и релевантный пользовательский опыт.
  • Встроенная веб-аналитика – HubSpot предоставляет встроенную аналитику для отслеживания производительности каждой языковой версии вашего сайта. Вы можете видеть, какие страницы посещаются чаще всего, откуда приходит ваша аудитория и как она взаимодействует — все это с одной панели управления, без дополнительных инструментов.

Пошаговое руководство по созданию мультиязычного сайта на HubSpot CMS

Мужчина сидит за столом с ноутбуком и растением. Контрольный список на экране.

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

#1 Планирование вашей многоязычной стратегии

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

  • Выберите языки на основе целевой аудитории или рынка, который вы хотите охватить. Используйте данные об аудитории из аналитики или рыночных исследований, чтобы расставить приоритеты наиболее актуальных языков. Это исследование также определит, какие языки вы добавите на свой веб-сайт.
  • Решите, какую структуру URL использовать; HubSpot CMS поддерживает различные форматы структуры URL, такие как поддомены (например, fr.example.com), подпапки (example.com/fr) или параметры URL (example.com?lang=fr). Подпапки обычно наиболее рекомендуются для SEO, поскольку они остаются в основном домене.
  • Решите, какие ключевые страницы должны быть доступны на каждом языке. Это включает в себя домашнюю страницу, о нас, услуги, контакт и популярные статьи. С этой картой контента вы можете обеспечить одинаковый пользовательский опыт на всех языках.

 

#2 Настройка вашего веб-сайта

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

После создания учетной записи и входа в систему вы будете перенаправлены на страницу панели управления с различными пунктами меню и параметрами настройки продукта. После перехода на следующую страницу выберите «Контент > Страницы веб-сайта» . Чтобы начать создание веб-страницы, нажмите кнопку «Создать».

Удалите ненужные коды отслеживания со страниц веб-сайта

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

Женщина работает на ноутбуке с примерами бренд-дизайна

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

Создайте свой идеальный веб-сайт с Linguise. Скриншот панели управления конструктором сайтов.

Чтобы отредактировать элемент, нажмите на него и настройте в Содержимое разделе слева.

Скриншот интерфейса веб-сайта с Linguise. Человек работает за компьютером.

Аналогично, если вы хотите добавить новые разделы, модули или макеты. Здесь HubSpot CMS предоставляет различные модули, такие как:

  • Текст
  • Коммерция
  • Дизайн
  • Формы и кнопки
  • Содержимое страницы и т. д.

Вам просто нужно выбрать знак (+) или просто перетащить его с левой стороны на правую сторону редактора страницы. 

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

#3 Интеграция с инструментами автоматического перевода

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

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

  • Ограничения по языку и количеству страниц зависят от тарифного плана — HubSpot ограничивает количество языковых вариантов контента в зависимости от уровня вашей подписки. Например, тарифный план Starter позволяет использовать до 3 языков для контента, в то время как Linguise предлагает неограниченную языковую поддержку, до 85 языков, доступных во всех планах, и неограниченное количество страниц.

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

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

  • Для языков с написанием справа налево (RTL) настройка направления текста отсутствует.  Для таких языков, как арабский или иврит, вам потребуется самостоятельно добавить атрибут dir=”rtl”, чтобы обеспечить правильное направление текста.

Вот почему сторонние инструменты перевода, которые поддерживают все эти функции и хорошо интегрируются с HubSpot CMS, необходимы —Linguise — один из них. Linguise может автоматически переводить контент на 80+ языков с высоким качеством результатов.

Есть несколько шагов, которые необходимо выполнить, чтобы установить Linguise автоматический перевод на вашем сайте HubSpot.

Для начала убедитесь, что у вас есть Linguise . После входа в систему или регистрации на Linguise вам будет предложено зарегистрировать домен, который вы хотите перевести. Введите полный домен, включая https://, и выберите опцию «ДРУГАЯ CMS, РАЗМЕЩЕННАЯ В ОБЛАКЕ». 

Меню настроек автозаполнения с различными вариантами

Затем выберите основной (исходный) язык вашего веб-сайта и целевой язык(и), который вы хотите добавить.

Скриншот страницы списка языков перевода. Различные языки перечислены.

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

Как создать многоязычный веб-сайт с помощью HubSpot CMS (Полное руководство)

Entri проверит публичный DNS вашего домена, обнаружит поставщика домена (например, Cloudflare) и отобразит страницу входа для этого поставщика. После входа в систему Entri автоматически добавит все необходимые записи DNS:

  • Одна TXT-запись для подтверждения домена
  • Одна CNAME-запись для каждого добавляемого языка

Процесс распространения DNS обычно занимает 20–30 минут, прежде чем ваш сайт сможет отображать многоязычные страницы.

Следующий шаг — вставить LinguiseLinguiseLinguise LinguiseLinguiseLinguiseLinguise LinguiseLinguise . Затем перейдите в «Настройки» > «Язык» в своей учетной записи HubSpot и вставьте скрипт в поле «HTML заголовка».

Меню настроек веб-сайта с языком и расширенными опциями.

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

Мужчина, работающий за компьютером, строящий свою мечту.

#4 Настройка переключателя языков

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

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

#5 Автоматический перевод контента

Наконец, мы переведем веб-сайт HubSpot, который был создан автоматически, на другой язык с помощью Linguise. Например, мы переведем с английского на немецкий.

Как вы видите, весь контент веб-сайта HubSpot будет автоматически переведен быстро и точно.

Мужчина перед экраном компьютера

Лучшие практики SEO для многоязычных веб-сайтов HubSpot

Женщина в желтой рубашке работает на зеленом ноутбуке. Она сидит рядом с горшком с растением.

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

Используйте теги hreflang и канонические теги правильно

Зеленые и оранжевые теги ссылок SEO для оптимизации

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

Хорошая новость заключается в том, что если вы используете HubSpot CMS с Linguise, поддержка этих тегов hreflang настраивается автоматически. Это означает, что вам не нужно добавлять теги вручную, поскольку система будет генерировать и управлять hreflang для каждой языковой версии вашего сайта. Вот пример реализации hreflang в статье.

Скриншот редактора кода с поисковой строкой Lingoose

Между тем, канонический тег должен использоваться осторожно. Не заставляйте все языковые версии указывать на один канонический URL; каждая языковая версия должна иметь свой собственный канонический тег. 

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

Оптимизируйте тег title и мета-описание на каждом языке

Заголовки страниц (теги title) и мета-описания являются наиболее важными элементами SEO на странице. Если вы используете один шаблон в HubSpot для нескольких языков, убедитесь, что каждая версия имеет заголовок и мета-описание, соответствующие целевому языку. Это повышает релевантность поиска и кликабельность результатов поиска.

Например, настройте контент вместо написания мета-описания на английском для всех версий. Если ваша страница продает одежду и вы ориентируетесь на испанский рынок, мета-описание типа «Compra ropa moderna para hombre y mujer con envío gratis» будет гораздо более эффективным, чем версия на английском.

Используйте SEO-дружественные и связанные с языком URL-адреса

Структура URL играет большую роль в многоязычной SEO. Используйте структуры, которые указывают язык контента, такие как подпапки (example.com/fr/), поддомены (fr.example.com) или параметры (example.com?lang=fr). В HubSpot подпапки часто являются самым простым вариантом для управления SEO.

Также убедитесь, что ваши URL-адреса различаются не только по структуре, но и по языку. Например, английская страница «О нас» может быть записана как example.com/en/about-us, а французская версия должна быть example.com/fr/a-propos. Это помогает пользователям и поисковым системам сразу понять языковой контекст.

Обратите внимание на перевод ALT-текста изображений и визуального контента

Мужчина в зеленой рубашке представляет данные на ноутбуке. Он указывает на экран.

Альтернативный текст на изображениях часто забывают в мультиязычных стратегиях SEO, хотя он важен для доступности и видимости в Google Images. Убедитесь, что каждая языковая версия вашего сайта имеет альтернативный текст, который правильно переводится и описывает содержание изображения соответствующим образом.

Например, изображение, показывающее человека, читающего книгу, может иметь альтернативный текст “Человек читает книгу” в английской версии и “Человек читает книгу” во французской версии (“Personne lisant un livre”). Это не только помогает пользователям с нарушениями зрения, но и увеличивает шансы изображения появиться в местных поисковых запросах изображений.

Отправьте мультиязычную карту сайта в Google Search Console

Google должен знать, что у вас есть несколько языковых версий вашего контента. Поэтому отправка XML-карты сайта, включающей все многоязычные страницы, в Google Search Console очень важна. HubSpot CMS автоматически создает карту сайта, но вы должны убедиться, что каждая языковая версия указана.

Многоязычная карта сайта в идеале должна включать элемент <xhtml:link rel=“alternate” hreflang=“…”> , чтобы показать связь между языками. Как только вы отправите правильную карту сайта, Google быстрее проиндексирует все языковые версии вашего сайта и направит пользователей на наиболее релевантные страницы.

Готовы исследовать новые рынки? Попробуйте наш автоматический сервис перевода бесплатно с нашим 1-месячным безрисковым испытанием. Кредитная карта не требуется!

Заключение

Теперь вы понимаете, как создать многоязычный веб-сайт с помощью HubSpot CMS. Вы можете начать шаги с планирования языка, создания страниц и оптимизации SEO, все на одной платформе, без хлопот с кодированием. Однако для действительно оптимизированного пользовательского опыта и производительности SEO настоятельно рекомендуется интеграция с автоматизированным сервисом перевода, таким как Linguise .

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

Вас также может заинтересовать чтение

Не упустите возможность!
Подпишитесь на нашу рассылку

Получайте новости об автоматическом переводе веб-сайтов, международной SEO и многом другом!

Invalid email address
Give it a try. One per month, and you can unsubscribe at any time.

Не уходите без обмена вашим email!

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

Не упустите возможность!
Invalid email address