How to Localize Your HubSpot Hosted Website

By Daniel J. Murphy

UPDATE: Since I published this post, HubSpot rolled out localization enhancements to their product. I will write a new post soon with information about HubSpot's new localization tools.

When you’re ready to localize your website there are many things to consider. What language(s) will do you first? What localization software do you need? What do you need to do for international SEO? How will an international website visitor access their preferred language on your website?

I recently managed the process of localizing my startup’s website. In this post I’ll outline the process, the mechanics of how it works with a HubSpot hosted website, and how we solved for SEO. I'll also outline best practices, based on my experience and the experiences of others.

At my current startup we use a localization software product called Transifex. This software enables us to manage, translate and deploy our localized websites. I say “websites” because what we ended up doing was creating duplicate websites for each language.

If you're interested, here's a case study Transifex wrote about Onshape's localization efforts.
 

MAKING TRANSIFEX WORK WITH HUBSPOT

Within Transifex you create “projects.” A project is either “Live” or “File based.” For the purposes of localizing a website, you’ll want to use a Transifex Live project.

How does Transifex Live work? You’ll install a snippet of code onto your website, hosted on a CMS like HubSpot. That code allows Transifex to manipulate the strings of text that display on your website. Within Transifex you “approve” each string of text for translation. After translation is complete, you deploy those translations to the page where the snippet is installed. Transifex will alter the text into the specified language.

In short, Transifex Live was designed to optimize a webpage with a language picker so that an international viewer can select the language they prefer, and view that page in that language.

Transifex Localization

That’s great for when you’re translating a browser-based software product or for companies ambitious enough to localize an entire website on first attempt at localization. However, that doesn’t work for startups that want to translate select pages as they enter a new international market. But I have a workaround using Transifex and HubSpot.


URL STRUCTURE WITH TRANSIFEX & YOUR CMS

With HubSpot, there isn’t a lot of URL structure flexibility. From my research I discovered for our website, at this point in time, subdirectories would be the most optimal URL structure for localized webpages. For example the webpage www.mystartup.com/product-tour could be viewed in German at www.mystartup.com/de/product-tour.

So what my team and I had to figure out was how to localize a subsection of pages on our website, while still hosting them on HubSpot. We also wanted to use Transifex for our website’s localization process, since that’s what our product team was using and Transifex seemed to be preferable in both ease-of-use and as a management tool.


SOLVING FOR SEO

Another reason we wanted to use subdirectories for a URL structure was for SEO. Disregarding the HubSpot/Transifex URL structure limitations, there are a few preferable options for URL structure on localized websites.

-   ccTLD (country code Top Level Domain) such as mydomain.de (German) or mydomain.fr (French)

-   Subdomains such as de.website.com or fr.website.com

-   Subdirectories such as www.website.com/de or www.website.com/fr 


Because of limitations in HubSpot, not being able to create multiple subdomains for select “Site Pages” or add multiple Top Level Domains to our HubSpot portal, subdirectories became the obvious solution. As well, in terms of SEO, according to multiple sources (here, here and here) subdirectories are a fine way to go about setting up your localized website. TL;DR: They will further strengthen your domain’s SEO power and are cheap/easy to implement.


HREFLANG TAGS

The first step in the implementation process of localizing your website is to embed hreflang tags in your global header. (In HubSpot this is under “Content Settings”). An hreflang tag looks like this:

<link rel="alternate" href="http://mystartup.com" hreflang="en-us"/ >

For German it would be:

<link rel="alternate" href="http://example.com/de" hreflang="de_DE" / >

You’ll want to add a line for every language you deploy under your domain.

This tag tells search engines that this page is a localized variation. It’s extremely important to add this tag. With a Live project, the HTML of the page (which is what search engines crawl) is still in English. Without this tag it might otherwise look like a duplicate page under a different URL, which will give search engines the impression you’re trying to hack their algorithm for higher SEO rank.

Here’s a resource from the SEO geniuses over at Moz about hreflang tags for more details.


CREATING YOUR LOCALIZED PAGES

In HubSpot, unfortunately, the only way of creating this URL structure is to duplicate Site Pages and Landing Pages. (Blogs are a bit different; perhaps I’ll explain in another post. Email me daniel [at] astartupmarketer.com if you want more info).

There are a few steps to create this localized version of your page. Here’s it is, step-by-step.

1. Clone your page (the English version).

2. Properly label your English version and the cloned page, by language, in the internal name field.

3. Create a Campaign for each new language. For instance, create a campaign called “German [de]” to mark German pages. This will help you easily access your localized websites in Site Pages or Landing pages. See the image below.

