複数の地域にわたるビジネス、または複数の言語を使用する顧客とのビジネスに取り組む企業は、相手の言語で関係を構築できなければなりません。HubSpotのCMSでは、コンテンツの各国語版を作成できるので、ユーザーは最適な言語でコンテンツを表示できるようになります。HubSpotでは多言語ウェブサイトの多くの機能が自動設定されますが、適切な多言語対応のためには開発者が実施しなければならない作業も少なくありません。
HubSpotによる自動処理
HubSpot上でページの多言語バリエーションが作成されると、次の処理が自動的に行われます。
- XMLサイトマップに、翻訳されるページの名前とURLを示す新しい項目が作成されます。
- ドラッグ＆ドロップ機能を使用して作成したテンプレートのページ
<head>の中に、コンテンツの言語が指定されます。
- 多言語コンテンツグループ内の適切な標準化書式に準拠した他のページが代替ページとして識別されて、重複コンテンツエラーが回避されます。さらに言語翻訳に関連するISO 639-1コードが特定されます。
<link rel="alternate" hreflang="[**lang_code**](https://developers.google.com/search/docs/specialty/international/localized-versions?visit_id=638932813313339584-46996478&rd=1#language-codes)" href="url_of_page" />
- 多言語ページ上のリンクが、同じ言語のリンク先ページにつながるように修正されます。これは、同じ言語で閲覧を続ける訪問者にとって役立つだけでなく、ページ翻訳の際にリンクを1つずつ更新する必要がなくなります。特定の要素では、クラスhs-skip-lang-url-requiredを要素に追加することにより、この修正を無効にすることができます。
HubSpotによって処理されない部分
次の事項はHubSpotのCMSによって自動的には処理されません。
- ページのコンテンツを翻訳する。
- GeoIPに基づいてユーザーを多言語版に自動的に振り向ける。
- ヘッダーまたはウェブサイトに言語切り替えモジュールを含める。
- コードファイルのページの言語を指定する。
- コードファイルについて、左から右ではなく、右から左に読む言語の翻訳についてコンテンツの方向属性を設定する。
ウェブサイトを多言語用に設定する
基本htmlの言語設定
言語宣言やコンテンツの言語方向属性はコードファイルに自動的には含められないため、コードテンプレートに手動で設定する必要があります。言語変数はHTMLの中で設定するか、CMSボイラープレートテンプレートの中など、HubL経由で設定できます。
HubLを使用してこれらのプロパティーを設定すると、HubSpotのCMS内のページの言語設定に基づいて、ページのHTML内にデータを動的に反映させることができます。
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
ページ編集可能モジュールを使用する
テンプレートを使用したインスタンスのコンテンツをローカライズするには、可能な限り、ハードコードされたHTMLコンテンツではなくモジュールを活用してください。ページ側で編集できるモジュールを作成することにより、制作担当者は、テンプレートコードを調整しなくても各ページに表示される特定のコンテンツを設定できます。テンプレートを共有するページの間で一貫したコンテンツを使用することも可能になります。
カスタムモジュールおよびテーマの中にフィールド翻訳を含める
グローバルチームに対応するために、HubSpot上に作成したモジュールの翻訳を公開できます。
モジュール内のコンテンツを翻訳し、チームメンバーの言語で公開した後、ユーザーには、モジュールのフィールドラベルがアカウントの既定の言語で表示されます。翻訳対象のモジュールのコンテンツは自動的には翻訳されないため、自分で翻訳する必要があります。モジュールの翻訳は、サポートされているどの言語でも作成できます。
翻訳は、ローカル開発ツールを使用して、またはデザインマネージャーを通じて設定できます。
ローカル開発
ローカル開発ツールを使用して翻訳を設定するには、各モジュールフォルダーおよび各テーマフォルダーに_localesフォルダーを、さらに言語ロケールのサブフォルダーを格納し、それぞれにモジュールフィールドの翻訳を含めたmessages.jsonファイルを配置できます。
デザインマネージャー
デザインマネージャーを通じてフィールド翻訳を設定するには、画面右側から［翻訳を追加］オプションに進みます。ドロップダウンメニューからチームが使用する言語を選択します。ここから、各言語を選択し、言語別に各フィールドのラベル表記を設定できます。
言語切り替え機能を含める
使用可能な翻訳をエンドユーザーが切り替えることができるように、ウェブサイトへの言語切り替えモジュールの追加を検討してください。
言語切り替え機能を実装する方法の例については、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 #}
多言語ウェブサイトへの検索の実装
コンテンツ検索は、貴社のウェブサイト上のさまざまな言語によるコンテンツに対応しています。/contentsearch/v2/search（英語）の利用時に言語フィルターパラメーターを使用することで、指定した言語のみが返されます。これにより、ウェブサイト上で各言語での検索や、複数言語での横断検索を実現できます。
グローバルパーシャルとモジュールを使用する
ヘッダー、フッター、サイドバーのテキストを編集可能にするには、モジュールフィールドを使用します。これらのモジュールをグローバルパーシャルの中に配置します。制作担当者にとっては編集が簡単になるだけでなく、グローバルパーシャルによって言語ごとの設定がサポートされます。
Last modified on December 10, 2025
