A clinic in Jeddah wants its site in Arabic and English. What it usually gets is one of two things. An English site with a "translate" button that produces Arabic nobody would write. Or an Arabic version that looks like the English one flipped in a hurry: brackets facing the wrong way, phone numbers scrambled, a thin font that's hard to read on a phone.
Neither works for the patient reading it, and neither ranks well on Google.
A proper bilingual website is two websites sharing one codebase and one design system. Here is what "properly" means, so you can check any proposal you receive.
One language, one URL
Every page should exist once per language, at its own address. Search engines index URLs, not sessions. If the same address shows Arabic or English depending on a cookie, Google will probably only see one of them.
| Structure | Example | Verdict |
|---|---|---|
| Subfolders | example.com/ar/ and example.com/en/ | Best default. One domain, one hosting setup, authority shared |
| Subdomains | ar.example.com | Works, a bit more setup and maintenance |
| Separate domains | example.com.sa and example.com | Makes sense for different markets with different content |
| Same URL, language by cookie | example.com for both | Avoid. One version is often invisible to search |
Google's own guidance on multilingual sites recommends separate URLs per language and advises against redirecting visitors to a language automatically. Googlebot usually crawls without a language preference, so an automatic redirect can hide a whole version from search. Show a clear language switcher instead, and make it lead to the same page in the other language, not back to the homepage.
Tell browsers and Google which language is which
Three small pieces of markup do a lot of work.
lang and dir
Arabic pages declare lang="ar" and dir="rtl" on the root element. English pages declare lang="en" and dir="ltr". The dir attribute switches the whole layout direction. The lang attribute helps browsers pick fonts, helps screen readers pronounce text correctly, and helps translation tools. Google, however, says it detects a page's language from its visible content, not from lang. So the words on the page matter more than the tag.
hreflang
Hreflang tags tell Google "this page has an Arabic version here and an English version there," so the right one shows in the right search. The rules that trip people up:
- Each page lists every version, including itself.
- Links must go both ways. If the Arabic page points to the English one but not the reverse, Google may ignore the annotations.
- Use valid codes:
aranden, orar-EG,ar-SAand so on only if the content actually differs by country. - Add
x-defaultfor the page to show when no language matches, often your main homepage or a language chooser.
You can place hreflang in the page head, in HTTP headers, or in your XML sitemap. Pick one method and apply it everywhere.
canonical
Each language version is canonical to itself. A common mistake is pointing the Arabic page's canonical at the English page, which tells Google the Arabic page is a duplicate and should be ignored.
Translation is writing, not a button
Automatic translation widgets are free and it shows. Native readers spot the text instantly, and often it isn't in the page's HTML at all, so search engines never see it. Google's spam policies also list mass-producing pages through automated transformations, translation included, when they add little value.
Real translation adapts. An Arabic reader in Riyadh and an expat in Dubai may need different examples and emphasis. Budget for a native writer in each language, or at least a native editor for every page. Our guide to website copy that sells applies to each language separately.
RTL is more than flipping the page
When the direction switches to right-to-left, the whole reading flow reverses: the logo moves to the right, navigation reads right to left, and the "next" arrow points left. A well-built site handles this with one stylesheet, using CSS logical properties such as margin-inline-start and text-align: start, which adapt automatically to the direction. Bootstrap 5 also ships an RTL build for the same purpose.
But not everything should mirror:
| Element | Mirror in Arabic? |
|---|---|
| Navigation order, sidebars, breadcrumbs | Yes |
| Back and next arrows, carousels, step indicators | Yes |
| Icons with a direction, like a reply arrow | Usually yes |
| Video play button and media controls | No |
| Logos, brand marks, checkmarks | No |
| Phone numbers, emails, URLs, code | No, keep them left to right |
Always test with real Arabic content, not placeholder text. A button that fits in English can break in Arabic.
Arabic typography deserves its own decisions
Many Latin fonts include Arabic glyphs as an afterthought. Choose a typeface designed for Arabic, such as IBM Plex Sans Arabic, Cairo, Tajawal or Noto Naskh Arabic, and pair it with a Latin font of a similar feel.
A few rules that make Arabic text look professional:
- Arabic often looks smaller than Latin at the same pixel size. Test body text a step larger, and give it generous line height so dots and diacritics don't collide.
- Never add letter-spacing to Arabic. It breaks the connections between letters.
- Don't fake italics. Arabic has no true italic, and slanted text looks broken. Use weight or colour for emphasis.
- Load only the weights you use. Arabic font files are larger than Latin ones, and every extra weight slows the first load. See website speed and Core Web Vitals.
Numbers, dates and mixed text
This is where bilingual sites quietly go wrong.
Digits. Both Western digits (1, 2, 3) and Eastern Arabic digits (١، ٢، ٣) are used in Egypt and the Gulf. Pick one for the Arabic site and use it everywhere. Western digits are simpler for anything people copy, like phone numbers, prices and order codes.
Formatting functions. Date and number formatting depends on the locale code. For example, the same date formatted with ar-EG can come out in Eastern Arabic digits, while ar-AE returns Western digits. Set the numbering system explicitly instead of trusting defaults. If you serve Saudi users, also decide whether you need Hijri dates alongside Gregorian ones.
Mixed direction. A phone number or an English brand name inside an Arabic sentence can appear scrambled. Wrap such fragments so they keep left-to-right direction, and use dir="auto" for user-entered text like names, comments and search boxes.
Forms. Name fields should accept Arabic. Phone and email fields stay left to right. Error messages exist in both languages.
Search in two languages
Each language needs its own keyword research, not a translated list. Arabic searchers mix standard Arabic and dialect, and spell the same word several ways.
URL slugs are a trade-off. Arabic slugs are readable in the address bar but turn into long encoded strings when copied into WhatsApp. Many sites use short English slugs for both versions. Either way, stay consistent. For the wider picture, read the practical guide to SEO in Egypt.
Pre-launch checklist for a bilingual site
- Every page has an Arabic and an English URL
- The language switcher leads to the same page in the other language
langanddirare correct on every page- Hreflang tags list all versions, point both ways, and include
x-default - Each version's canonical points to itself
- Menus, arrows and sliders mirror; logos and media controls don't
- Phone numbers and emails display correctly inside Arabic text
- Digits and date formats are consistent across the Arabic site
- Forms, emails and error messages exist in both languages
- Both sitemaps are submitted in Google Search Console
The full list of general checks is in our pre-launch checklist.
Questions people ask
Should the Arabic or English version be the default?
Whichever your main audience reads. For most businesses in Egypt and Saudi Arabia that's Arabic. Use x-default for the version shown when no language matches.
Can I launch in Arabic first and add English later?
Yes, if the site is built for both directions from day one. Retrofitting RTL onto a left-to-right-only site is far harder.
Is a translation plugin or widget good enough?
Not for a business site. The quality is visibly machine-made, and search engines may not index the translated text. Use human translation or at least human review.
Do both languages need exactly the same pages?
No. Some pages may only make sense for one audience. Just make sure the hreflang tags only connect pages that really are equivalents.
Does a bilingual site cost double?
Not double, but more. Design and development handle both directions once, and the main extra cost is writing and reviewing content in the second language.
Getting it right the first time
A bilingual site is cheapest when it's planned from the first wireframe: separate URLs, a direction-aware stylesheet, a clear rule for digits and dates, and a real writer for each language. Fixing these after launch usually means redoing templates page by page.
If you're planning an Arabic and English site and want someone to check the structure before a line of code is written, you can book a meeting with us.
