The Beginners Guide to making your Website bilingual

September 20, 2023

Why would I even need a bilingual website?

The simple answer is: If you speak several languages you can use that to your advantage, because you can attract and serve clients from several different countries. This means your client base becomes way bigger.

“BUT MANY WEBSITES OFFER AUTOMATIC TRANSLATION. WHY SHOULD I PUT IN MORE WORK TO TRANSLATE MY WEBSITE MANUALLY?”

That is actually a very legitimate question. Have you ever visited a website and let it be translated automatically? Realized how bad most of the translations were and how the translated version was all over the place (e.g. the buttons were too short and the button text hung out on one side, or the titles were in a second line overlapping some of the body text)?! I have, and it just looks super unprofessional! Just look at this example:

The real question is: What is YOUR personal goal with your website? If you don’t even speak a second (or third, or fourth) language there would be no need for you to have a multi-lingual website, because you wouldn’t be able to serve clients who don’t speak your language.

However, if you speak several languages and actually want to serve clients from countries that speak those languages you should consider that having a professionally done multi-lingual website…

…makes You look professional (because you avoid issues like the one in the image above).
…shows that you are actually interested in serving clients that speak a certain language because you took the time to build a website that specifically includes them.
…builds trust because potential clients can see that your website is done in their language (and not just Google-translated automatically).

1. Step: Duplicate your pages

When making a website bilingual, the first step is always to duplicate your pages. Let’s imagine you already have a website in English and want to add Spanish. So, you take the English “Home” page, duplicate it, and translate the duplicated version into Spanish. Adjust all the button sizes, etc. so that everything looks as good in Spanish as it does in English.

Make sure to also have 2 versions of your header, footer, and mobile navigation, one in English and one in Spanish and always add the right ones to the right page.

My own website is in English, German, and Spanish. See how there are always 3 versions of the same page of my website? One for each language:

You duplicate a page by clicking on the 3 dots next to its name:

And this is what my third, my Spanish version of the same page on my website looks like. You can see that the header changes in every version, as well as the copy and the button text:

2. Step: ISO codes

Notice in the PAGES panel on the left how I put the language codes in front of the page title: “en: Home”, “de: Home”, “es: Home”. This prevents you from being confused, and it helps with the SEO (Search Engine Optimization). You can find a list with the official ISO codes for all countries here.

I also recommend using the same order of your pages in your PAGES panel. In my case English is at the top, then German, then Spanish. I always keep this same order, giving my Showit backend a way better structure.

3. Step: SEO

In order to make your multi-lingual website more search engine friendly (to make it easier for Google to find a show your website to the correct people) you should do this:

Images: Change the SEO TITLE and the DESCRIPTION of all of the images to the correct language. Notice how my SEO title and description change in my English and my German version:

2. SEO Settings: Click on a page, then go to PAGE (red), click on the page title (blue), and the on SEO SETTING on the right (yellow). Write out a Page Title and Meta Description for that page, in the language that the page is in:

The Page Title and Meta Description are important because that’s what’s going to show up in Google when somebody searches for your website:

4. Step: Page language settings

Underneath the SEO SETTINGS you’ll find ADVANCED SETTINGS. Choose the correct page language for all the pages of your website:

5. Step: Rel = “Alternate” Hreflang Tags – The Basics

What the…??!!!! What is that even supposed to be, right?! I know, I felt the same when I heard about it for the first time.

“I DON’T KNOW ANYTHING ABOUT CODE AND COMPLICATED WEBSITE BACKEND STUFF. I’M A DESIGNER!”

Sounds familiar? Well, the good this is that it’s not complicated. If I could understand it, you can, too!

What you need to know about the rel = “alternate” hreflang tags (or short: hreflang tags) is:

It’s a snippet of code that you add to the Custom HTML Code section of each page.
That code snippet basically creates links between the pages (e.g. the English and the Spanish version of your ABOUT ME page), so that Google understands what the equivalent pages on your website are and that they are connected.
The goal is to make sure that the right person sees the right page of your website in the right language.

That’s why every single page on your website needs an hreflang tag, and it needs to go at the very top of your Custom Head HTML.

6. Step: Implementing Hreflang Tags on your Website

First you need to generate your hreflang tags for EVERY SINGLE PAGE of your website (e.g. your HOME page, your ABOUT ME page, your SERVICES page, and your PORTFOLIO page). You could use this website to do so.

Let’s say you decided to start with the HOME page. You are going to put in the URL of that page. My English HOME page is called “en: Home”, which is why the URL is https://maca-webdesign.com/en-home”. Below (circled in blue) choose the page language and the country. Do that for all the languages your website is in:

Then generate the hreflang tags. You will end up with something like this, depending on how many languages there are on your website. Since mine is in 3 languages, there are 3 hreflang tags: