123

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.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
kingjeffrey
  • 14,894
  • 6
  • 42
  • 47
  • I followed the link you provided and the first thing I saw were the choices "Add translation to the entire webpage" and "Add translation to a section of the webpage". Can you not structure your html in such a way that the second option will give the desired result? – nnnnnn Mar 09 '12 at 03:45
  • Unfortunately, selecting "Add translation to a section of the webpage" removes the "Step 3: Show optional settings" which are highly desirable. – kingjeffrey Mar 09 '12 at 09:04

5 Answers5

189

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.

gaspar
  • 898
  • 1
  • 13
  • 26
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Good one, thanks! And regarding the rest of the sentence that doesn't translate well - using this gadget (as Google calls it) you can just store your own updated translation for whatever you want if you are logged into Google with an account that's defined either as "Owner" or "Editor" – tsemer May 17 '13 at 13:18
  • 2
    Their own code also uses class="skiptranslate" which works as well. – Oliver Slay Jun 17 '16 at 19:13
  • nice but i wish that trick could also work on their website text translation section too : https://translate.google.com/?source=gtx&sl=en&tl=ar&text=For%20different%20target%20languages%2C%20different%20problems%20may%20and%20will%20arise.%20In%20general%2C%20the%20simpler%20the%20%3Cspan%20class%3D%22notranslate%22%3Egrammatical%20structure%3C%2Fspan%3E%20of%20a%20sentence%20is%2C%20the%20more%20often%20it%20will%20get%20translated%20reasonably%20well.&op=translate – user889030 Jul 05 '22 at 12:23
  • You can also use ` `, according to [Google docs](https://cloud.google.com/translate/troubleshooting). – Abel Wenning Sep 07 '22 at 09:22
44

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)

Mikko Rantalainen
  • 14,132
  • 10
  • 74
  • 112
Tarulia
  • 795
  • 5
  • 10
  • 5
    didnt work for me on chrome, while the class way did. In my case I set it on a so everything inside wont get translated.
     – Zig Mandel Apr 23 '15 at 16:33
  • 2
    I think this depends on how you're translating the page. At the time I used the google translator page, I don't know how chrome's translation bar handles things, because according to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate) it has no browser support at all. I only tested it on a span element though so no idea how the translator handles other elements. – Tarulia May 05 '15 at 17:10
  • Compatibility on MDN is still unchanged, no browser support. It does still work on the Google Translator. – Tarulia Jun 06 '18 at 13:23
  • 1
    @gman yes, it appears as if Google broke something on their translator. The `notranslate` class still works as expected though. However I would expect them to fix it at some point because the attribute is still in the HTML5 spec. – Tarulia Jul 28 '20 at 21:27
  • 1
    It didn't work for me, but `class="notranslate"` did. – Flimm Sep 25 '20 at 12:16
  • I assume using both is the best way for now –  Jan 24 '23 at 03:44
39

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

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

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

When Google recognizes that the contents of a page aren't in the language that the user likely wants to read, Google may provide a translated title link and snippet in search results. If the user clicks the translated title link, all further user interaction with the page is through Google Translate, which will automatically translate any links followed. 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

gaspar
  • 898
  • 1
  • 13
  • 26
mivk
  • 13,452
  • 5
  • 76
  • 69
3

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.

I found this 2nd solutions later: you can add the following meta tag to the <head></head> section of the HTML document:

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

Shannon McGee
  • 570
  • 5
  • 7
-35

You could make the name of the site an image.

SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • 12
    @GeoffreyBooth maybe he just learned a lot of things in the 3 years that have gone by? You know, actually a major component of this thing called stackoverflow. – m90 Feb 25 '16 at 14:33
  • 2
    This made suggestion made my day :D – Kalko Oct 18 '18 at 08:58
  • I dunno what was your reputation back then, but I'm wondering why don't you just remove this answer? – Ghasem Dec 25 '18 at 07:14
  • 16
    @AhmetCanGüven It only seems like trolling because it is a workaround that solves the problem *with downsides* (all visual). Given that at the time it appeared like there wasn't any alternative it made sense. What is really funny about this is the answer above "solves" the problem by disabling ALL translations on the page yet people think that's less of a downside than inserting an inline image with an alt tag. I let this answer live as an example of the saying "When your only tool is a hammer, everything looks like a nail". – SpliFF Jan 29 '19 at 05:39
  • 2
    Mind editing in a note that says that this was a viable workaround at the time? I think someone flagged this as Not an Answer/VLQ or something as this ended up in my review queue. – General Grievance Oct 04 '21 at 12:07
  • That's a nightmare for accessibility, flexibility, search optimization, etc (there are many more issues, but comments are limited :) –  Jan 24 '23 at 03:46