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

Question

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.

Ulund

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? – Caty

Unfortunately, selecting "Add translation to a section of the webpage" removes the "Step 3: Show optional settings" which are highly desirable. – Ulund

Answer 1

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.

Tome

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" – Nore

Their own code also uses class="skiptranslate" which works as well. – Dharana

nice but i wish that trick could also work on their website text translation section too : translate.google.com/… – Wildwood

You can also use <span translate="no"> </span>, according to Google docs. – Spree

November 2023: The class="notranslate" works perfectly. – Foremast

Answer 2

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)

Dietetics

didnt work for me on chrome, while the class way did. In my case I set it on a <table> so everything inside wont get translated. – Jehanna

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 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. – Dietetics

Compatibility on MDN is still unchanged, no browser support. It does still work on the Google Translator. – Dietetics

@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. – Dietetics

It didn't work for me, but class="notranslate" did. – Looney

I assume using both is the best way for now – Oshiro

Answer 3

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

Checkers

Answer 4

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" />

Passkey

Answer 5

You could make the name of the site an image.

Danuloff

@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. – Laaland

This made suggestion made my day :D – Crummy

I dunno what was your reputation back then, but I'm wondering why don't you just remove this answer? – Fructidor

@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". – Danuloff

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. – Osyth

That's a nightmare for accessibility, flexibility, search optimization, etc (there are many more issues, but comments are limited :) – Oshiro