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

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

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

このガイドでは、HubSpot CMSを使って多言語ウェブサイトを構築するための手順を、言語戦略の策定、サイトの初期設定、翻訳ツールとの連携、そして様々な市場でウェブサイトのパフォーマンスを最適化するための重要なSEO対策まで、網羅的に解説します。さあ、一歩ずつ進めていきましょう!

多言語ウェブサイトに HubSpot CMS を選択する理由は何ですか?

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

強力かつ使いやすい 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では無料トライアルも提供されているので、まずは試してみることをお勧めします。.

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

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

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

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

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

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

要素を編集するには、その要素をクリックして、 コンテンツ 左側の

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

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

  • 文章
  • 商業
  • デザイン
  • フォームとボタン
  • 本文内容等.

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

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

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

ウェブサイトのページ作成が完了したら、 HubSpotのウェブサイト と自動翻訳ツールを連携させる段階に入ります。今回は、 Linguise

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

  • プランに基づく言語とページの制限 – HubSpotでは、契約プランに応じてコンテンツごとの言語バリエーション数が制限されます。例えば、Starterプランではコンテンツごとに最大3言語までしか利用できませんが、 Linguise 言語サポートが無制限で、すべてのプランで最大85言語が利用可能であり、ページ数も無制限です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次のステップは LinguiseLinguiseLinguise LinguiseLinguiseLinguiseLinguise LinguiseLinguise 。次に、 「設定」>「言語」 HubSpotアカウントの

言語と詳細オプションを備えた 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