HubSpot CMSで多言語ウェブサイトを作成する方法(完全ガイド)

ソーシャルメディアのアイコンが表示されたノートパソコンの隣に座っている人
目次

多言語ウェブサイトの作成 は、思っているほど複雑ではありません。特にHubSpotのようなCMSを使えばなおさらです。このプラットフォームは、複雑なコーディングや過度に技術的な設定を必要とせずに、複数言語でのサイト作成と管理のプロセスを容易にするように設計されています。ページ設定、ナビゲーションから自動翻訳機能まで、すべてが利用可能で、すぐに活用できます。

このガイドでは、HubSpot CMSを使った多言語ウェブサイト作成の完全な手順を解説します。言語戦略の立案から初期サイトのセットアップ、翻訳ツールとの連携、そして様々な市場でウェブサイトのパフォーマンスを最適化するための重要なSEO実践までを網羅します。一歩ずつ進めていきましょう!

多言語ウェブサイトにHubSpot CMSを選ぶ理由

翻訳ソフトを使ってノートパソコンで作業している人。さまざまな旗が言語を表しています。.

強力でありながら使いやすい CMS を探して多言語ウェブサイトを構築したいなら、HubSpot CMSは完璧な選択肢です。このプラットフォームは、初心者でもプロでも、魅力的で構造化されたウェブサイトを複数の言語で簡単に構築できるように設計されています。

HubSpot CMSが多言語ウェブサイトプロジェクトに最適な選択肢である理由をいくつかご紹介します。.

  • コーディング不要で無料、そして簡単に使える – HubSpot CMSは、コーディングの知識がなくても使える無料ツールを提供しています。ドラッグ&ドロップエディタと柔軟なテーマにより、開発者を必要とせずに誰でもプロフェッショナルなサイトを作成できます。技術的な複雑さに対処することなく、コンテンツとユーザーエクスペリエンスの構築に集中したい場合に最適です。
  • 多言語サポートを標準搭載 – HubSpot CMSでは、ページのネイティブ版を複数の言語で作成できます。各バージョンは個別に管理しながらも、統合されたシステム内で連携を保てるため、ナビゲーションとコンテンツ管理が簡単です。言語別のURLを設定したり、hreflangタグなどの多言語SEO機能を利用したりすることもできます。
  • マーケティングおよびCRMツールとの統合 – 多言語サイトをHubSpotのマーケティング、営業、カスタマーサービスツールとシームレスに連携できます。例えば、ユーザーの言語に基づいてお問い合わせフォーム、チャットボット、メールマーケティングのコンテンツを表示できます。これにより、よりパーソナライズされた関連性の高いユーザー体験を実現します。
  • ウェブサイト分析機能を標準搭載 – HubSpotは、ウェブサイトの各言語版のパフォーマンスを追跡するための分析機能を標準で提供しています。どのページが最も閲覧されているか、オーディエンスがどこから来ているか、どのように相互作用しているかを、追加のツールなしで単一のダッシュボードから確認できます。

HubSpot CMSで多言語ウェブサイトを作成する手順

デスクに座り、ノートパソコンと植物を前にした男性。画面上にはチェックリスト。.

多言語ウェブサイトを構築するには、よく考えられた戦略、クリーンな構造、そして多言語のニーズを簡単にサポートするプラットフォームが必要です。HubSpot CMSにはそれがすべて揃っています。それでは、手順を始めましょう!

#1 多言語戦略の計画

エディターに触れる前の最初のステップは、慎重な計画です。これは、多言語サイトがさまざまな地域のオーディエンスにとって見栄えがよく、適切に機能するために極めて重要です。.

  • ターゲット市場やリーチしたいオーディエンスに基づいて言語を選択します。アナリティクスや市場調査のオーディエンスデータを使用して、最も関連性の高い言語を優先します。この調査により、ウェブサイトに追加する言語も決定されます。.
  • 使用するURL構造を決定します。HubSpot CMSは、サブドメイン(例:fr.example.com)、サブフォルダ(example.com/fr)、URLパラメータ(example.com?lang=fr)など、さまざまなURL構造形式をサポートしています。サブフォルダはメインドメイン上に留まるため、通常SEOに最も推奨されます。.
  • 各言語でどの主要ページを利用可能にするかを決定します。これには、ホームページ、会社概要、サービス、お問い合わせ、人気記事が含まれます。このコンテンツマップにより、すべての言語で同等のユーザー体験を確保できます。.

 

