Bilingual Website Development: Arabic & English

Bilingual Arabic/English Websites: Architecture, Content, and SEO for the Gulf Market

In the Gulf region, bilingualism is not a luxury feature — it is a fundamental business requirement. With Arabic as the official language across all GCC states and English as the dominant language of business, commerce, and expatriate communities (who represent 70-90% of the population in countries like the UAE and Qatar), every serious web presence in the Gulf must function flawlessly in both languages.

Yet building a truly bilingual Arabic/English website goes far beyond bolting a translation plugin onto an English site. It requires architectural decisions that affect every layer of the stack — from URL structure and database schema to CSS framework choices and SEO strategy. The difference between a well-built bilingual site and a poor one is immediately apparent to Gulf users, who switch between Arabic and English multiple times per day and have zero tolerance for awkward translations or broken layouts.

This guide covers the complete technical and strategic landscape of bilingual Arabic/English web development, drawing on AivenSoft's extensive experience delivering bilingual projects across the GCC.

Internationalization (i18n) Architecture

URL Structure: Three Approaches

The choice of URL structure for your bilingual site has significant implications for SEO, user experience, and technical complexity:

Option 1: Subdirectory (Recommended) ``` https://example.com/en/services https://example.com/ar/services ``` - Pros: Single domain authority, easy analytics, straightforward deployment - Cons: Slightly more complex routing - Best for: Most Gulf businesses - SEO impact: All link equity consolidates on one domain

Option 2: Subdomains ``` https://en.example.com/services https://ar.example.com/services ``` - Pros: Clear separation, can host on different servers - Cons: Split domain authority, more complex SSL, separate analytics - Best for: Large enterprises with separate regional teams

Option 3: Separate Domains ``` https://example.com/services (English) https://example.ae/services (Arabic) ``` - Pros: Maximum flexibility, local domain trust signals - Cons: Highest maintenance cost, completely split SEO equity - Best for: Companies with entirely separate regional identities

AivenSoft recommendation: The subdirectory approach (`/en/` and `/ar/`) is optimal for 90% of Gulf web projects. It consolidates domain authority, simplifies maintenance, and is the approach recommended by Google for multilingual sites.

Framework-Level i18n

Next.js (our recommended framework for bilingual Gulf sites)

Next.js provides built-in internationalized routing:

```javascript // next.config.js module.exports = { i18n: { locales: ['en', 'ar'], defaultLocale: 'en', localeDetection: true, }, } ```

Combined with a translation library like `next-intl` or `react-i18next`:

```javascript // Using next-intl import { useTranslations } from 'next-intl';

export default function ServicesPage() { const t = useTranslations('services'); return ( <div> <h1>{t('title')}</h1> <p>{t('description')}</p> </div> ); } ```

Translation File Structure

Organize translations logically:

``` /messages /en common.json (navigation, footer, buttons) services.json (services page content) about.json (about page content) /ar common.json services.json about.json ```

Content Management for Bilingual Sites

Headless CMS Approach (Recommended)

A headless CMS with structured multilingual content is the most maintainable approach:

• Sanity: Native multilingual support with side-by-side editing, excellent for Arabic content
• Strapi: Open-source with i18n plugin, good for teams who want full control
• Contentful: Enterprise-grade with robust localization workflow
• Directus: Open-source, SQL-based, flexible multilingual content modeling

Key CMS requirements for Arabic/English:

1. 1Side-by-side editing: Content editors must see Arabic and English versions simultaneously
2. 2RTL editor support: The CMS rich text editor must handle Arabic input natively (not all do!)
3. 3Separate publication status: Arabic and English content may be ready at different times
4. 4Image variants: Some images may need Arabic text overlays, requiring per-language image fields
5. 5SEO fields per language: Separate meta titles, descriptions, and slugs for each language

SEO for Bilingual Arabic/English Sites

Hreflang Implementation

Proper hreflang tags are critical for bilingual Gulf sites. They tell Google which language version to serve to which users:

