Magic Translate vs. Google Translate
Many visitors already translate websites with Google Translate, which is built into Chrome and available as an app and extension. So why should you translate your site yourself? Because with browser translation, the visitor does the work, the result is out of your control, and search engines only ever see your site in its original language.
At a glance
| Magic Translate | Google Translate in the browser | |
|---|---|---|
| Who translates | You, for every visitor | Each visitor, if they choose to |
| What gets translated | The text you mark | Everything on the page, including names and code |
| Search engines | Translated HTML with React SSR, Next.js or prerendered Angular apps | Only your original language is indexed |
| Language switcher | Yours, part of your site | The browser's toolbar |
| Web apps | Translations update with your components | Can break apps that change the page, such as React apps |
| Price | Free plan, then monthly plans based on translated characters | Free for visitors |
Why browser translation is not enough
Browser translation works on the page after your app has rendered it. It replaces the text on the page with translated text. When your app then updates that part of the page, the two get in each other's way: the app no longer finds the text it rendered, and some apps, React apps in particular, throw errors or show a mix of languages.
It also translates everything it finds: your product name, people's names, code samples and content your users wrote. And because it only happens in the visitor's browser, search engines never see a translated page, so your site can't be found in other languages.
Google also used to offer a website translator widget that you could add to your own site. It is no longer available for new websites.
How Magic Translate does it
You mark the text that should be translated, and your site shows it in the visitor's language, for example in React:
import { T } from '@magic-translate/react';const Banner = () => <T>Free shipping on all orders this week</T>;
Or on any website, with one script tag and <t> elements:
<h1><t>Welcome to our shop</t></h1>
Because your app renders the translations itself, they update with your components. With React SSR, Next.js or Angular prerendering, every language gets its own translated HTML for search engines.
When browser translation is enough
- Visitors in other languages are rare, and you don't need to be found in their language.
- Your site is mostly static text, so translation can't break it.
Ready to try it? Follow the getting started guide to translate your first component in five minutes.