#2 ウェブサイトの設定

戦略の準備が整ったら、HubSpot CMS上でウェブサイトの基盤を構築する時です。まず、HubSpotアカウントをすでにお持ちであることを確認してください。まず試してみたい場合には、HubSpotが無料トライアルも提供していることを知っておく必要があります。.

アカウントを作成してログインすると、さまざまなメニューナビゲーションと製品設定オプションがあるダッシュボードページに移動します。次の画面が表示されたら、 コンテンツ > ウェブサイトページ メニューを選択します。ウェブページの作成を開始するには、作成ボタンを選択します。

ウェブサイトのページから不要なトラッキングコードを削除する

次に、カスタマイズしやすいレスポンシブテーマまたはテンプレートを選択します。HubSpotは、すぐに使用できるテーマや、ドラッグアンドドロップエディターでブランドに合わせて変更できるテーマを多数提供しています。テーマを選択したら、 アクティブテーマとして設定 ボタンをクリックします。

ブランドデザインの例を見ながらノートパソコンで作業する女性

その場合、エディターページに移動します。ここでは、ウェブサイトのニーズに応じてさまざまな要素を直接編集できます。. 

 Linguiseで夢のウェブサイトを構築しましょう。ウェブサイトビルダーダッシュボードのスクリーンショット。.

要素を編集するには、それをクリックし、左側の コンテンツ セクションで調整します。

 Linguiseを使用したウェブサイトインターフェースのスクリーンショット。コンピューターで作業している人が表示されています。.

同様に、新しいセクション、モジュール、またはレイアウトを追加したい場合も、HubSpot CMSは以下のようなさまざまなモジュールを提供しています:

  • テキスト
  • コマース
  • デザイン
  • フォームとボタン
  • 本文コンテンツなど.

ページエディタの左側から右側へ、(+) 記号を選択するか、直接ドラッグ&ドロップするだけです。. 

アニメーションツールを示す動画編集ソフトウェアのインターフェースのスクリーンショット。.
言語の壁を打ち破る
言語の壁に別れを告げ、無限の成長にこんにちは!自動翻訳サービスを今すぐお試しください。.

#3 自動翻訳ツールとの統合

ウェブサイトのページの構築が完了したら、 HubSpotウェブサイトを統合する 時です。自動翻訳ツールと連携させましょう。今回は、 Linguiseという外部ツールを使用します。

HubSpot CMSは特定の機能を自動的にサポートしていないため、特に多言語ウェブサイトでは、HubSpotとサードパーティツールを併用する必要がある理由はいくつかあります。例えば、以下のような機能です。.

  • プランに基づく言語とページの制限 – HubSpotは、サブスクリプションティアに応じてコンテンツごとの言語バリエーション数を制限します。例えば、Starterプランではコンテンツごとに最大3言語までしか許可されませんが、 Linguise は無制限の言語サポートを提供し、全プランで最大85言語が利用可能で、無制限のページを提供します。

  • 特定のページタイプにおける多言語サポートの制限 – 404 などのシステムページは多言語に翻訳できず、ブログやナレッジベースのコンテンツの翻訳は、通常のウェブサイトページとは異なる、より手動的なプロセスに従います

  • コード化されたファイルの言語タグサポートなし – コード化されたテンプレートを使用する場合、

  • RTL言語のテキスト方向設定がありません –  アラビア語やヘブライ語などの言語では、テキストの方向を正しくするために、dir=”rtl”属性を自分で追加する必要があります。

だからこそ、これらすべての機能をサポートし、HubSpot CMSと適切に統合するサードパーティの翻訳ツールが不可欠です—Linguise はその一つです。 Linguise は、高品質な結果でコンテンツを80以上の言語に自動翻訳できます。.

