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











Post a Comment



















Popular posts from this blog









Rotate my Blogger images




















Image







Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270).   Take, for example, the image below.      URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG   If we switch the s200  to s200-r90 , we get the following image instead.          URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG    Happy rotating!








Read more










Remove the header image for posts in Emporio





















The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan!   Head to Theme => Edit HTML  Search for ' data:view.isSingleItem '  The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'>   <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>     <b:include            data='{                     image: data:widgets.Blog.first.posts.first.featuredImage,                     selector: &quot;.bg-photo&quot;                  }'            name='responsiveImageStyle'/>     <div class='bg-photo-container'>       <div class='bg-photo'/>     </div>   </b:if> </b:if>   Delete the XML including the <b:if> tag code.        Happy Emporio'ing!  








Read more










Get nicer thumbnails for my Post snippets





















I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator .   Note: This post leverages the techniques described in the article about  Responsive images for Google photos .      A note:   The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work.   Creating a responsive, resized Thumbnail   The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image.   <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ />   In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...








Read more