How to Disable Google Translate from Translating Specific Words or Content Blocks

Google translate is a powerful tool that can sometimes work perfectly and other times completely miss the mark. Utilizing it on your website can save hours of time and money by providing quick translations for every language possible. While Google translate can be great, there are however certain times when you might not want Google to translate specific words or blocks of content. Luckily, Google has made this easy for us by providing a built in way to disable Google translation when necessary. In this tutorial we will teach you how to utilize the built in class provided by Google to disable translation on specific words or content blocks.

Utilize the Class “notranslate” to Disable Google Translation

Utilizing the built in class “notranslate” will prevent Google from translating any words wrapped within that class. There are of course many different ways to utilize this class, you could even get creative and build an automated system using jQuery. However, for the purposes of keeping this tutorial simple, we will only highlight some of the more common ways of applying the class.

Span Tags

This is probably the most basic and useful way to target specific words inside of other elements. Simply wrap the word(s) within a span tag and add the “notranslate” class.

<span class=”notranslate”>Don’t Translate Me</span>

Span Tag Within an Element

<h1>Translate Me <span class=”notranslate”>Don’t Translate Me</span></h1>

Header Titles

If you want to disable Google from translating an entire title simply add the “notranslate” class to the desired H-tag.

<h1 class=”notranslate”>Don’t Translate Me</h1>

Paragraph Tags

If you want to disable Google from translating an entire paragraph simply add the “notranslate” class to the desired P-tag.

<p class=”notranslate”>Don’t Translate Me</p>

Full Content Blocks such as DIVs

If you want to disable Google from translating an entire block of content simply add the “notranslate” class to the top level parent such as a DIV or SECTION item.

<div class=”notranslate”><p>Don’t Translate Me</p></div>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.