HubSpotウェブサイトに Linguise 自動翻訳をインストールするには、いくつかの手順があります。

まず、 Linguise アカウントを作成したことを確認してください。 Linguise ダッシュボードにサインインまたは登録すると、翻訳したいドメインを登録するよう求められます。https:// を含む完全なドメインを入力し、OTHER CLOUD HOSTED CMS オプションを選択してください。 

さまざまなオプションがある自動入力設定メニュー

次に、ウェブサイトの主要(ソース)言語と、追加したいターゲット言語を選択します。.

翻訳言語リストページのスクリーンショット。さまざまな言語がリストされています。.

Linguise ダッシュボードでドメインの登録が正常に完了すると、DNS を自動的に接続するオプションが表示されます。Entri という機能を使用すると、手動設定なしで必要な DNS レコードをすべて追加できます。.

HubSpot CMSで多言語ウェブサイトを作成する方法(完全ガイド)

Entriはあなたのドメインの公開DNSを確認し、ドメインプロバイダー(Cloudflareなど)を検出して、そのプロバイダーのログインページを表示します。ログイン後、Entriは必要なDNSレコードをすべて自動的に追加します:

  • ドメイン検証用のTXTレコード1件
  • 追加する言語ごとに1つのCNAMEレコード

DNSの伝播プロセスは通常20~30分かかり、その後サイトで多言語ページが表示されるようになります。.

次のステップは、 Linguise スクリプトを貼り付けることです。このスクリプトは Linguise ダッシュボードで確認できます。次に、HubSpotアカウントの 設定 > 言語 に移動し、スクリプトをHead HTMLフィールドに貼り付けてください。

言語と詳細オプションを含むウェブサイト設定メニュー。.

このコードは、あなたのウェブサイトを Linguiseと自動的に統合します。さらに、デフォルトの言語切り替えツールも自動的に生成されます。.

コンピューターで作業しながら夢を築く男性。.

#4 言語スイッチャーのカスタマイズ

さらに、Linguiseダッシュボードで言語旗の表示メニューを選択することで、好みに応じて言語スイッチャーを設定することもできます。例えば、表示される言語の名前、旗のアイコン、色、テキストなどの設定から始められます。.

このページでは、ウェブサイトの言語切り替えに最初に表示される言語を並べ替えることもできます。.

#5 コンテンツを自動翻訳する

最後に、自動的に作成されたHubSpotのウェブサイトを、 Linguiseを使用して別の言語に翻訳します。例えば、英語からドイツ語に翻訳します。.

ご覧のとおり、HubSpotのウェブサイトコンテンツはすべて、迅速かつ正確に自動翻訳されます。.

コンピューター画面の前にいる男性

多言語HubSpotウェブサイトのSEOベストプラクティス

黄色いシャツを着た女性が緑色のノートパソコンで作業しています。彼女は鉢植えの植物の隣に座っています。.

HubSpotで多言語ウェブサイトを作成するだけでなく、実装する 国際SEO戦略 が、サイトの各言語バージョンが検索結果で適切に表示されるようにする必要があります。以下は、HubSpotベースの多言語サイトに実装できるSEOのベストプラクティスです。

hreflangタグとcanonicalタグを正しく使用する

最適化のための緑とオレンジのSEOリンクタグ

hreflangタグ は、特定のページの対象言語と地域を検索エンジンに伝えます。これはコンテンツの重複を避け、ユーザーが適切な言語バージョンに誘導されるようにするために重要です。 

良いニュースは、HubSpot CMSを Linguiseと併用している場合、これらのhreflangタグのサポートが自動的に設定されることです。つまり、タグを手動で追加する必要はなく、システムがサイトの各言語バージョンに対してhreflangを生成および管理します。以下は、記事におけるhreflang実装の例です。.

Lingoose検索バーを備えたコードエディタのスクリーンショット

一方、canonicalタグは慎重に使用する必要があります。すべての言語バージョンを1つのcanonical URLにポイントさせないでください。各言語バージョンには独自のcanonicalが必要です。. 

