Conteúdo em vários idiomas

Last updated:

Qualquer empresa que faça negócios entre regiões ou com uma base de clientes que fale vários idiomas precisa ser capaz de se conectar com seu público no idioma dele. Com o HubSpot CMS, os usuários podem criar variações de conteúdo em vários idiomas, permitindo que o usuário final visualize o conteúdo no idioma com o qual se sente mais confortável.

A HubSpot define um número de facetas de um site em vários idiomas para você automaticamente, mas também há um número de etapas que os desenvolvedores devem tomar para garantir que o site esteja pronto para vários idiomas. 

Funcionalidades padrão de vários idiomas do HubSpot

Sempre que uma variante de idioma for criada para uma página no HubSpot, nós automaticamente: 

  • Criamos uma nova entrada no mapa do site XML indicando o nome e a URL da página traduzida.
  • Especificamos o idioma do conteúdo no <head> da página para modelos criados usando a funcionalidade de arrastar e soltar.
  • Identificamos outras páginas dentro do grupo de conteúdo em vários idiomas seguindo o formato padrão apropriado, que marca as outras páginas como alternativas para evitar erros de conteúdo duplicado e também identifica o código ISO 639-1 associado à(s) tradução(ões):

    <link rel="alternate" hreflang="lang_code" href="url_of_page" />

  • Reescrevemos os links nas páginas do idioma para navegar para versões intra-idioma da página associada. Isso ajudar os visitantes a permanecerem no idioma e evitar a necessidade de atualizar cada link em cada tradução de página. Para um determinado elemento, você pode desativar essa reescrita adicionando a classe "hs-skip-lang-url-rewrite" ao elemento. 

O que o HubSpot não faz

Com o HubSpot CMS, o HubSpot não:

  • traduz automaticamente o conteúdo da página para você.
  • direciona automaticamente os usuários para uma variação de idioma com base no GeoIP.
  • inclui automaticamente um módulo de troca de idioma no cabeçalho ou no site.
  • especifica automaticamente o idioma de uma página para arquivos codificados.
  • define automaticamente o atributo de direção do conteúdo para traduções que usam um idioma que lê da direita para a esquerda em vez de da esquerda para a direita para arquivos codificados.

Definir variáveis de idioma

Como os arquivos codificados não incluem automaticamente declarações de idioma ou atributos de direção do idioma, isso precisará ser configurado manualmente para os modelos codificados. As variáveis de idioma podem ser definidas em HTML ou preenchidas via HubL, como no modelo de Boilerplate do CMS. 

Definir essas propriedades usando o HubL permitirá que esses dados sejam preenchidos dinamicamente no HTML de uma página com base no conjunto de idiomas da página no HubSpot CMS.

<html lang="{{ html_lang }}" {{ html_lang_dir }}>

Usar módulos editáveis em nível de página

Para garantir que o conteúdo possa ser localizado em cada instância de uso de um modelo, sempre que possível, utilize módulos personalizados em vez de conteúdo HTML codificado. A criação de módulos que podem ser editados em nível de página permitirá que os criadores de conteúdo definam o conteúdo específico que deve aparecer em cada página sem ter que ajustar o código do modelo. Também permitirá o uso de conteúdo exclusivo em páginas que compartilham um modelo. 

Incluir traduções de campos em módulos e temas personalizados

Para apoiar sua equipe global, você pode publicar traduções dos módulos que você criou no HubSpot.

Depois de traduzir o conteúdo do módulo e publicá-lo nos idiomas dos membros da equipe, os usuários verão os rótulos de campo para esse módulo no idioma padrão de suas contas. O conteúdo em um módulo traduzido não será traduzido automaticamente; você precisará fazer isso sozinho. Você pode criar traduções do seu módulo em qualquer idioma compatível.  

Você pode definir traduções usando as ferramentas de desenvolvimento local ou por meio do Gerenciador de design.

Desenvolvimento local

Para definir traduções usando as ferramentas de desenvolvimento local, cada pasta de módulo e cada pasta de tema pode conter uma pasta _locales com subpastas do idioma local, cada uma com um arquivo messages.json contendo as traduções dos campos do módulo.

Captura de tela da edição das traduções do módulo localmente no código VS

Gerente de design

Para definir as traduções de campos por meio do Gerenciador de design, depois de exibir o módulo, acesse a opção "Adicionar traduções" no lado direito da tela. Selecione os idiomas com os quais sua equipe trabalha no menu suspenso. A partir daí, você poderá selecionar cada idioma e especificar as convenções de rotulagem para cada campo em cada idioma.

Captura de tela das traduções de campos no gerenciador de design

As traduções dos campos dos temas não têm uma interface no gerenciador de design e precisam ser editadas nos arquivos .json.

Traduzir páginas do sistema

Para configurar traduções para as páginas do sistema, incluindo páginas de redefinição de senha e assinatura de e-mail, você pode personalizar os campos de tag do HubL e do módulo com seu conteúdo traduzido. Saiba mais sobre os campos disponíveis para os módulos e as tags HubL de páginas do sistema.

Incluir um alternador de idioma

Para permitir que os usuários finais alternem entre as traduções disponíveis, é aconselhável que um módulo de troca de idioma seja adicionado ao seu site. 

Um exemplo de como implementar um botão de troca de idioma pode ser encontrado no Boilerplate de temas do CMS. 

{# Header navigation row one #} <div class="header__row-1"> {% if content.translated_content.values()|selectattr('published')|length || is_listing_view && group.translations %} <div class="header__language-switcher header--element"> <div class="header__language-switcher--label"> {% module 'language-switcher' path='@hubspot/language_switcher', label='Language switcher', display_mode='localized' %} <div class="header__language-switcher--label-current"> {{ locale_name(locale) }}</div> </div> </div> {% endif %} <div class="header__search header--element"> {% module 'site_search' path='@hubspot/search_input', label='Search', field_label='Search', placeholder='' %} </div> </div> {# End header navigation row one #}

Implementar pesquisa em sites com vários idiomas

A Pesquisa de conteúdo permite consultar conteúdo nos diferentes idiomas do seu site. O parâmetro de filtro de idioma pode ser usado ao aplicar /contentsearch/v2/search para retornar apenas os idiomas especificados, o que permite criar experiências de pesquisa para cada idioma ou permitir que os visitantes pesquisem em vários idiomas em seu site. 

Usar parciais e módulos globais

Use campos de módulo para tornar o texto editável nos cabeçalhos, rodapés e barras laterais. Coloque esses módulos em parciais globais. Os criadores de conteúdo se beneficiarão da facilidade de edição e as parciais globais também permitem definir configurações para cada idioma. 
Captura de tela do editor de página mostrando o cabeçalho parcial
Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..