```html <!-- On the English version of a page --> <link rel="alternate" hreflang="en" href="https://example.com/en/services" /> <link rel="alternate" hreflang="ar" href="https://example.com/ar/services" /> <link rel="alternate" hreflang="x-default" href="https://example.com/en/services" />

<!-- On the Arabic version of the same page --> <link rel="alternate" hreflang="en" href="https://example.com/en/services" /> <link rel="alternate" hreflang="ar" href="https://example.com/ar/services" /> <link rel="alternate" hreflang="x-default" href="https://example.com/en/services" /> ```

Common hreflang mistakes in Gulf sites: - Missing self-referencing hreflang (each page must reference itself) - Inconsistent URL patterns between language versions - Forgetting the `x-default` tag - Using country codes (`hreflang="ar-AE"`) when language targeting is sufficient (`hreflang="ar"`)

Bilingual Keyword Strategy

English and Arabic keywords serve different user intents and different audience segments:

Key insight: Do not simply translate English keywords into Arabic. Arabic search patterns differ fundamentally: - Arabic users use longer, more descriptive queries - Question-format queries ("كيف" = "how") are more common in Arabic - Brand searches often mix Arabic and English (e.g., "آيفون 16 برو" for "iPhone 16 Pro")

Technical SEO for Bilingual Sites

1. 1Separate XML sitemaps: Generate language-specific sitemaps referenced from robots.txt
2. 2Canonical tags: Each language version should have its own canonical pointing to itself (not cross-language)
3. 3Structured data: Implement in both languages — Google can display Arabic rich snippets in Arabic SERPs
4. 4Page speed: Arabic web fonts can add 50-200KB; optimize with font subsetting and `font-display: swap`
5. 5Mobile-first indexing: Ensure both language versions are fully responsive

User Experience Design for Bilingual Sites

Language Switching UX

The language switcher is one of the most critical UX elements on a bilingual site:

Best practices: 1. Position: Top-right corner for English, top-left for Arabic (follows the eye tracking pattern for each language direction) 2. Label: Use the native language name — "العربية" (not "Arabic") and "English" (not "الإنجليزية") 3. Behavior: Switch to the equivalent page in the other language (not the homepage) 4. Persistence: Remember the user's language choice via cookie or localStorage 5. URL update: Language switch should update the URL (for bookmarking and sharing) 6. No flags: Do not use national flags to represent languages — Arabic is spoken across 25+ countries, and English is a global language

Content Parity

Not all content needs to be identical in both languages, but users should not feel that one language is a second-class experience:

• Navigation: Must be fully equivalent in both languages
• Core content: Product/service pages, pricing, legal pages must be available in both
• Blog/editorial: Can have language-specific content (e.g., Arabic articles for Arabic audience, English for expats)
• User-generated content: Reviews, comments may naturally be in one language — display as-is with optional translation

Form Design for Bilingual Sites

• Input direction: Use `dir="auto"` on all text inputs to auto-detect language
• Validation messages: Must display in the active language
• Name fields: Support Arabic names (which may not have "first name / last name" structure)
• Phone fields: Default country code to +971 (UAE) or +966 (KSA) based on locale
• Date pickers: Support both Hijri and Gregorian calendars

Performance Optimization for Bilingual Sites

Font Loading Strategy

Arabic web fonts are typically larger than Latin fonts due to the larger character set and connected script variations:

```css /* Subset Arabic fonts to reduce file size */ @font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-Regular-subset.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; } ```

• Before subsetting: Arabic font file ~180KB
• After subsetting: ~45KB (75% reduction)
• Impact: 200-400ms improvement in First Contentful Paint

Lazy Loading per Language

Load only the active language's content:

```javascript // Dynamically import translation messages const messages = await import(`../messages/${locale}/common.json`); ```

AivenSoft specializes in bilingual Arabic/English web development for the Gulf market. Our team of bilingual developers and designers creates digital experiences that feel native in both languages, ensuring no user feels like an afterthought.

Sources and References

• Google Search Central, *Managing Multi-Regional and Multilingual Sites*, developers.google.com
• W3C, *Internationalization Best Practices*, w3.org
• Ahrefs, *Arabic SEO: Keyword Research and Strategy Guide*, 2025
• Next.js Documentation, *Internationalized Routing*, nextjs.org
• WebPageTest, *Font Loading Performance Analysis: Arabic Web Fonts*, 2025