Support multiple languages on my blog

Lots of you Blog authors out there are writing content that spans more than one language, and of course, your readers may only speak one of those languages. To support them better, you can change the language that your blog renders in, using the language-code parameter hl.

Note that this will modify the language of the blog for default messages, but not for any custom content (like your blog's posts, title, etc). A workaround for this is explained below.

Getting the current URL in a different language

Let's say we speak both English (locale code en) and French (locale code fr). We can generate a link to 'the other language' with markup like this:

<b:if cond='data:blog.locale.language != "en"'>
  <a expr:href='data:view.url params { hl: "en" }'>
    View this blog in English
  </a>
</b:if>
<b:if cond='data:blog.locale.language != "fr"'>
  <a expr:href='data:view.url params { hl: "fr" }'>
    Voir ce blog en Français
  </a>
</b:if>

Translating custom content

Some custom content, like your blog's title, will need to be translated manually if you want it to show differently for different languages. This example shows custom markup for the Header gadget, which displays your blog's title. Since this isn't default content, we can manually translate it using custom markup.

<b:includable id='title'>
  <h1>
    <b:switch var='data:blog.locale.language'>
      <b:case value='fr' />
        Bonjour le monde!
      <b:default />
        Hello world!
    </b:switch>
  </h1>
</b:includable>

Example 'Language' HTML Gadget

To add a Language-picker HTML gadget, click the button below. 


This example gadget uses the following custom markup.

<b:includable id='main'>
  <b:include name='widget-title' />
  <div class='widget-content'>
    <b:if cond='data:blog.locale.language == "en"'>
      Viewing in English.<br />
    <b:elseif cond='data:blog.locale.language == "fr"' />
      Affichage en français<br />
    </b:if>
    <b:if cond='data:blog.locale.language != "fr"'>
      <a expr:href='data:view.url params { hl: "fr" }'>
        Voir ce blog en Français
      </a><br />
    </b:if>
    <b:if cond='data:blog.locale.language != "en"'>
      <a expr:href='data:view.url params { hl: "en" }'>
        View this blog in English
      </a><br />
    </b:if>
  </div>
</b:includable>

You can tweak the options by customizing the HTML, using the Edit HTML link from the Theme tab.

Specifying alternative language and regional URLs using hreflang

This Google support article explains how the rel='alternate' links can be used to specify alternative language versions of a page, using the hreflang attribute.

In the above examples, we provide links to switch between English and French views for the page. 
So, how do I tell Google search about these alternatives?


<link expr:href='data:view.url params { hl: "en" }' hreflang='en' rel='alternate' />
<link expr:href='data:view.url params { hl: "fr" }' hreflang='fr' rel='alternate' />

Placing those two link tags in the <head> tag tells Google Search (or other crawlers) that the English and French versions of the URL are available with the ?hl=fr version of the URL.



Happy translating!

Comments

Popular posts from this blog

Remove the header image for posts in Emporio

Rotate my Blogger images

Add snippets to the Emporio theme