How to prevent translation of a web page

Online web page translation lets your blog reach a wider audience by allowing it to be translated into most languages. It breaks the language barrier…well, sort of. There’s even a translator widget that can be added to your blog that automatically translates a page on a single click.

Having said that, some contents are best left in the original language. To name a few: your blog title (if you use text as title), names, addresses, song lyrics, book or movie titles and codes.

How then can you prevent them from being translated? Below are a few ways you can do that:

 

a) Block an entire page

You can prevent an entire page from being translated by adding this meta tag in the head section (before the </head> tag) of the page:

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

With the meta tag in place, a translator simply returns an blank output.

Note: On Blogger, adding just the meta tag in template HTML will block the whole blog. To target the page you want to block, you need to wrap the meta tag in a conditional tag

 

b) Exclude sections of a Blogger blog

To exclude a section of your blog page from being translated. Just go to Design > Edit HTML, check the Expand Widget Templates checkbox and add class="notranslate" to the HTML element that represents the section. Here are a few examples:

  • Blog title

    Look for this line:

    <h1 class='title'>


    and add the notranslate class name like this:

    <h1 class='title notranslate'>

  • Content of a widget

    Locate the widget, and look for this line:

    <div class='widget-content'>


    and replace it with this:

    <div class='widget-content notranslate'>

c) Exclude parts of a post

Go to the post and switch to HTML mode and locate the text you want to exclude from translation.

  • For regular texts

    Wrap it in a span tag and add a class="notranslate" attribute to the tag.
    For example, the following markup will prevent the movie titles from being translated:
    My favorites movies are <span class="notranslate">Citizen Kane, The Shawshank Redemption and The Fugitive</span>.

  • For codes

    You can also use the <code> tag for codes:

    <code>PUT CODE HERE</code>

    The tag is prevented from translation by default, no notranslate class is required.

All methods explained above should work on Google Translate and Bing Translator, however none of them work on Yahoo! Babel Fish translator.

Enjoy!

8 comments to "How to prevent translation of a web page"

Allen Cerezo September 29, 2011 at 4:13 PM    

Thanks for the tutorial. But why would everyone want to block translation of their website?

nurmisnan September 29, 2011 at 4:18 PM    

bagus nih... nice sharing here man...

Greenlava September 30, 2011 at 1:02 AM    

@Allen Cerezo
Let's say you have an address posted on your website. Would you want the address to be translated?

Anonymous,  October 21, 2011 at 4:53 AM    

Hi,
Well, you could always use images for sharing your address, as well as for anything else you don't want translated. If it's not a playing list, it'll wok...
Cheers...

Anonymous,  May 29, 2012 at 4:09 AM    

Hi,

Thanks for the tricky post.

Does div class="widget-content notranslate" work on general html or php page too ?

Greenlava May 29, 2012 at 11:55 PM    

@Anonymous
Yes it should work on any element in any web page.
Just remember that what we're doing is adding a "notranslate" class name to an element.
[div class="widget-content notranslate"] is resulted from our adding of "notranslate" class name to a div that already has a class name "widget-content".
If we were to add "notranslate" to a div that has no existing class [div], then the div tag should become [div class="notranslate"].

Anonymous,  June 13, 2012 at 9:25 PM    

It works, you saved my time, thanks

Smart eDesigners September 18, 2012 at 5:47 PM    

Thanks. Now I can use this for our website.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.