Localization in HubSpot

4. You also must embed Transifex’s “snippet” on your localized pages. This is just a few lines of code that allow a Transifex Live Project to “control” the website strings you want translated. A string is a sequence of text that appears on your html webpage. Transifex is pretty good at picking up those strings automatically, even when JavaScript is used to deploy that text.


You want to embed a specific snippet: not the one Transifex suggests you embed. Here’s what your Transifex project will tell you to embed in the page header. NOTE: Do not add this to your global website header. This instead needs to be done page-by-page.

<script type="text/javascript">window.liveSettings={api_key:"[your project’s API key here]"}</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script >

But here's what you should embed:

<script type="text/javascript">window.liveSettings={api_key:"[your project’s API key here]"}</script>
detectlang: function() {
return 'ja_JP'; }, <script type="text/javascript" src="//cdn.transifex.com/live.js"></script >

The difference is highlighted above. Those two lines indicate the specific language you’d like Transifex to automatically display on these pages. That means that you can designate www.website.com/de/product-tour as German, and always display German on that page no matter who is loading it, where they are or what language preference they’ve saved in their web browser.


TRANSLATION IN TRANSIFEX

 After your snippet is installed, there are a few steps to getting the page translated. Assuming you’ve found the correct resource to translate your website content, you’ll want to provide the preview URL of your localized page.


The preview URL looks something like this:

https://www.mystartup.com/de/product-tour?hs_preview=oqTmdPRI-4101103925

Take those URLs one-by-one and paste them into Transifex’s Live editor so you can “approve” strings for translation. This is where Transifex shines.

After translation is complete, you will need a second translation partner, or perhaps the same partner but a fresh pair of eyes, “review” each string. Once reviewed you can push translations to production.


If you did all the above properly, the preview URLs you took from HubSpot should now display the translated content of the website.

Transifex's English homepage. Click to enlarge.

Transifex's German homepage. Click to enlarge.


ONE OTHER SEO TIP

Your translations are done, but I have an additional SEO tip before you publish your new localized website(s). Transifex will use JavaScript to alter the page title and meta description of your page. That’s fine. However, I suggest you take the translation (which you can easily find in Transifex once translations is complete) and embed those translated strings in the webpage HTML. HubSpot makes it easy to adjust a page title and meta description. See below.

HubSpot Localization


FINAL WEBSITE ADJUSTMENTS

There are a few other steps to localizing your website.

  1. Create a new header and footer for each language. I suggest doing this if you’re going to release select localized pages, but not your entire website. With HubSpot you can easily manage headers and footers in Design Manager.

  2. Adjust any links within the pages you’ve localized to point towards other localized pages of that language. For instance, you don’t want a link for “pricing information” on www.mystartup.com/de/product-tour to point to www.mystartup.com/pricing. You want it to point to www.mystartup.com/de/pricing.

  3. Add links to the localized website on the footer of your English website. That’s the most well known location for international viewers to access their preferred language.

Once you’ve completed these steps and properly QA’d the website you’re ready to publish.

However, your localization efforts don’t end there. You’ll have to maintain the site, update content and remember when you make an adjustment to the English page, you’ll have to make that adjustment on the localized variation as well (since it’s a duplicate page).


ADDITIONAL TIPS

  • Pick a source language you’ll use across all Transifex projects. This is so you can share one common glossary. If you're translating from English, "en" is the most common source language.
     

  • The “publish to production” button in Transifex is an on and off switch. If you deselect a language that was previously published, and hit “publish to production” those translations will be removed from any pages where they were previously published.
     

  • Check multiple sources for quality. Find trusted partners that can check your translator’s work. Quality is the hardest part of localization.
     

  • Don’t try to translate your entire website at once. It’s easier to select certain pages, key pages… start small. Also, don’t try to translate into more than 2 languages at once. It becomes too difficult to manage a handful of languages.
     

RESOURCES

docs.transifex.com

www.transifex.com

https://moz.com/learn/seo/hreflang-tag

https://searchenginewatch.com/sew/how-to/2292784/international-seo-toplevel-domains-subdomains-subdirectories

http://blog.globalizationpartners.com/subdomains-subdirectories-or-cctlds-for-global-audiences-(1).aspx

http://mainpath.com/putting-end-to-subdomains-vs-subdirectories-debate/

https://www.transifex.com/case-studies/onshape/



Measure Your Blog’s Growth With A Startup Marketer’s Blog Growth Template
No CMS platform does it quite right. Measuring your blog growth, month-to-month is a vital top level data point for reviewing your marketing performance.
I want this template!