How to Tell Google Translate to Not Translate a Section of a Website

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

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.

Google translate - Disable translating of a part of my text

Edit (Sep. 2020): Seems that with some API changes this solution is not applicable anymore (at least on the web).

Protecting parts of the string from translation is possible by wrapping them in a <span> tag with a specific class value (as explained here):

<span class="notranslate">[bold]</span>

Example

Also, Google Translate API will provide you with more flexibility if you don't mind paying a small fee ($20 per 1 M characters).

How to disable Google translate from HTML in Chrome

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

Use google translate on only the body content, and not the navigation

Not sure how well it would work but you could have each drop down item be an image with the text. That would prevent translation

HTML: Setup a div as not google translatable

add class to your element notranslate

eg:

<div class="notranslate set_bold_text"> lorem epsom</div>
</br>
<div class="set_bold_text" > lorem epsom</div>

the above div wont be affected to translation to your selected language but the below div will be translated

Notranslate for some languages

I would recommend to sniff the accepted languages on the server-side, then add the header dynamically in case the user uses one of the languages you "natively" support on your site.

<html>
<head>
<?php
    $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
    $acceptLang = ['it', 'en', 'fr']; // your list of supported languages
    if (in_array($lang, $acceptLang)) {
?>
<meta name="google" content="notranslate">
<?php    
    }

?>
</head>

Chrome's language detection:

Chrome uses a so-called "CLD" (Compact Language Detector, now in version 3) which scans text on a web page using a neural network to determine which language is most likely used on the rendered web page. The entire process is well documented for CLD V2 if you want to understand the entire process. If a web page does not translate in Chrome this is most likely due to Chrome not being able to properly identify the language based on the information found on the page. A possible work-around to support easier identification is to add a hidden text block containing enough text in the language of your page at the start of the page, at least it is a recommendation taken from this SO answer.