Magic Translate vs. Google Translate
多くの訪問者はすでに Google Translate を使ってウェブサイトを翻訳している。これは Chrome に組み込まれていて、アプリや拡張機能として利用できる。ブラウザ翻訳では、訪問者が自分で翻訳を行うので、結果をコントロールすることはできず、検索エンジンにはサイトが元の言語でしか表示されない。
一目で
| Magic Translate | ブラウザで Google Translate | |
|---|---|---|
| 誰が翻訳する | あなた、すべての訪問者に | 各訪問者、もし彼らが望むなら |
| 翻訳されるもの | あなたがマークしたテキスト | 名前やコードを含む、ページ上のすべて |
| 検索エンジン | React SSR、Next.js、または事前にレンダリングされた Angular アプリを使用して HTML を翻訳した | 元の言語だけがインデックスに登録される |
| 言語スイッチャー | あなたのもの、あなたのサイトの一部 | ブラウザのツールバー |
| ウェブアプリ | 翻訳はコンポーネントによって更新される | Reactアプリなど、ページを変更するアプリを壊す可能性がある |
| 価格 | 無料プラン、そして翻訳された文字に基づく月額プラン | 訪問者は無料だ |
ブラウザ翻訳だけでは不十分な理由
ブラウザの翻訳は、アプリがレンダリングした後にページ上で動作する。ページのテキストを翻訳されたテキストに置き換える。その後、アプリがページのその部分を更新すると、レンダリングされたテキストが見つからなくなる可能性がある。一部のアプリ、特にReactアプリでは、エラーが発生したり、結果として複数の言語が混在して表示される。
また、商品名、人名、コードサンプル、ユーザー生成コンテンツなど、見つかったすべてのものを翻訳する。また、訪問者のブラウザでのみ発生するため、検索エンジンには翻訳されたページは表示されないので、あなたのサイトは他の言語では見つからない。
Googleはかつて、自分のサイトに追加できるウェブサイト翻訳ウィジェットも提供していた。新しいウェブサイトでは利用できなくなった。
どうやって Magic Translate やるの
翻訳するテキストをマークすると、サイトには訪問者の言語で表示される。Reactでは、例えば：
import { T } from '@magic-translate/react';const Banner = () => <T>Free shipping on all orders this week</T>;
または、1つのスクリプトタグと <t> 要素があれば、どんなウェブサイトでも：
<h1><t>Welcome to our shop</t></h1>
アプリは翻訳自体をレンダリングするので、コンポーネントに合わせて更新される。React SSR、Next.js、Angular の事前レンダリングでは、すべての言語が検索エンジン用に独自の翻訳済みHTMLを取得する。
ブラウザ翻訳で十分だと
- 他の言語を必要とする訪問者はほとんどいないし、あなたはその言語で検索結果に表示する必要はない。
- あなたのサイトはほとんどが静止テキストだから、翻訳しても壊れない。
試す準備はできた？入門ガイドに従って、最初のコンポーネントを5分で翻訳する。