例えば、フランス語のページには、英語版のURLではなくフランス語版のURLへのcanonicalを設定する必要があります。これにより、Googleは各言語版が異なるオリジナルページであり、重複コンテンツとは見なされないことを理解できます。.

すべての言語でタイトルタグとメタディスクリプションを最適化する

ページタイトル(タイトルタグ)とメタディスクリプションは、オンページSEOにおいて最も重要な要素です。HubSpotで1つのテンプレートを複数言語に使用する場合、各バージョンにターゲット言語に一致するタイトルとメタディスクリプションがあることを確認してください。これにより、検索の関連性と検索結果のクリック率が向上します。.

たとえば、すべてのバージョンでメタディスクリプションを英語で書くのではなく、コンテンツをカスタマイズしましょう。あなたのページが衣料品を販売していて、スペイン市場をターゲットにしている場合、「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は構造だけでなく言語の面でも異なるようにしてください。例えば、英語の「About Us」ページはexample.com/en/about-us、フランス語版はexample.com/fr/a-proposとすることができます。これにより、ユーザーと検索エンジンが言語のコンテキストを即座に理解できるようになります。.

画像やビジュアルコンテンツのALTテキストの翻訳に注意を払いましょう

緑のシャツを着た男性がノートパソコンでデータを提示している。彼は画面を指さしている。.

画像のAltテキストは、アクセシビリティとGoogle画像検索での可視性にとって重要であるにもかかわらず、多言語SEO戦略ではしばしば忘れられがちです。サイトの各言語バージョンに、正しく翻訳され、画像の内容を適切に説明するAltテキストがあることを確認してください。.

例えば、本を読んでいる人を写した画像には、英語版では「Person reading a book」、フランス語版では「Personne lisant un livre」というaltテキストを設定できます。これは視覚障害のあるユーザーの助けになるだけでなく、地域の画像検索で画像が表示される可能性も高めます。.

多言語サイトマップをGoogle Search Consoleに送信する

Googleは、あなたのコンテンツに複数の言語バージョンがあることを認識する必要があります。そのため、すべての多言語ページを含むXMLサイトマップを Google Search Console に送信することが非常に重要です。HubSpot CMSはサイトマップを自動的に作成しますが、各言語バージョンが記載されていることを確認する必要があります。

多言語サイトマップには、言語間の関係を示すために <xhtml:link rel=“alternate” hreflang=“…”> 要素を含めるのが理想的です。正しいサイトマップを送信すると、Google はサイトのすべての言語バージョンをより迅速にインデックスし、ユーザーを最も関連性の高いページへ誘導します。.

新しい市場を開拓する準備はできていますか?リスクフリーの1ヶ月トライアルで、当社の自動翻訳サービスを無料でお試しください。クレジットカードは不要です!

結論

HubSpot CMSで多言語ウェブサイトを作成する方法を理解できたでしょう。言語計画からページ作成、SEO最適化まで、コーディングの手間なく、すべてを1つのプラットフォームで始められます。ただし、真に最適化されたユーザー体験とSEOパフォーマンスを実現するには、 Linguise のような自動翻訳サービスとの連携を強くお勧めします。.

Linguiseを使えば Linguise、ウェブサイトのコンテンツ全体を80以上の言語に瞬時に、かつ正確に翻訳できます。HubSpotのウェブサイトで最高の多言語体験を提供し、グローバルなオーディエンスにより効率的にリーチしたいなら、今こそ Linguiseを使い始めて Linguise 、サイトを自動的かつプロフェッショナルに翻訳しましょう!

あなたも興味を持っているかもしれません

お見逃しなく!
ニュースレターを購読する

ウェブサイトの自動翻訳、国際SEOなどの最新情報をご覧いただけます!

Invalid email address
試してみてください。月額1回、いつでも退会できます。.

メールアドレスを共有せずに離れないでください!

宝くじに当選することを保証することはできませんが、翻訳に関する興味深い情報や時折の割引情報をお約束します。.

お見逃しなく!
Invalid email address