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. With browser translation, visitors handle translation themselves, you have no control over the result, and search engines only 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. If your app then updates that part of the page, it may no longer find the text it rendered. Some apps, particularly React apps, throw errors or show a mix of languages as a result.
It also translates everything it finds: your product name, people's names, code samples and user-generated content. 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 to translate, and your site shows it in the visitor's language. In React, for example:
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
- Few visitors need another language, and you don't need to appear in search results in those languages.
- 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.