Key takeaways
- Give each language its own URL (for example / and /ar) and connect them with hreflang.
- Mirror the interface for Arabic with CSS logical properties instead of maintaining two stylesheets.
- Choose an Arabic typeface made for screens and give Arabic text more line height.
- Write the Arabic copy natively; literal translation is why many bilingual sites feel foreign.
- Test forms, numbers, dates and icons in both directions before launch.
On this page
Why does a bilingual website need more than translation?
Because Arabic changes the layout, the typography and the way people read, not only the words. Arabic runs right to left, joins its letters, needs more vertical space and is read by an audience that notices immediately when a page was designed in English and translated afterwards. In Oman and across the GCC many customers switch between both languages, so both versions have to feel native.
The good news: if bilingual support is planned from the first wireframe, it mostly costs content and testing time, not engineering heroics. Retrofitting right-to-left support into a finished English site is where budgets slip.
1. URLs and SEO: does each language have its own address?
Search engines index URLs, not toggles. Each language needs its own crawlable address, for example /services and /ar/services.
- One folder per language. A subfolder such as
/arkeeps a single domain and a single deployment, and both languages share the site's authority. - hreflang on every page. Each page declares its English and Arabic versions plus an
x-default, so Google shows Arabic speakers the Arabic page. - A self-referencing canonical per language. The Arabic page is canonical to itself, never to the English one.
- The right
langanddiron the<html>element (lang="ar" dir="rtl"). - Translated metadata. Titles, descriptions and social preview text exist in both languages.
- A sitemap that lists both versions with their alternates.
2. Layout: what should flip in right-to-left?
Mirror the interface, not the meaning. Navigation, reading order, alignment, progress and "back/next" arrows follow the reading direction. Things that represent the physical world do not.
| Element | Mirror in Arabic? |
|---|---|
| Navigation order, text alignment, sidebars | Yes |
| Back/next arrows, breadcrumbs, sliders, progress bars | Yes |
| Checkmarks, media play buttons, clocks | No |
| Logos, product photos, charts with a time axis | Usually no |
| Phone numbers, emails, code, URLs | No, keep them left to right |
Build the layout with CSS logical properties (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start). Flexbox and grid already follow the document direction, so one stylesheet serves both languages and nothing has to be maintained twice.
3. Typography: what does Arabic text need?
Arabic needs its own type decisions:
- A typeface designed for Arabic on screens. Families such as IBM Plex Sans Arabic, Noto Sans Arabic or Tajawal pair an Arabic design with Latin characters, so mixed sentences stay consistent.
- More room. Arabic usually reads better one to two pixels larger than the English body size, with a taller line height.
- No letter-spacing, no uppercase, no fake italics. Tracking breaks the joins between Arabic letters, uppercase does not exist in Arabic, and slanted Arabic is hard to read. Use weight or colour for emphasis.
4. Content: should the Arabic be translated or written?
Written. Treat the Arabic version as its own copywriting job with the same brief as the English one: the same message and facts, phrased the way a Gulf reader expects. Literal translation produces long, formal sentences and English word order.
- Agree on a glossary for product names and technical terms, and decide which brand names stay in Latin script.
- Choose one digit style (Western 0–9 or Eastern Arabic ٠–٩) and use it everywhere.
- Prices in Omani rial use three decimal places (1 OMR = 1,000 baisa), so plan price formatting in both languages.
5. Forms, numbers and mixed text: where do bilingual sites usually break?
Most bugs live where the two directions meet:
- Mixed sentences. An English brand name inside an Arabic sentence can jump to the wrong side of the line. Wrap embedded Latin text in
<bdi>or setunicode-bidi: isolate, or rephrase the sentence. - Inputs. Email, phone and URL fields stay
dir="ltr"even on the Arabic page; names and messages follow the page direction. - Validation messages, placeholders and emails sent by the form exist in both languages.
- Dates and times use the right locale and time zone (Asia/Muscat for Oman).
6. CMS and workflow: how do editors keep both languages in sync?
Put both languages side by side in the CMS, so editors see at a glance what is missing. Decide which fields must exist in both languages before publishing and which may launch in English first. Give editors a preview in both directions, and make the Arabic version a required step in the publishing checklist rather than a task for "later".
Bilingual launch checklist
| Area | Check before launch |
|---|---|
| URLs | Every page has an Arabic URL, hreflang, canonical and translated metadata |
| Layout | Arabic pages are mirrored; arrows and sliders flip; logos and media do not |
| Type | Arabic font loads quickly; sizes and line height tuned; no letter-spacing |
| Content | Arabic written natively; glossary applied; one digit style |
| Forms | Inputs, errors and confirmation emails in both languages; email/phone fields stay LTR |
| QA | Tested on mobile in both languages, including the language switcher on every page |
How AbuData can help
Every site we build is bilingual from the first wireframe: Arabic and English share one design system, one codebase and one CMS, with SEO set up for both languages. You can see examples in our portfolio and our services, or tell us about your project.
Frequently asked questions
Should the Arabic version live on a subfolder, a subdomain or a separate domain?
For most businesses a subfolder such as /ar is the simplest and strongest option: one domain, one deployment, and both languages share the site's authority. A separate domain only makes sense when the Arabic site is effectively a different business.
Do I still need hreflang if the two languages use different scripts?
Yes. hreflang tells search engines which page to show to which audience and links the two versions as equivalents. Without it, Google may show the English page to Arabic searchers or treat the versions as unrelated pages.
Is machine translation good enough for the Arabic version?
It is a reasonable first draft, not a finished page. A native editor should rewrite it for tone, terminology and sentence flow before publishing; readers notice translated Arabic quickly, and it weakens trust.
Which digits should an Arabic website use?
Both Western (0–9) and Eastern Arabic (٠–٩) digits are correct. Western digits are common on Gulf websites and keep prices and phone numbers consistent across languages; whichever you choose, use it everywhere.
Does a bilingual website take much longer to build?
If both languages are planned from the start, most of the extra effort is in writing the Arabic content and testing, not in development. Adding right-to-left support to a finished English-only site is what usually takes longest.
