Arabic and English website: what to plan for

Many companies in Jordan and Saudi Arabia need a website in two languages: Arabic for local customers, and English for partners, foreign companies and expatriate residents. The usual way it gets built is that the site is designed in English and then flipped into Arabic in the final week. The result is often an Arabic version with arrows pointing the wrong way, word-for-word translated text, and a search engine that doesn't know which version to show to whom.

How should you structure URLs on a bilingual website?

The simplest and most common option is one folder per language on the same domain, such as /ar/ and /en/. That keeps the whole site under one domain and makes it easier to manage. The alternatives are a subdomain per language or a separate domain, which make more sense when each market has its own team or legal entity.

Avoid serving a different language on the same URL based on the browser language or cookies. Google needs a separate URL for each version in order to index it, and it recommends against redirecting visitors between languages automatically. Show a clear switch button and let the visitor decide.

As for the words inside the URL, Arabic words do work, but they turn into long, unreadable codes when someone copies the link and sends it in a message. That's why many sites use short English words in the URLs of their Arabic pages, as this site does.

What is hreflang and how do you set it up?

hreflang is a tag that tells search engines a page has a version in another language and where to find it. With it, Google shows the Arabic page to people searching in Arabic and the English page to people searching in English. There are only a few rules, and most mistakes come from skipping one of them:

• Each page lists itself and its counterpart. The Arabic page points to itself with ar and to the English page with en, and the English page does the same. Google ignores a reference that only goes one way.
• Add x-default for the page shown to people whose language matches neither version. That is usually the English page or a language selection page.
• The codes ar and en are enough for most sites. Add a country code, such as ar-SA, only if you have different content for each country.
• Link each page to its real counterpart: the Arabic service page to the same service page in English, and never to the homepage.
• Put the tags in the page head or in the XML sitemap, and pick one method for the whole site.

Each version also gets a canonical URL that points to itself. If the Arabic page points to the English one by mistake, the Arabic page can drop out of search results.

What should you watch for in RTL design?

Right-to-left changes the layout of the whole page. The menu, the logo, navigation arrows, the column order and the position of the close button all flip. Some things stay as they are: numbers, Latin logos and names, and icons like the play button on a video player.

In the code, put dir="rtl" and lang="ar" on the html tag of Arabic pages, and write CSS with logical properties such as margin-inline-start instead of margin-left, so one stylesheet works in both directions. Arabic fonts usually need a slightly larger size and more line spacing to be comfortable to read on a phone.

Watch mixed text as well: an English product name inside an Arabic sentence, a phone number, or an email address. Their order can get scrambled on screen. Keep email and phone fields in forms set to LTR, even on the Arabic page.

Should you translate your website content word for word?

A literal translation reads like a translation, and customers notice from the first line. Write each version for its own reader. An Arabic-speaking customer may ask about things a foreign partner doesn't care about, and will search with completely different words. Research the words people use in each language before you write. In Arabic, many people search for the equivalents of "website design" and "making a website", and English searchers have their own terms.

The two versions don't need the same number of pages. The blog might be Arabic only if its audience is Arabic speaking. What matters is that every page that exists in both languages is linked to its counterpart.

How should you design the language switcher?

Write each language's name in that language: "English" on the Arabic page, and the word for Arabic in Arabic script on the English page. Avoid flags. A flag stands for a country, and Arabic and English are spoken in many countries. Put the switcher in a fixed spot in the header and make it open the same page in the other language, because someone reading a service page doesn't want to land back on the homepage.

What should you test before launching a bilingual website?

• Open every page template in both languages on a real phone and look for elements that didn't flip.
• Try the language switcher from inner pages and confirm it takes you to the matching page.
• Check hreflang and canonical on a sample of pages.
• Submit the contact form from both versions and confirm the confirmation message arrives in the right language.

If you are turning an existing site into a bilingual one, the redirect plan in redesigning your website without losing your rankings applies to you too.

We build websites in Arabic and English from the first design, and we set up hreflang and both directions before launch, as part of our website design and development service. Send us your website link and we'll tell you what its second version is missing.

Questions our partners ask

Written by the Visual Innovate team, the people who build, host and follow up systems, websites and apps for our clients in Jordan, Saudi Arabia, Oman and Egypt.