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"
Thanks for the tutorial. But why would everyone want to block translation of their website?
bagus nih... nice sharing here man...
@Allen Cerezo
Let's say you have an address posted on your website. Would you want the address to be translated?
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...
Hi,
Thanks for the tricky post.
Does div class="widget-content notranslate" work on general html or php page too ?
@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"].
It works, you saved my time, thanks
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.