.png&w=3840&q=75)
How to Build a Bilingual Arabic-English Website (The Right Way)
Building a website in Arabic and English sounds like it should be straightforward: design the site, translate the content, flip the layout. In practice, most bilingual Arabic-English websites are built wrong — and the problems show up in ways that quietly cost the business.
Text overflows containers. Numbers appear backwards. Forms align incorrectly in Arabic. Google indexes the English version but ignores the Arabic one. The language switcher sends users to the wrong page. These aren't design flaws — they're architecture flaws, and they are entirely avoidable.
This guide covers how to build a bilingual Arabic-English website correctly from the first decision.
The Foundational Decision: Architecture
Before any design or code, you need to decide how the two language versions of your site will exist structurally. There are three valid options:
Subdirectory structure (recommended for most businesses)
- Arabic:
yoursite.com/ar/ - English:
yoursite.com/en/
This keeps both languages on a single domain, consolidating your SEO authority. Google treats each language version as a distinct page and can index both. This is what most well-built Gulf business websites use.
Subdomain structure
- Arabic:
ar.yoursite.com - English:
yoursite.com
Easier to set up separately, but Google treats subdomains with some independence. You lose the SEO consolidation benefit.
Separate domains
- Arabic:
yoursite-ar.com - English:
yoursite.com
Hard to maintain, duplicates infrastructure costs, and splits your SEO authority. Avoid this unless you have a specific regional or legal reason.
For most Gulf businesses, subdirectory structure is the right call. It is how CloudTopia structures bilingual sites by default.
Setting the Direction: HTML lang and dir Attributes
Every page on your Arabic version must declare its direction explicitly. This is non-negotiable and affects everything downstream — layout, fonts, form rendering, and how browsers handle mixed-direction content.
<!-- Arabic page -->
<html lang="ar" dir="rtl">
<!-- English page -->
<html lang="en" dir="ltr">This single attribute triggers the browser's bidirectional text engine, tells screen readers what language is in use, and signals to Google what language the page serves. Omitting it is one of the most common mistakes in bilingual site development.
Layout: Mirror, Don't Just Flip
A properly built Arabic layout is not a CSS hack — it is a mirrored design. The correct approach is CSS Logical Properties, which replace physical directions (left, right) with logical ones (start, end) that respond automatically to the document direction.
Instead of | Use |
| |
| |
| |
| |
| use Flexbox/Grid instead |
With logical properties, a single stylesheet handles both directions. Without them, developers write duplicate CSS with [dir="rtl"] overrides — which creates technical debt and inconsistencies in edge cases.
Beyond CSS, the following elements must be checked and mirrored in every Arabic layout:
- Navigation menus flow right-to-left; the logo moves to the right in Arabic
- Breadcrumbs and pagination reverse their direction
- Icons with directional meaning (arrows, chevrons, progress indicators) should flip
- Sidebars shift from left to right
- Form labels and input fields align to the right
- Checkboxes and radio buttons sit on the right of their labels
Typography: Arabic Text Has Different Rules
Arabic and English type are not interchangeable. Designing Arabic text with the same rules as English produces layouts that are hard to read.
Font size: Arabic script has more visual complexity and smaller x-height than Latin fonts at the same size. Arabic body text should be 10–15% larger for equivalent readability — if your English body text is 16px, use 18px for Arabic.
Line height: Arabic characters include diacritical marks (tashkeel) that extend above and below the baseline. Arabic body text needs a minimum line-height of 1.8, compared to 1.5 for Latin. Using Latin line-height values in Arabic makes text look cramped and hard to read.
Letter spacing: Never add letter-spacing to Arabic text. Arabic is a connected script — letters join within words. Spacing between letters breaks those connections and makes words illegible.
Fonts to use: Choose fonts built for Arabic digital readability:
- Cairo — clean, modern, works well for headings and body text
- Tajawal — slightly more condensed, excellent for interfaces
- Noto Sans Arabic — extensive character coverage, reliable fallback
- IBM Plex Arabic — professional and sharp for business contexts
Avoid decorative Arabic fonts for body text. They may look elegant in print but become unreadable at small sizes on screen.
Bidirectional Text: The Hardest Part to Get Right
Real Arabic business content regularly contains mixed-direction text: an Arabic sentence with an English brand name, a product code, a URL, a phone number, or a technical term. This is called bidirectional (bidi) text, and it is the most common source of visual glitches in bilingual sites.
The Unicode Bidirectional Algorithm handles most cases automatically, but complex mixed-direction strings need explicit direction markers. Use the <bdi> HTML element to isolate directional content that is uncertain:
<p>تواصل معنا على <bdi>+968 9588 6393</bdi></p>
<p>تفضل بزيارة <bdi>cloudtopia.net</bdi></p>For inline English within Arabic text, use <span dir="ltr">. This prevents phone numbers from reversing, URLs from breaking, and brand names from appearing in the wrong order.
SEO for Bilingual Sites: hreflang Is Mandatory
Google needs explicit instructions to understand that your Arabic and English pages are language variants of the same content — not duplicate pages. Without this, Google may penalise one version or fail to serve the correct language to the right audience.
The hreflang attribute solves this:
<!-- On the English page -->
<link rel="alternate" hreflang="en" href="https://yoursite.com/en/" />
<link rel="alternate" hreflang="ar" href="https://yoursite.com/ar/" />
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/en/" />
<!-- On the Arabic page -->
<link rel="alternate" hreflang="ar" href="https://yoursite.com/ar/" />
<link rel="alternate" hreflang="en" href="https://yoursite.com/en/" />Each page must include hreflang tags pointing to all language variants. Both pages must point to each other. Missing or one-sided hreflang implementation is one of the most common technical SEO mistakes in bilingual Gulf websites.
Additionally: your Arabic page titles, meta descriptions, and headings must be written in Arabic — not auto-translated. Google evaluates content quality. Auto-translated Arabic reads poorly to native speakers and ranks poorly as a result.
The Language Switcher: Small Detail, Big Impact
Where and how you display the language switcher matters more than most designers realise.
Best practice:
- Place it in a consistent location on every page — top-right corner of the header, or footer
- Label it in the target language itself: العربية (not "Arabic"), English (not "الإنجليزية")
- Make it switch to the equivalent page in the other language, not the homepage
- Remember the user's language preference between sessions (cookie or localStorage)
The worst experience: a user switches to Arabic on a service page and gets sent to the English homepage. This is extremely common and completely avoidable.
Testing: Never Use Placeholder Arabic Text
Arabic placeholder text (the equivalent of Lorem Ipsum) does not reveal layout problems. Real Arabic content reveals them immediately.
Before launch, test with real copy across every template and edge case:
- Long Arabic business names that may break navigation
- Arabic content next to English product codes or numbers
- Dates in Arabic format (reversed day/month in some regional conventions)
- Arabic input in all forms — search, contact, checkout
- Mobile devices, especially with larger Arabic font sizes applied
- Mixed RTL/LTR content in testimonials, team bios, and case studies
The most reliable test: have a native Arabic-speaking user navigate the entire site without guidance. They will find problems that no automated test catches.
Common Mistakes to Avoid
Using translation plugins for the Arabic version: Automated translations produce Arabic that reads awkwardly to native speakers, undermines credibility, and ranks poorly. Proper bilingual sites have Arabic content written or reviewed by a native speaker.
Treating the Arabic version as secondary: If the Arabic version has fewer pages, less content depth, or outdated information, Saudi and Gulf users will notice. The two versions should be equal in quality.
Not testing on mobile: Over 90% of internet usage in Saudi Arabia is mobile. Your bilingual layout must work on a phone, not just a desktop.
Skipping the hreflang setup: Without it, Google may show your English page to Arabic searchers and vice versa — wasting your SEO effort on both sides.
What a Well-Built Bilingual Site Looks Like
Done correctly, a bilingual Arabic-English website:
- Serves the right language automatically based on browser settings, with a manual override
- Loads fast in both directions
- Has Google indexing both versions correctly
- Reads naturally in Arabic — not like a translation
- Works perfectly on mobile for both directions
CloudTopia builds Arabic-English websites with proper RTL architecture, native-standard Arabic content structure, and hreflang implementation as a default — not an add-on. If you're building from scratch or rebuilding an existing bilingual site that's broken, talk to us before you commit to an approach.
Primary keyword: bilingual Arabic English website Related keywords: how to build Arabic English website, Arabic RTL website development, bilingual website Gulf, Arabic website best practices 2026 Meta description (156 chars): How to build a bilingual Arabic-English website the right way — RTL layout, typography, hreflang SEO, and bilingual architecture for Gulf businesses. Suggested internal links: /website-design, /services, /saudi-arabia, /contact Suggested image alt text: "Bilingual Arabic-English website architecture and RTL layout guide"
Pros
- Improved user experience for Arabic speakers
- Better SEO with proper structure
- Increased accessibility for bilingual users
Cons
- Requires more initial planning
- Potential for increased development time
What is the best structure for a bilingual website?
A subdirectory structure is recommended for most businesses.
How should I handle bidirectional text?
Use the <bdi> HTML element to isolate directional content.
What are common mistakes in bilingual site development?
Using translation plugins and treating the Arabic version as secondary.
Start Building Your Bilingual Website Today
Contact us for expert guidance on creating your bilingual site.
Share this article
Written by
CloudTopia Editorial Team
Editors
Posts attributed to the CloudTopia editorial team are collaborative pieces reviewed by our lead engineer and designer before publication. Each piece draws on our live project work across the Gulf and global clients.
.png&w=3840&q=75)
.png&w=3840&q=75)