How can I tell Google Translate to not translate a section of a website?

JavascriptHtmlGoogle Translate

Javascript Problem Overview


Google Translate has a developer tool that will enable google translate on a website. Is there a way to tell Google Translate to not translate a section of the website? Perhaps with a class name on an HTML element?

I've tried the HTML5 translate=no attribute. It has no effect.

This is a particular problem because Google is mistranslating the name of the website.

Javascript Solutions


Solution 1 - Javascript

According to Google instructions, setting class="notranslate" prevents Google translation. This appears to work, though using it inline (e.g., for a single word) may imply some confusion, so you need to check out what happens.

For example,

Welcome to the <span class="notranslate">Cool</span> company website!

translates into Spanish as “Bienvenido a la Coolweb de la compañía!”, which isn’t that cool, though it demonstrates that “Cool” has been taken as a proper name; without the markup, the text would translate as “Bienvenido a la fresca web de la empresa!”.

Reformulating the text as

Welcome to the website of <span class="notranslate">Cool</span>!

would result in “Bienvenido a la página web de Cool!”, which looks better except that “site” has been mistranslated.

For different target languages, different problems may and will arise. In general, the simpler the grammatical structure of a sentence is, the more often it will get translated reasonably well.

The bottom line is: you can try to prevent translation using class=notranslate, but the problems of Google Translator may cause confusion.

Solution 2 - Javascript

Just a quick update, the HTML5 translate="no" attribute seems to work as intended by now :)

I tested it in a simple HTML that I passed to the translator and it seems to accept both forms of instruction (the class works fine as well)

Solution 3 - Javascript

To disable translation of an entire page, try this in the header:

<meta name="google" content="notranslate" />

From Meta tags that Google understands (bold added by me):

> When we recognize that the contents of a page are not in the language > that the user is likely to want to read, we often provide a link to a > translation in the search results. In general, this gives you the > chance to provide your unique and compelling content to a much larger > group of users. However, there may be situations where this is not > desired. This meta tag tells Google that you don't want us to provide > a translation for this page.

Solution 4 - Javascript

using <span class="notranslate"></span> stops translation but does not suppress the popup.

I used Chrome's "Translate to English" context menu to see which words were being translated.

My site used the word "Handicaps". Google wanted to do a French to English translation, suggesting "Handicaps" be changed to "Disabilities". Dropping "Handicaps" for "Player Handicap" solved my issue.

Solution 5 - Javascript

You could make the name of the site an image.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionkingjeffreyView Question on Stackoverflow
Solution 1 - JavascriptJukka K. KorpelaView Answer on Stackoverflow
Solution 2 - JavascriptTaruliaView Answer on Stackoverflow
Solution 3 - JavascriptmivkView Answer on Stackoverflow
Solution 4 - JavascriptShannon McGeeView Answer on Stackoverflow
Solution 5 - JavascriptSpliFFView Answer on Stackoverflow