Designing a Bilingual Arabic/English Website: How to Build It Properly
A proper bilingual website needs: a design that works in both directions (RTL for Arabic and LTR for English), separate URLs for each language (such as /en/), hreflang tags so Google knows which version to show, content written or edited for each audience instead of machine translation, suitable fonts for each language, and a clear language switcher. It usually adds a noticeable percentage to the website's cost, so first ask: does your audience actually need English?
“We want the website in Arabic and English.” We hear this request in about half of our projects. And we always ask a question that may sound strange: why? Not because English isn’t important, but because a real bilingual website needs extra effort and cost, and it’s important that it brings real value.
This website is itself an example: it is fully in Arabic and English, built exactly the way we describe below.
Do you really need a bilingual website?
English is worth the investment if:
- Some of your customers are companies or organizations that work in English.
- You target customers from outside the Arab world, tourists or foreign residents.
- You work in an industry that is searched in English a lot even inside Jordan (some technical and medical services).
- You have foreign partners or investors who visit the website.
And if your customers are individuals inside Jordan searching in Arabic, invest first in stronger Arabic content. You can always add English later if the website is built ready for it.
What makes a bilingual website “right”?
1. A design that works in both directions
Arabic runs right to left (RTL), and English left to right (LTR). This isn’t just about flipping the text, but everything: menus, icons and arrows, text alignment, column order and forms. Good design is built from the start to work in both directions, not adjusted after it’s finished.
Watch out for small details that ruin the experience: numbers and English links inside Arabic text, punctuation, and phone numbers that flip.
2. Separate URLs for each language
Each language should have its own URLs, for example:
example.com/for Arabicexample.com/en/for English
The common mistake: showing both languages on the same URL and switching with a button that relies on JavaScript or cookies. In that case Google usually sees only one language.
3. hreflang tags
Tags that tell Google this Arabic page is the counterpart of that English page, so it shows each user the right version for their language. Without them, the two versions may compete, or the wrong person may see the wrong version.
4. Content written for the audience, not translated word for word
The English-speaking audience may search with different words, be convinced by a different style, and need different information (such as international payment methods or the areas you serve). Machine translation is a start, but human editing is essential, along with keyword research in the second language.
5. Suitable fonts for each language
A readable Arabic font and an English font that matches it in shape and weight. Some fonts support both languages consistently, which makes the visual identity easier.
6. A clear language switcher
In a fixed, expected place (usually at the top of the page), taking you to the same page in the other language, not to the homepage. And write the language name in its own language: “English” and “العربية”, not country flags.
7. Non-text elements
- Images that contain text need a version for each language.
- Forms, error and confirmation messages in each language.
- Automated emails and prefilled WhatsApp messages.
- Titles, descriptions and structured data for every page in each language.
How much does it add to the cost?
A bilingual website usually adds a noticeable percentage to design and development costs, more if we write or edit all the English content. The reasons: design and development for both directions, setting up languages and URLs, content, and double testing. See the cost guide for price ranges.
Practical advice: start smart
If your budget is limited, consider:
- A complete Arabic website, with a shorter English version of the most important pages (home, main services, about, contact).
- Building the website technically ready for both languages from the start, and adding English content gradually.
What we don’t recommend: an English website machine-translated without review. It does more damage to your image than good.
Planning a website in two languages? Tell us about your audience and we’ll suggest the best structure, or read about company website design.
Frequently asked questions
Is machine translation enough for the English version?
As a start or a draft, yes, but not as the final version. Unreviewed machine translation produces mistakes and weak, unconvincing copy, and may not use the words the English-speaking audience actually searches for.
Do both versions have to be identical?
Not necessarily. The English version can be smaller and focus on the services that matter to foreign or corporate audiences, as long as every page that exists is good and complete.
Does a bilingual website hurt SEO?
No, if it's built correctly with separate URLs and hreflang tags. It actually opens up search results in a second language. Problems appear when both languages share the same URL or content is duplicated.
