Quick answer: A good bilingual Arabic English website gives each language its own URL (for example /en/ and /ar/), links the pairs with hreflang, mirrors the full layout right to left for Arabic, uses a real Arabic typeface with its own sizing, and has Arabic copy written by a native writer instead of machine translated. Plan both languages from day one.
Most bilingual Arabic English website projects go wrong the same way. The English site gets designed, built and approved. Then, a week before launch, someone installs a translation plugin, pastes in Arabic and flips a right to left switch. The result technically works. It also looks off to every Arabic reader who lands on it.
This guide is the practical version: how to structure the URLs, what has to mirror in an RTL layout, how to handle fonts and mixed numbers, why transcreation beats translation, and how to keep both versions in sync after launch. We’re a New York agency that works remotely with businesses in the Gulf, and the checklist below is what we work through on every two language build.
Key takeaways
- Give every page a separate URL per language. Google recommends it and it keeps Arabic pages indexable.
- Right to left means mirroring navigation, icons, forms and sliders, not just aligning text to the right.
- Arabic needs its own typeface, sizes and line heights. Do not reuse the English settings.
- Budget for native Arabic copy and an update routine, or the two versions drift apart within months.
Plan the bilingual Arabic English website before you design it
The single biggest decision is when Arabic enters the project. If it shows up at the end, every layout was designed around English word lengths and left to right reading, and you’ll spend weeks patching. If it shows up at the start, the design system accounts for both from the first homepage concept.
Before any design work, answer these:
- Is Arabic a primary audience or a courtesy? A Saudi government supplier and a Dubai consultancy serving mostly expat executives need very different Arabic investments.
- Will every page exist in both languages? Sometimes the blog stays English only. Decide now, and make the language switcher behave sensibly on pages that have no twin.
- Who writes the Arabic? A native copywriter, a translation agency, your own team? This decides the timeline more than the build does.
- Who maintains it? Someone must update the Arabic version every time a price, service or team member changes.
URL structure and hreflang for Arabic and English
Google’s guidance is direct. It recommends separate URLs for each language version rather than switching language with cookies or browser settings, and it advises against automatically redirecting visitors based on their language. Let people choose.
That leaves three practical options:
| Structure | Example | Our take |
|---|---|---|
| Subdirectories | example.com/en/ and example.com/ar/ | Our default. One domain, one hosting setup, easy to manage. |
| Subdomains | ar.example.com | Works, but adds setup and can feel like a separate site. |
| Separate domains | example.ae and example.com | Only when the brands or markets are truly separate. |
| URL parameters | example.com?lang=ar | Google lists this as not recommended. Avoid. |
Then connect each pair with hreflang annotations. Every English page points to itself and its Arabic twin, and every Arabic page does the same. The most common mistake we find in audits is one way tagging: English points to Arabic, Arabic points nowhere. Google says that when two pages don’t point to each other, it ignores the tags. Multilingual plugins on WordPress usually handle this for you, but check the page source after launch anyway.
Arabic slugs are a choice. Some sites translate URLs into Arabic script, others keep Latin slugs on Arabic pages for easier sharing. Either works. Pick one and stick to it.
RTL website design: what actually has to flip
Setting dir="rtl" on the page is the easy part. The details below are where Arabic readers notice quality.
- Navigation and logo. The logo moves to the right, the menu reads right to left, and dropdowns open the other way.
- Directional icons. Arrows, “next” chevrons, progress bars and back buttons point the other way. Non directional icons (a phone, a checkmark, a clock) stay as they are.
- Sliders and carousels. They should advance right to left. Many slider plugins ignore RTL unless configured.
- Forms. Labels on the right, field order mirrored, error messages and placeholders translated. Phone and email fields usually stay left to right inside the field, because that’s how people type them.
- Images with direction. A photo of someone looking or pointing “into” the content may need flipping or replacing.
- Tables and timelines. The first column moves to the right. Timelines run right to left.
Ask your developer to use CSS logical properties (margin inline start instead of margin left). One stylesheet then serves both directions, and fixes don’t have to be made twice.
Arabic fonts, numbers and mixed text
Arabic letters join, sit differently on the line and look smaller than Latin type at the same point size. So the Arabic version needs its own type settings, usually a slightly larger size and more generous line height. Never add letter spacing to Arabic text. It breaks the joins between letters.
Pick a typeface built for Arabic rather than a Latin font with Arabic glyphs bolted on. Google Fonts has several solid options, such as IBM Plex Sans Arabic, Cairo and Tajawal, and some pair nicely with common English fonts. Load only the weights you use, because Arabic font files are large and they’ll slow mobile pages.
Numbers need a decision. Western digits (1, 2, 3) are common on Gulf business sites. Eastern Arabic digits are more traditional. Either is fine, but be consistent across prices, phone numbers and dates. And watch mixed strings: an English brand name or a phone number inside an Arabic sentence can jump to the wrong end of the line. Test every one of those on a real phone.
Translation vs transcreation
A literal translation of English marketing copy reads like a translation. The sentence structure is wrong, the tone is off and the calls to action sound stiff. Gulf buyers notice within a line or two.
Transcreation means a native writer takes the English meaning and rewrites it for an Arabic reader. Headlines change. Examples change. Sometimes the order of sections changes. It costs more than translation and it’s worth it on the pages that sell: home, services, about and contact. Policies and long technical pages can be translated and then reviewed.
Do separate Arabic keyword research too. People don’t search in Arabic using the literal translation of English keywords, so a translated keyword list misses the terms that matter.
How to build a bilingual Arabic English website step by step
Here’s the order we follow so Arabic is never an afterthought.
Agree scope for each language
List which pages exist in both languages and who writes and approves the Arabic.
Design the homepage in both directions
Show the English and Arabic homepage concepts side by side before any build work starts.
Set up language URLs and hreflang
Subdirectories, a multilingual plugin or native CMS localization, and tags that point both ways.
Build with logical CSS and an Arabic type scale
One stylesheet for both directions, Arabic font sizes and line heights set separately.
Add the Arabic copy and localize the details
Forms, error messages, button labels, image alt text, page titles and meta descriptions.
Test on real phones with a native reader
Check every page in Arabic on iOS and Android, including mixed numbers, sliders and forms.
Set an update routine
Every content change gets an Arabic twin within an agreed number of days.
Running a two language site after launch
Most bilingual sites look great on day one and drift by month six. English gets a new service page, Arabic doesn’t. A price changes in one language only. The fix is boring and it works: one person owns the sync, and a change isn’t “done” until both versions are updated.
Two practical notes for Gulf businesses. Many visitors will reach you on mobile, often through a WhatsApp link, so make sure WhatsApp buttons and forms work in both languages (see our guide to mobile friendly website design). And plan launches around the working week. The UAE federal government moved to a Saturday and Sunday weekend in 2022, which overlaps nicely with a US based team.
Frequently asked questions
Should Arabic and English be on separate URLs?
Yes. Google recommends different URLs for each language rather than switching language with cookies. Subdirectories like /en/ and /ar/ are the simplest option for most businesses.
Can I just use a translation plugin?
A plugin is fine for managing languages, URLs and hreflang. Automatic machine translation is not fine for sales pages. Use a native writer for the pages that win business.
Which language should be the default?
The one most of your buyers use. Many Gulf B2B sites default to English with a clear Arabic switch. Consumer and government facing sites often default to Arabic. Either way, never force a redirect based on browser language.
Does a bilingual site help SEO in the UAE?
It can, because Arabic pages can rank for Arabic searches that an English only site will never reach. That only works if the Arabic pages are properly written and indexed on their own URLs.
Which platforms handle Arabic RTL well?
WordPress handles RTL natively and works with multilingual plugins such as WPML and Polylang. Webflow and Shopify support localization too. Custom components and third party widgets are where problems usually appear.
Can a New York agency build an Arabic website?
Yes. We handle the design, build, RTL layout and SEO setup remotely, and work with your native Arabic writer or a trusted translator for the copy.
Two languages, one standard
A bilingual Arabic English website done right feels native in both directions. That comes from planning Arabic at the start, giving it its own URLs, typography and copy, and keeping the two versions in step after launch.
If you’re planning a two language site, our website development services cover the full build, and our website design services start with a free homepage concept. Get in touch and we’ll show you both directions before you commit.
