Bilingual Arabic/English Websites: A Technical Playbook (2026)

---

A proper bilingual Arabic + English website is not just two language versions of the same site. It is a coordinated technical implementation covering language detection, URL structure, hreflang declarations, RTL CSS that handles edge cases, Arabic font subsetting, schema localization, sitemap configuration, and analytics segmentation. Most premium WordPress and Shopify themes implement Arabic well enough for design but fail on several of these technical layers — and the failures are not visible to clients until rankings or user-experience data shows the cost. This playbook covers the working patterns from real Omani bilingual deployments, with code snippets and decision frameworks for each layer.

Key Takeaways

• URL structure — subdirectory (/ar/ and /en/) is the strongest SEO choice for most Omani bilingual sites
• hreflang — use ar-OM and en-OM paired with x-default for the language-selector fallback
• RTL CSS — use CSS logical properties, not direction: rtl flips
• Arabic fonts — subset to actually-used glyphs; use Cairo, Tajawal, or IBM Plex Sans Arabic
• Schema — field values translated to match the page’s language
• Testing — full RTL QA pass with real Arabic content, not Lorem Ipsum

---

Why “translation” is not bilingual SEO

The most common mistake on Omani bilingual sites is treating Arabic as an output of translating English content. Arabic-speaking users in Oman search differently — different morphology, different keyword patterns, different intent at the same conceptual level. According to keyword data from Ahrefs and Semrush for Oman, the literal translation of a high-value English commercial keyword captures 20–40% of the search volume that proper Arabic keyword research would target. Real bilingual SEO requires separate research, separate writing, and separate technical configuration per language.

---

Language detection vs explicit toggle: which to choose?

Two patterns coexist for serving the right language to each user:

Pattern 1 — Explicit language toggle (recommended)

User actively chooses Arabic or English via a visible toggle. Their choice is stored in a cookie or session and persists across pages. This is the recommended pattern because it gives users control and avoids the false-positive misdetection problems of automatic detection.

Pattern 2 — Automatic language detection

System guesses language from browser Accept-Language header or geo-location, then serves the matching version. Higher friction for users whose browser language doesn’t match their preference (very common in Oman where many users browse English even when they read Arabic).The winning Omani pattern is explicit toggle by default + automatic detection as a one-time soft suggestion on first visit (“It looks like you prefer Arabic — switch?” with a dismissible banner). Never auto-redirect users based on detection alone.

---

URL structure: subdirectory, subdomain, or domain?

For most Omani bilingual sites in 2026, subdirectories are the strongest SEO choice — mercuryoman.com/ar/ and mercuryoman.com/en/ (or the default-language version at the root and only the second language in a subdirectory). The three options compared:

Pattern

Example

SEO impact

Operational complexity

Subdirectory	domain.com/ar/page	Strong — shared domain authority	Low
Subdomain	ar.domain.com/page	Weaker — split signals	Medium
Separate domain	domain.om vs domain.com	Strongest per-market authority	High

For most Omani SMBs targeting a single country (Oman) in two languages, subdirectories deliver the best balance. The subdomain pattern is appropriate for organizations with materially different brand or content per language; separate domains are appropriate for multi-country GCC operations.

---

Hreflang implementation that actually works

Hreflang tells Google which version of a page is intended for which audience. The single most common Arabic hreflang mistake is using bare hreflang="ar" when hreflang="ar-OM" is correct. The implementation:

Why this matters

• ar-OM targets Arabic-speaking users in Oman specifically — not all global Arabic speakers
• en-OM targets English-speaking users in Oman specifically — not all global English speakers
• x-default is the fallback for users whose language preference doesn’t match either declaration
• Each page must reference the other language version and itself

Common hreflang mistakes

• Using hreflang="ar" (targets all Arabic speakers — too broad, you’ll lose to larger markets)
• Missing the self-reference (each page should declare itself in the hreflang block)
• Missing x-default
• Asymmetric declarations (Arabic page references English, but English page doesn’t reference Arabic)
• Pointing to non-existent or 404 alternate URLs

---

RTL CSS that doesn’t break

The naive RTL implementation is to set direction: rtl on the root element and assume everything will reverse correctly. This breaks subtly in many places. The modern approach uses CSS logical properties that automatically respect the document’s writing direction.

Use logical properties

Arabic body text often contains English brand names, URLs, and numbers. These should render in their natural direction within the Arabic paragraph. Wrap embedded English content:

تواصل معنا على +968 1234 5678 أو زورنا على www.example.com.

Test with real content

Lorem Ipsum text doesn’t reveal the bugs. Always run your bilingual templates through real Arabic content with embedded English, mixed numbers, and edge cases (long words, line wrapping, character emphasis).

---

Arabic font choice and performance

Arabic web fonts are heavier than Latin fonts because of the larger glyph set (40+ letters with multiple contextual forms each, plus Latin and digit support). A naive font implementation can add 200–500 KB to page weight, materially impacting Core Web Vitals on Oman’s mobile-heavy traffic.

Recommended Arabic fonts

Font

Quality

Weight

Use case

Cairo	Excellent	Light	Modern, clean — versatile default
Tajawal	Excellent	Light-Medium	Slightly more personality
IBM Plex Sans Arabic	Excellent	Medium	Technical / professional
Noto Sans Arabic	Good	Medium	Universal coverage

Performance tactics

• Subset fonts to actually-used glyphs (free via glyphhanger or Google Fonts subset URLs)
• Use font-display: swap so text appears even before the font loads
• Prefer modern WOFF2 format
• Preload the primary font weight on <head> for above-the-fold text
• Limit to 2–3 weights maximum (regular, semibold; optionally bold) — Arabic font weights are heavier than Latin equivalents

---