How to exclude words from Google Translate?

When you translate your website with Google Translate, there may be some words or phrases that should not be translated. For example, information like addresses, proper names, or technical terms often do not change from one language to another. Therefore, it may be necessary to exclude them from the machine translation process. In this article, we will explore how to do this.

Context

We recently used the GTranslate plugin on a client's WordPress site to provide machine translation. However, after integrating this solution, we noticed that Google Translate was interpreting and translating elements like addresses or proper names, which was not intended. This led us to look for a solution to prevent the translation of these specific elements.

What to do?

There are several methods to prevent Google Translate from translating certain words or phrases. Here are two effective solutions:

1. Use the translate="no" attribute

One of the simplest solutions is to use the HTML attribute translate="no" . This attribute is recognized by Google Translate and tells it not to translate the content in the element it is applied to. Here's how to use it:

< div translate = " no " > 1234 Rue des Érables, Montréal, QC </ div >

In this example, the address will not be translated, regardless of the linguistic context of the site.

2. Use the notranslate class

Another solution is to use the CSS notranslate class. This class is also recognized by machine translation tools like Google Translate to exclude certain elements from the translation process. Here is an example:

< span class = " notranslate " > 1234 Rue des Érables, Montréal, QC </ span >

By applying this class to any text or HTML tag, you can avoid translation.

Scenario of a dynamic website

In a WordPress site with multiple plugins and dynamically generated content, manually adding the notranslate class or translate="no" attribute to each element can be tedious. When content changes frequently, it's more efficient to use a dynamic approach to handle this type of issue.

Solution with jQuery

To solve this problem in a more automated way, we opted to use jQuery . This allowed us to automatically target elements on the site that should not be translated, and add the notranslate class or translate="no" attribute to them. Here is an example of jQuery code that you can use to add the notranslate class to specific elements like address titles on a page:

jQuery ( document ) . ready ( function ( $ ) { $ ( '.property-unit-information-wrapper h4' ) . addClass ( 'notranslate' ) ; } ) ;

In this example, we target all h4 elements within a section defined by the property-unit-information-wrapper class and automatically add the notranslate class to them. This approach saves time and ensures that all required elements are properly protected from translation.

Advantages of this approach

• Automation : You don't need to edit every element by hand.
• Flexibility : You can easily adapt the script to target different elements on your site.
• Efficiency : With jQuery, you can apply the notranslate class or translate="no" attribute at scale, regardless of the volume of content.

Conclusion

When using Google Translate for your website, it’s important to ensure that certain information isn’t translated, such as addresses or proper names. With simple solutions like the translate="no attribute and the notranslate class, you can easily control what should and shouldn’t be translated. If your site is dynamic and complex, using jQuery can automate this process and make it more efficient. With these solutions in hand, you can now ensure that your site is translated accurately, while keeping critical information intact.