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 でサードパーティ ツールを使用する必要がある理由はいくつかあります。特に多言語の Web サイトの場合は、HubSpot CMS が特定の機能を自動的にサポートしていないなどの理由が挙げられます。.

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

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

  • コード化されたファイルでは言語タグがサポートされません。コード化されたテンプレートを使用する場合は、またはセクションで言語タグを手動で設定する必要があります。

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

そのため、これらすべての機能をサポートし、HubSpot CMSとスムーズに連携するサードパーティ製の翻訳ツールが不可欠です。LinguiseLinguise その一つです。Linguise Linguise 、コンテンツを80以上の言語に自動翻訳し、高品質な結果を提供します。.

HubSpot ウェブサイトにLinguiseをインストールするには、いくつかの手順を実行する必要があります

Linguiseを作成Linguiseあることを確認してください。Linguiseにサインインまたは登録すると、翻訳したいドメインを登録するよう求められます。https://を含むドメイン全体を入力し、「その他のクラウドホスト型CMS」オプションを選択してください。

さまざまなオプションを備えた自動入力設定メニュー

次に、ウェブサイトのプライマリ(ソース)言語と追加するターゲット言語を選択します。.

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

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

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

EntriはドメインのパブリックDNSをチェックし、ドメインプロバイダー(Cloudflareなど)を検出し、そのプロバイダーのログインページを表示します。ログイン後、Entriは必要なすべてのDNSレコードを自動的に追加します。

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

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

次のステップは LinguiseにあるLinguise。HubSpot「設定」>「言語」、スクリプトを「ヘッダーHTML」フィールドに貼り付けます。

言語と詳細オプションを備えた Web サイト設定メニュー。.

このコードは、ウェブサイトを 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つの正規URLにリンクさせるのではなく、各言語バージョンごとに正規URLを設定する必要があります。. 

例えば、フランス語のページには、英語版のURLではなく、フランス語版のURLを正規URLとして設定する必要があります。これにより、Googleは各言語版がそれぞれ異なるオリジナルページであると認識し、重複コンテンツと見なさなくなります。.

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

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

例えば、すべてのバージョンでメタディスクリプションを英語で書くのではなく、コンテンツをカスタマイズしましょう。もしあなたのページが衣料品を販売していて、スペイン市場をターゲットにしているなら、「男性と女性のためのモダンな服を送料無料で購入」のようなメタディスクリプションの方が、英語版よりもはるかに効果的です。.

SEOフレンドリーで言語に関連した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テキスト翻訳に注意してください

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

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

例えば、本を読んでいる人の画像に、英語版では「本を読んでいる人」、フランス語版では「本を読んでいる人」という代替テキストを付けるといった具合です。これは、視覚障害のあるユーザーにとって役立つだけでなく、ローカル画像検索で画像が表示される可能性も高まります。.

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

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

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

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

結論

これで、HubSpot CMSを使って多言語ウェブサイトを作成する方法が分かりました。言語プランニング、ページ作成、SEO最適化といった一連の手順を、コーディングの手間をかけずに、すべて1つのプラットフォームで開始できます。ただし、真に最適化されたユーザーエクスペリエンスとSEOパフォーマンスを実現するには、 Linguise のような自動翻訳サービスとの連携を強くお勧めします。.

Linguiseを使えば、ウェブサイトのコンテンツ全体を80以上の言語に瞬時に正確に翻訳できます。HubSpotウェブサイトで最高の多言語エクスペリエンスを提供し、世界中のオーディエンスに効率的にリーチしたいとお考えですか?そんな時は、 Linguiseを使ってウェブサイトを自動かつプロフェッショナルに翻訳しましょう!

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

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

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

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

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

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

お見逃しなく!
Invalid email address