To build a bilingual Arabic–English website that feels native in both: give each language its own URL such as /ar and /en, apply full right-to-left layout for Arabic rather than just right-aligning text, write content in each language instead of translating literally, store bilingual fields in the database, and add hreflang tags for SEO. Then test every page in both languages on mobile before launch.
- bilingual arabic english website
- how to make a website in arabic and english
- arabic rtl website design best practices
- how to add arabic language to my website
- hreflang arabic english setup
How do you build a bilingual Arabic–English website that feels native?
A successful bilingual Arabic–English website is one where no visitor feels they are reading “the translated version”. The Arabic visitor gets a right-to-left interface in natural Arabic with comfortable fonts; the English visitor gets a site that reads naturally in English. You need five things: separate URLs per language, correct direction, content written in each language, bilingual data, and SEO set up for each version.
This matters most in the Gulf. In Saudi Arabia, Arabic is the language of most customers, with English serving residents and businesses. In the UAE, English often leads because the audience is so diverse, but Arabic is expected on official and regulated pages and is highly valued by Emirati customers. Most Gulf businesses need both languages at equal quality.
A bilingual site is two sites that share data, not one site with a translate button.
How should you structure URLs and the default language?
The first technical decision is how the site knows which language to show. The clearest option for users and search engines is a separate path per language:
| Option | Example | Verdict |
|---|---|---|
| Path per language | example.com/ar and example.com/en | Usually best: clear, SEO-friendly, one domain |
| Subdomain | ar.example.com | Fine, but more setup |
| Domain per country | example.sa and example.ae | Useful when content and prices differ by country |
| Cookie switch only | One URL whose content changes | Avoid: search engines only see one language |
- Default language: pick by your main audience, and respect the browser language on the first visit without forcing it.
- The language switch takes the visitor to the same page in the other language, not to the homepage.
- Name each language in itself: “English” and “العربية”, not country flags, because a language is not a country.
- Remember the choice so returning visitors land in their language.
How do you implement RTL properly?
The most common mistake is right-aligning Arabic text while the layout stays English. Right-to-left means the whole page mirrors. For more detail, see Arabic UX mistakes.
- Set dir=rtl at page level and use logical CSS properties (start and end) instead of left and right.
- Mirror menus, sidebars, breadcrumbs and carousels.
- Mirror directional icons such as arrows and “next”, but not logos, play buttons or clocks.
- Phone, email and URL inputs stay left-to-right even in the Arabic interface.
- Mixed text (Arabic with English names or numbers) needs testing, as punctuation can jump out of place.
- Tables and charts: column order starts from the right.
Why write content in each language instead of translating?
Literal translation produces sentences that are grammatically correct but feel foreign. A Gulf customer instantly spots a phrase carried over word for word from English and senses the site was not written for them.
- Store terms nobody uses locally
- Long sentences in English word order
- Marketing headlines translated word for word
- US month/day date formats
- Images and examples that do not look like local customers
- Terms familiar from local stores
- Short, direct sentences in natural Arabic
- Headlines that speak to local motivations
- Clear Gregorian dates, with Hijri where it matters
- Images and examples from the same market
Use AI for an excellent first draft, but have the Arabic reviewed with a local reader's eye. And write the error, confirmation and notification messages too; customers read them constantly and almost nobody polishes them.
How do you design data, numbers and dates for two languages?
A bilingual site starts in the database. If you store a product name in one language, you end up machine-translating it at display time, usually with poor results.
| Data | Recommended approach |
|---|---|
| Product and service names | Two fields: Arabic name and English name |
| Descriptions and policies | Two fields or two separate pages per language |
| Categories and cities | A table of fixed translations reviewed by a person |
| Prices | One number, with currency format (SAR or AED) by language |
| Dates | Store in one standard format; show Gregorian, plus Hijri where needed |
| Numbers | Western digits 0-9 in both languages in most cases, tested inside Arabic text |
If your business follows Ramadan, Eid and Hijri dates, read the Hijri dates in apps guide.
On-site search in Arabic
Arabic search needs handling that many global templates lack. A customer may type the same word with or without a hamza on the alef, with a final ta marbuta or ha, or with and without the definite article, and all should return the same results. Ask for search that normalizes these letter forms, ignores diacritics, and searches both the Arabic and English name fields, so an English query still finds a product with an Arabic name.
How do you get both versions to rank in search?
Search engines treat each language as a separate page. To show Arabic to people searching in Arabic and English to people searching in English:
- 1A separate URL per language
Every page has an Arabic and an English version at different addresses.
- 2hreflang tags
Link each page to its counterpart in the other language and set a default version.
- 3A title and description per language
Use the words people actually search in each language, not a literal translation.
- 4A sitemap with both languages
List every Arabic and English URL in your sitemap.
- 5Internal links in the same language
Arabic pages link to Arabic pages, English to English.
To go deeper on Arabic search specifically, read the Arabic SEO guide.
How to build and test a bilingual site with Fanann
Fanann is Arabic-first: interfaces are built right-to-left from the ground up, and you can ask for a full English version in the same conversation, with bilingual database fields and Hijri dates where needed. Describe the site the way you picture it:
Build a bilingual website for a dental clinic with branches in Riyadh and Dubai, Arabic by default and English second. Each language has its own path (/ar and /en) with a switch that opens the same page in the other language and remembers the choice. The Arabic interface is fully right-to-left, including menus, arrows and forms, while phone and email fields stay left-to-right. Store service names, doctor names and descriptions in separate Arabic and English fields, and prices in SAR or AED by branch. Add appointment booking with mobile OTP, a title, description and hreflang tags for every page in both languages, and a sitemap with all URLs. Write the Arabic in natural Arabic, not translated English.
Try it in FanannPre-launch test list
- You browsed every page in both languages on a small phone and a laptop.
- The language switch opens the same page everywhere.
- No English left in the Arabic interface (buttons, errors, emails, notifications).
- Forms accept numbers and show errors in the right language.
- Pages work with screen readers in both languages; see accessibility for Arabic sites.
- Landing pages are written for each audience; see landing pages for Arabic-speaking visitors.
Key takeaways
- Each language gets its own URL (/ar and /en) with its own title, description and hreflang tags.
- RTL means mirroring the whole layout: menus, directional icons and forms, not just text alignment.
- Write content natively in each language; literal translation tells visitors the site is not for them.
- Store product names and descriptions in two fields; never machine-translate them at display time.
- Test every page in Arabic and English on mobile, where most problems appear.
Frequently asked questions
How do I make a website in Arabic and English?
Is browser auto-translation enough?
Which language should be the default in the Gulf?
Should Arabic pages use Eastern Arabic or Western digits?
Does a bilingual website help SEO?
Ask your AI assistant about this
Copy this prompt into the AI assistant you use, then add the details of your own case.
I am reading this guide: “Building a bilingual Arabic–English website or app that feels native in both” https://fanann.com/en/blog/bilingual-arabic-english-website/ My question: bilingual arabic english website Use that page as a source and explain the answer step by step for my situation, tell me what to check before I start, and cite the page link.