229

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

Yves M.
  • 29,855
  • 23
  • 108
  • 144
twinlakes
  • 9,438
  • 6
  • 31
  • 42
  • 1
    Possible duplicate of [Disable Chrome translation bar on my website](http://stackoverflow.com/questions/7228972/disable-chrome-translation-bar-on-my-website) – Vincent Orback Feb 25 '16 at 21:13
  • 3
    You should ask yourself why? By doing this you block anyone from reading the site unless you've provided a translation in their language. Google Translate is not perfect, but makes things accessible. – Toni Leigh Dec 02 '19 at 20:21
  • 13
    @Toni Leigh speaking for myself, I have seen Google Translate mess with the Javascript and DOM behavior, resulting in various hard-to reproduce execution errors. – Eric Grange Dec 10 '19 at 15:23
  • 1
    @ToniLeigh because it's detecting the wrong source language. He wants to provide the correct source language. -- If `lang="en"` worked, it would not just "disable" google translate for him, but it would fix it for the non-English speakers who might need it. – BrainSlugs83 Feb 05 '20 at 19:32
  • I even had translated content in a mongo database from a manipulated dropdown form, messing my data completely up. – Kurt Van den Branden Mar 09 '20 at 18:38
  • 9
    Here is a good reason why: my website provides a native and good translation into French. However, the user never realises that they can select good French, because the website is automatically translated badly by Google into French. Instead, they send me messages, complaining about the bad grammar of the French website. – Flimm Sep 25 '20 at 12:06
  • The other reason is that depending on the app, Chrome sometimes identifies the language incorrectly. I've written apps which display part #s, and for whatever reason it asks to translate to Luxembourgish! – LarryBud Jan 04 '21 at 22:06
  • We had a case when a customer got "Rendez-Vous" instead of "Terminer" which is quite the opposite and might be even perceived as rude, depending on circumstances. – Marcel Mar 08 '22 at 09:01

11 Answers11

431

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

Matthew Adams
  • 9,426
  • 3
  • 27
  • 43
  • 32
    You can also exclude specific elements from translation: class="notranslate" – Anselm Oct 06 '13 at 15:55
  • 10
    The `value` attribute should be changed to `content="notranslate"` in order to pass HTML5 validation. – Leo Galleguillos May 18 '17 at 23:09
  • Updated URL for documentation: https://support.google.com/webmasters/answer/79812 – Ahi Tuna Jun 05 '18 at 15:10
  • 1
    Note that you have to hard refresh (or close and reopen chrome) before the translate message will disappear; not just a normal refresh. – Carter Medlin Aug 29 '18 at 23:02
  • did not help. it still translates even with this tag! – ses Nov 14 '18 at 15:43
  • thanks google for another helpful meta tag. I would prefer to add `content="translate"` to enable the auto translation. – muratgozel May 23 '19 at 20:49
  • 1. It's too bad there's no way to specify a correct source language, since that's the real problem. -- 2. It's too bad we can't bake it into a response header so that this would work for other content types besides HTML (it's messing up my JSON right now...). – BrainSlugs83 Feb 05 '20 at 19:35
  • 6
    Adding this meta tag worked for us. We already had in most of our pages which previously seemed to work but not anymore. – Chris Feb 19 '20 at 01:45
  • Just in case you don't want to prevent translation on the whole page, but rather you want to disable translation on on specific tags, like `
    ` or `` where you will write codes or commands, you can also use `
    ` or ``
     – 15 Volts Jun 01 '21 at 08:25
  • 2
    No posted answer works in the current chrome version 94.0.4606.71 (tested with VSC live server extension). – michaelT Oct 07 '21 at 11:36
  • 4
    new answer not working but old one [ using meta ] is working perfectly fine in chrome – geekonweb Dec 05 '21 at 14:23
86

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.

Ibrahim Sakaci
  • 964
  • 7
  • 11
  • I just had to add the first line '' – Tobo Jul 24 '20 at 13:38
  • 1
    The attributes in the tag disable translation of the page and the tag disables the translation bar in Chrome (without the tag the translation bar doesn't translate the page but is still displayed). Thanks for the solution! – volkut Aug 05 '22 at 17:29
20

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.

edelans
  • 8,479
  • 4
  • 36
  • 45
8

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.

Tiago Rangel
  • 1,159
  • 15
  • 29
6

Add this in your <head>:

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

and change your <html> tag to

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

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 some basic styling */
div[translate] {
width: 50%;
border: 1px solid black;
padding: 20px;
border-radius: 7px;
text-align: center;
font-family: Arial;
}
<div style="display: flex;gap:20px;">
<div translate="no"> <!-- Disables translation -->
  Enabled<br>
  <b>Olá - Hello - Hola</b>
</div>
<div translate> <!-- Enables translation -->
  Disabled<br>
  <b>Olá - Hello - Hola</b>
</div>
</div>

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

Tiago Rangel
  • 1,159
  • 15
  • 29
4

Disable google translate on your website

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

<meta name="google" content="notranslate" />
ThisCanBeNormal
  • 185
  • 1
  • 14
rkalways
  • 49
  • 4
3

The google tag for not translating the page has been updated to

<!-- opt out of translation features on all search engines that support this directive -->
<meta name="robots" content="notranslate">

or

<!-- opt out of translation features on Google -->
<meta name="googlebot" content="notranslate">```

For more info check this links:

https://developers.google.com/search/docs/crawling-indexing/special-tags

https://developers.google.com/search/docs/appearance/translated-results

Moreover, I had to update this because it was not working on Edge browser by using only translate="no" as below:

<html translate="no">

So for a full solution as mentioned here too, i had to do something like this to not translate anything from search engines

<html lang="en" class="notranslate" translate="no">
  <meta name="robots" content="notranslate" />
  ...
</head>
Murtaza Hussain
  • 3,851
  • 24
  • 30
2

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.)

BrainSlugs83
  • 6,214
  • 7
  • 50
  • 56
2

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.

westor
  • 1,426
  • 1
  • 18
  • 35
1

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>

Dmitriy Sakhno
  • 453
  • 3
  • 8
0

Initially I added just <html translate="no"> but although that seemed to work for Edge and Firefox it wasn't working for Chrome (despite wiping site data, closing/reopening Chrome, doing Ctrl-F5 hard refresh). I tried adding lang="en" too but that didn't help.

I then added the <meta name="google" content="notranslate"> 'older' solution to the <head> tag and that finally stopped it from offering it. This was despite the page having basically no content (it's just a redirect page), but it seemed to keep thinking the .mobi TLD was in Arabic!

I've left both solutions in place and that seems to have sorted things.

EDIflyer
  • 37
  • 4