How to disable Google translate from HTML in Chrome

Html Problem Overview

I just made a website for a french restaurant. The website is in english, but I guess there is enough french on the website (labeled pictures of menu items) to prompt the visitor to translate the website if using Chrome.

Is there something I can add to the html to prevent chrome from asking to translate the page? I'd assume it'd be something like <html lang="en"> but that doesn't work.

Any ideas?

Thanks

Html Solutions

Solution 1 - Html

New Answer

Add translate="no" to your <html> tag, like so:

<html translate="no">

MDN Reference

Old Answer

(This should still work but is less desirable because it is Google-specific, and there are other translation services out there.)

Add this tag in between <head> and </head>:

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

Documentation reference

Solution 2 - Html

So for the ultimate solution I made;

<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">
<head>
  <meta name="google" content="notranslate" />
</head>
<body>
...
</body>
</html>

This worked for me.

Solution 3 - Html

The meta tag in the <head> didn't work for me, but

class="notranslate"

added to a parent div (or even <body>) did work and allows more precise control of the content you don't want to be translated.

Solution 4 - Html

Solution:

<html lang="en" class="notranslate" translate="no">    <!-- All translators -->
 <head><meta name="google" content="notranslate" /> <!-- Just for google -->
</head>                                                <!-- Close head      -->

The more simple way is just adding the translate="no" proprety. This can be made in divs, text and more. Here's an example:

// Just for instructions
// Do not copy or paste
console.log("The first div don't alows translateing. But the second, alows it.")
console.log("Open the translator and see the efect.")

DIV1
<div translate="no">
  Try translating me!
  <b>Olá - Hello - Hola</b>
</div>
<hr> DIV2
<div translate="">
  Now, you can do it!
  <b>Olá - Hello - Hola</b>
</div>

Note that this example has some problems with the StackOverflow viewer.

Disclaimer: This answer is repeated, on it is on the Community Wiki.

Solution 5 - Html

Disable google translate on your website

Add this to your <head></head>:

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

Solution 6 - Html

FYI, if you want something that will work for all content in your site (including that which is not HTML), you can set the Content-Language header in your response (source) to the appropriate language, (in my case, en-US).

This has the benefit here is that it will "disable" the offer to translate the page for you (because it will know the source language correctly), but for other, non-native readers, they will still have the option to translate your site into their own language, and it will work correctly.

(Also for my use case, where Chrome was offering to translate well formatted JSON from latin to English, that BS goes away.)

Solution 7 - Html

Try this for ultimate solution:

<html lang="en" class="notranslate" translate="no">    <!-- All translators -->
 <head><meta name="google" content="notranslate" /> <!-- Just for google -->
</head>                                                <!-- Close head      -->

The more simple way is just adding the translate="no" proprety. This can be made in divs, text and more. Here's an example:

// Just for instructions
// Do not copy or paste
console.log("The first div don't alows translateing. But the second, alows it.")
console.log("Open the translator and see the efect.")

DIV1
<div translate="no">
  Try translating me!
  <b>Olá - Hello - Hola</b>
</div>
<hr> DIV2
<div translate="">
  Now, you can do it!
  <b>Olá - Hello - Hola</b>
</div>

Note that this example has some problems on the stackoverflow viewer.

Solution 8 - Html

My Windows is german in german.

I made the following experiences in Chrome: If I set

<html lang="en" translate="no">

Google Translate comes up with suggestion to translate english.

Definitely I have to omit the lang property. This works for me:

<html translate="no">

No popup is coming up and the translation icon in the URL field is no longer displayed.

Solution 9 - Html

sometimes you need to block not all html, but specific element, in such case you could add class="notranslate" only to that element. ie. <div class="notranslate"> some content </div>

Content Type	Original Author	Original Content on Stackoverflow
Question	twinlakes	View Question on Stackoverflow
Solution 1 - Html	Matthew Adams	View Answer on Stackoverflow
Solution 2 - Html	İbrahim Sakacı	View Answer on Stackoverflow
Solution 3 - Html	edelans	View Answer on Stackoverflow
Solution 4 - Html	Tiago Rangel de Sousa	View Answer on Stackoverflow
Solution 5 - Html	rkalways	View Answer on Stackoverflow
Solution 6 - Html	BrainSlugs83	View Answer on Stackoverflow
Solution 7 - Html	Tiago Rangel de Sousa	View Answer on Stackoverflow
Solution 8 - Html	westor	View Answer on Stackoverflow
Solution 9 - Html	Dmitriy Sakhno	View Answer on Stackoverflow