Building a Bilingual Arabic–English Website: RTL, SEO and UX Done Right
A practical guide to building a bilingual Arabic–English website: right-to-left layout, Arabic fonts, hreflang SEO, URL structure and UX mistakes to avoid.
On this page
- Why a bilingual Arabic–English website is worth doing right
- Planning your URL structure and language switching
- Getting right-to-left (RTL) layout right
- Bilingual SEO: hreflang, metadata and content
- Translation quality and tone
- A launch checklist for bilingual websites
- How HEXACODES can help
- Frequently asked questions
Most businesses in the Gulf, the Levant and North Africa serve customers who switch easily between Arabic and English. A bilingual Arabic–English website lets you reach both audiences, but only if both versions feel native. Too many sites treat Arabic as an afterthought: a translated copy squeezed into a left-to-right layout, with broken punctuation and icons pointing the wrong way.
Doing it properly is not complicated, but it does require planning from day one. This guide covers the three areas that matter most: right-to-left (RTL) layout, search engine optimization for both languages, and the user experience details that make Arabic speakers trust your site.
Why a bilingual Arabic–English website is worth doing right
Arabic speakers notice immediately when a site was not designed for them. Misaligned text, mixed reading directions and machine-translated copy all signal that the business does not really serve them. On the other hand, a clean Arabic experience builds trust, especially for local services, government-facing businesses and e-commerce.
There is also a search benefit. People search in both languages, often for the same thing. A properly structured bilingual site can rank for Arabic and English queries separately, which roughly doubles the number of searches you can appear in without doubling your marketing budget.
Planning your URL structure and language switching
Before any design work, decide how the two languages will live side by side. Common options include:
- Subfolders:
example.com/en/andexample.com/ar/. This is the simplest option for most businesses, and both versions share the same domain authority. - Subdomains:
en.example.comandar.example.com. Workable, but usually more effort to manage. - Separate domains: for example a .com for English and a local country domain for Arabic. Useful only if you run genuinely separate operations.
For most small and medium businesses, subfolders are the practical choice. Whatever you choose, keep it consistent and give each language its own URL. Avoid switching languages with cookies or scripts on the same URL, because search engines may only ever see one version.
The language switcher should be easy to find, usually in the header, and should take the visitor to the equivalent page in the other language, not back to the homepage. Label it with the language name in that language: "العربية" and "English".
Getting right-to-left (RTL) layout right
RTL is more than right-aligned text. When the page is in Arabic, the entire layout should mirror. Set the page language and direction correctly with lang="ar" and dir="rtl", and build your CSS with logical properties (start and end, rather than left and right) so the same stylesheet works in both directions.
Check these details on every Arabic page:
- Navigation, logos and sidebars mirror to the opposite side.
- Arrows, "next" and "back" icons point the right way. Icons that represent real objects, like a phone or a clock, usually should not flip.
- Form labels, error messages and input fields align to the right.
- Numbers, phone numbers, email addresses and product codes inside Arabic text still display correctly. Mixed-direction text is where most bugs appear.
- Carousels and sliders move in the expected direction.
- Punctuation sits on the correct side of the sentence.
Decide early whether you will show Western digits (1, 2, 3) or Eastern Arabic digits in Arabic content, and apply that choice consistently, especially for prices and phone numbers.
Choosing Arabic fonts and typography
Arabic script needs fonts designed for it. A font that looks elegant in English may have no Arabic glyphs at all, leaving the browser to fall back to a default that clashes with your brand. Pick a font family that includes both scripts, or pair an Arabic font with an English font of similar weight and character.
Arabic text often needs a slightly larger font size and more generous line height than English to stay readable, especially on mobile. Avoid all-caps styling, letter-spacing and italics on Arabic text, since these styles either do not apply or break the connected letterforms. Test real Arabic copy, not placeholder text, because word lengths and line breaks differ.
Bilingual SEO: hreflang, metadata and content
Search engines need clear signals to show the right language to the right person. The most important is hreflang, which tells Google that two pages are language versions of each other. Each page should list itself and its alternate version, and you can add an x-default for visitors whose language does not match either. Google explains the options in its documentation on localized versions of your pages.
Beyond hreflang:
- Write separate, natural page titles and meta descriptions for each language. Do not just translate the English word for word.
- Research Arabic keywords separately. People often search with different phrasing, dialect terms or even transliterated Arabic in Latin letters.
- Translate image alt text, headings and structured data, not just body copy.
- Make sure both languages appear in your XML sitemap.
- Keep your business name, address and phone number consistent across both languages and on your Google Business Profile. Our guide to local SEO in Dubai, Riyadh and Beirut goes deeper on this.
If you also target European markets, the same principles apply across more languages, as we explain in multilingual websites for Europe.
Translation quality and tone
Machine translation and AI tools are useful for a first draft, but they rarely produce Arabic that sounds natural to a local customer. Use them to speed things up, then have a fluent human editor review every page, especially headlines, calls to action and legal text.
Choose a tone deliberately. Modern Standard Arabic suits most corporate and service content. Some consumer brands use a lighter, more conversational style or local dialect in social media and ads. Whatever you choose, keep it consistent across the website, WhatsApp replies and marketing.
A launch checklist for bilingual websites
Before going live, run through this list on desktop and mobile:
- Every page exists in both languages, or is clearly marked if it does not.
- The language switcher lands on the equivalent page.
- Arabic pages are fully mirrored with no left-aligned leftovers.
- Forms submit and display errors correctly in both languages.
- Hreflang tags, titles and meta descriptions are set for every page.
- Prices, dates and phone numbers display correctly in Arabic content.
- Page speed is good in both versions, including the Arabic web font.
- Email notifications and confirmations are sent in the visitor's language.
How HEXACODES can help
HEXACODES designs and builds bilingual Arabic–English websites, online stores and apps, with RTL and bilingual SEO planned from the first wireframe. Our MENA-based team works in both languages every day, and we can add AI features like bilingual chatbots and smart search when you are ready.
If you want to understand the budget first, read our breakdown of website costs in the Middle East. Or contact us on WhatsApp at +961 81 924581 to discuss your project. A full business website starts at $30/month.
Frequently asked questions
Should my Arabic and English content be identical?
The core information should match, but the wording does not have to. Adapt headlines, examples and calls to action so they feel natural to each audience. Search keywords also differ between languages, so each version should be written with its own audience in mind.
Is it better to use subfolders or separate domains for Arabic and English?
For most small and medium businesses, subfolders such as /en/ and /ar/ on one domain are simpler to manage and keep all your search authority in one place. Separate domains make sense mainly when you run separate businesses or marketing teams per market. Whichever you choose, give each language its own URL and connect them with hreflang.
Can I use AI to translate my website into Arabic?
AI translation is a good starting point and can save time, but it should not go live without review by a fluent Arabic editor. Machine output can be grammatically correct yet sound unnatural or miss local context. Headlines, calls to action and anything legal deserve the most careful human review.
