Webflow に Linguise の自動翻訳をインストールする

目次

Webflowのアクセス要件

Webflowで使用するクラウドAI自動翻訳には、設定を完了するためにいくつかのアクセス権が必要です:

  • Webflow管理者アクセス
  • ウェブサイトドメインのDNSアクセス

Webflowの設定は3つの簡単なステップで構成されています:

  1. 翻訳を許可するためにドメインを登録する
  2. 翻訳言語に応じてドメイン DNS を変更する
  3. Webflow設定に言語フラッグ切替リンクを追加する

Webflowサイトを多言語化する方法(動画)

Webflowドメインを登録する

接続または登録が完了した後、 Linguise dashboard、翻訳を承認するためにドメインの登録を求められます。

その目的のために、https:// を含めたドメイン名をコピーし、 Webflow をプラットフォームとして選択してください。

ウェブサイトプラットフォームを選択するためのドロップダウンメニュー

その後、ソース言語と対象言語を選択してください。.

ウェブサイトの基本言語と翻訳オプションを選択する。.

SEO 重要な注意点: 設定する言語数は SEO に大きな影響を与えます。翻訳言語を設定する際、インデックスされたページが多数(>500)ある場合、検索エンジンの処理に多くの時間がかかることがあります。これにより、元の言語での SEO に影響が出る可能性があります。That’は、最初に最大5言語を追加することを推奨する理由です。その後、インデックスが完了したら、月に3言語ずつ追加できます。

言語に応じてドメイン DNS を変更する

Entri を使用してドメイン DNS を自動的に追加する

ウェブサイトの登録に成功したら、 Linguise dashboard、インストールを進めるための2つのオプションがあります。 

おそらくこのコンテンツが表示されるはずです。DNSレコードを自動的に追加したい場合は、“ をクリックしてください。DNSを自動的に接続してください。” この機能(Entri と呼ばれます)は、DNSレコードを自動的に追加し、インストールを簡単に進めることができます。別のオプションとしては、ドメインプロバイダーで DNS を手動でコピーすることです。

ボタンをクリックした後、Entri は登録されたウェブサイトの URL を分析し、公開 DNS レコードを確認します。その結果に基づき、必要なプロバイダーと DNS を特定します。.

次に、クリックして “[your domain provider]で認証” (この例では、Cloudflareです)。パネルがドメインプロバイダーのログインページに変わり、ログインして続行できます。

ドメインプロバイダーにログインすると、Entri が残りの作業を自動的に行い、適切な DNS レコードを追加します。言語ごとに 1 つの DNS と、検証キー用に 1 つの TXT DNS が必要です。.

ドメイン内に DNS が追加されたことが確認できるはずです。例として:

認証が完了すると、Entri がすべての DNS 設定が正常に構成されたことを通知します。.

ドメイン上のすべての DNS エントリが伝搬されたら、すぐに翻訳機能を使用できるようになります(通常 20〜30 分かかります)。.

手動インストールをご希望の場合、以下に提供する手順に従って手動で実行することもできます。 

DNS レコードをコピー

ドメインを検証した後、ドメインに追加するDNSがコピーできる状態で画面にリダイレクトされます。ホスティング会社によって、ドメイン設定は多少異なる場合がありますが、フィールド名はほぼ標準です。これらのレコードは、ウェブサイトの多言語ページを fr.domain.com, es.domain.com…

以下が主な要素です。.

その後、ドメインマネージャに接続し、DNS設定エリアにアクセスする必要があります。その後、指示に従って、コピーできます:

  • ドメイン検証用のTXTレコード1つ
  • 言語用の1つまたは複数のCNAMEレコード

以下は’各レコードタイプ(TXT と CNAME)の例です:

すべてのレコードを追加した後、設定はこのようになるはずです。.

DNS検証を確認する

すべてのレコードをドメインのDNSに追加した後、ボタンをクリックしてDNS伝搬を確認できます。 DNS設定を確認。

DNS の検証には通常 30 分から 1 時間かかります。その後、Linguise ダッシュボードの DNS リストの右側に緑色のドットが表示されます。Webflow のウェブサイトの翻訳はほぼ完了していますが、国旗付き言語スイッチャーへのリンクがまだありません。.

DNS と言語スイッチャーの設定はやや技術的であることは理解しています;しかし、朗報です!無料インストールを提供します

Webflow に言語スイッチャーを追加する

言語スイッチャーは、希望する言語を選択するためのフラッグポップアップです。これを読み込むには、Webflow ページのヘッダーに記載されたコードをコピーする必要があります。フラッグ言語スイッチャーは、公開ウェブサイトに自動的に読み込まれます。.

コピーするリンクは、ドメイン登録の最後またはドメイン設定で提供されています。リンクをクリップボードにコピーしてください。.

次に、Webflow のウェブサイト管理画面で、次へ移動します:
ウェブサイト設定 > カスタムコード > ヘッドコード

Webflowドメインへの変更を公開するには、保存ボタンから公開ボタンをクリックしてください。.

現在、Webflowのフロントエンドで、Linguise言語スイッチャーが利用できるはずです。.

DNS と言語スイッチャーの設定はやや技術的であることは理解しています;しかし、朗報です!無料インストールを提供します

Webflow言語スイッチャーのデザイン

言語スイッチャーは、 Linguise ダッシュボード > 設定 > 言語フラッグ表示。 ここでのすべての変更は、ウェブサイトに反映されます。

英語のオプションがある言語設定を選択するドロップダウンメニューを示すスクリーンショットです。.

画面の右側に言語スイッチャーのプレビューがあります。設定できる要素は以下の通りです:

  • 3つのレイアウト:横並び、ドロップダウン、ポップアップ
  • 言語スイッチャーの位置
  • 言語スイッチャーの内容
  • 英語または母国語での言語名
  • 旗の形状とサイズ
  • 色とボックスシャドウ

Webflowのフロントエンド翻訳エディタ

フロントエンドエディタは、翻訳者がWebflow上の任意のHTMLコンテンツを任意の言語で変更できるようにします。ページ要素をクリックしてテキスト、リンク、または画像を置き換えることで、ページを編集できます。.

詳細はこちら フロントエンド翻訳エディタについて。

ファッションストアのロゴがある公園で微笑む女性