Back to the journal

Guide9 min read

Arabic and English website: how to structure it for Dubai

Two languages, two reading directions, one brand. The structure decides whether both versions feel like home.

AJAllen Antony JamesCo-founder, Storytellers

Short answer: a good Arabic and English website gives each language its own URL, links the two versions with hreflang, sets Arabic pages right to left, and lets visitors switch language themselves. The harder decision is editorial: which pages exist in Arabic at all, and which lines are rewritten rather than translated.

This guide is for Dubai businesses planning a bilingual website, or fixing one that feels half finished. It covers the structure decisions first and the code second, because the code is the easy part.

Why does a Dubai website need Arabic and English?

Because the city reads in both. Arabic is the official language of the UAE, and signs on commercial outlets are in Arabic and English, according to the UAE government fact sheet. The same source says the expatriate community outnumbers UAE nationals, and the total population was 9,282,410 people in 2020.

Most of those visits happen on phones. The fact sheet reports 220.1 active mobile subscriptions per 100 people as of September 2023, citing TDRA. So plan the bilingual site on a small screen first.

Which pages should exist in Arabic?

Start with the pages where an Arabic speaker makes a decision: home, the main services, contact and the guides your Arabic-speaking customers actually need. You do not have to translate everything on day one.

What you should avoid is the half-translated page. Google says translating only the boilerplate, while the main content stays in one language, can create a bad user experience (Google Search Central). A smaller Arabic site that is complete beats a large one that switches language halfway down the page.

Should Arabic and English pages share one URL?

No. Google recommends different URLs for each language version of a page, rather than cookies or browser settings (Google Search Central). Google also notes that its crawler sends requests without an Accept-Language header, so it may never see a version that only appears through language detection.

A simple pattern is a folder per language, such as /ar/ for Arabic. Google lists subdirectories as easy to set up and low maintenance. Pick one pattern and keep it the same across the whole site.

How does hreflang connect the two versions?

Hreflang tells Google that two pages are the same content in different languages. Google's localized versions guide sets three key rules: each version lists itself and every other version, the URLs are fully qualified, and the links must point both ways. If two pages do not point to each other, the tags are ignored.

Use the ISO 639-1 language codes, such as "ar" and "en". Google also supports an x-default value for a fallback page, such as a language selector.

One detail surprises many teams. Google says it does not use hreflang or the HTML lang attribute to detect a page's language. It reads the visible content. So the words on the page have to be in the language you say they are.

Should a bilingual website redirect visitors by language?

No. Google advises against automatically redirecting users from one language version to another based on what you think their language may be (Google). Those redirects can stop people and search engines from seeing all the versions.

Instead, add a clear language link on every page that goes to the matching page in the other language, not to the home page. Label it in its own language: "العربية" on the English page and "English" on the Arabic one.

How do you set up right-to-left pages?

Add dir="rtl" to the html tag of every Arabic page. The W3C says this sets the base direction for the whole document, so blocks right-align, tables run right to left and form fields start at the right. Do not use CSS to set the direction.

Declare the language too. The W3C recommends a lang attribute on the html tag, such as lang="ar". It also warns that language and direction are separate, so set both.

  • Use logical CSS. W3C recommends start and end, not left and right, for margins, padding and alignment. Then the layout mirrors with far less work.
  • Let forms detect direction. W3C suggests dir="auto" on form fields, so a name typed in English or Arabic displays correctly.
  • Check icons and arrows. A "next" arrow should point the way the reader is going.

Which lines should be rewritten, not translated?

The lines that carry the brand. Headlines, calls to action, the opening of each page and anything with humour or rhythm. A literal translation keeps the meaning and loses the voice.

Give the Arabic writer the intent of each line, not only the English words. Ask for the Arabic to sound like the same person speaking, not a translation of them. We wrote more about this in marketing to a bilingual audience in the UAE.

Some things must stay exactly the same in both languages: your registered business name, phone number, address and opening hours. Consistent facts help people and search engines trust you.

Arabic and English website checklist

  1. Decide which pages exist in Arabic at launch, and make each one complete.
  2. Give every language version its own URL, in one consistent pattern.
  3. Add hreflang links that point both ways, plus an optional x-default.
  4. Set dir="rtl" and lang="ar" on Arabic pages, and lang="en" on English pages.
  5. Build the layout with logical CSS, so it mirrors cleanly.
  6. Add a language switch on every page that goes to the matching page.
  7. Rewrite headlines and calls to action with a native Arabic writer.
  8. Test both versions on a phone before launch.

What are the most common bilingual website mistakes?

  • One URL that swaps language with a cookie.
  • Hreflang tags that only point one way.
  • Arabic pages that are flipped English layouts, with the text still aligned left.
  • An English menu and footer on Arabic pages.
  • Machine translation published without a native review.

Key takeaways

  • An Arabic and English website needs separate URLs and two-way hreflang links.
  • Choose which pages exist in Arabic, and make each one complete.
  • Set dir="rtl" and lang on Arabic pages, and build with logical CSS.
  • Rewrite the lines that carry the brand. Never redirect visitors by guessed language.

Written by Allen Antony James, Co-founder of Storytellers, a storyteller-first studio based in Dubai, telling stories worldwide. Want help putting this into practice? See Web design in Dubai or tell us about your business.

Sources

Every claim in this guide links to its source. All sources were checked on 14 Oct 2026.

FAQ.

Arabic and English website, answered.

Ask us a question

Yes. Google recommends different URLs for each language version of a page, rather than switching language with cookies or browser settings. Many sites use a folder such as /ar/ for the Arabic version.

Hreflang is a tag that tells Google two pages are the same content in different languages. Each version must list itself and the other versions, and the links must point both ways, or Google ignores them.

No. Google says it uses the visible content of a page to decide its language, not the lang attribute or hreflang. You should still set lang, because browsers and screen readers use it.

Add dir="rtl" to the html tag of each Arabic page, and declare lang="ar". The W3C advises against setting direction with CSS, and recommends logical properties such as start and end in your styles.

No. Google advises against redirecting users based on their guessed language. Add a clear language switch on every page that links to the matching page in the other language.

No. Start with the pages where Arabic speakers make decisions, such as the home page, main services and contact. Make each Arabic page complete rather than translating only the menu and footer.

Let's talk.

A website, a brand, a film. Or all three.

A quick reply.

We'll get back to you within 24 hours, with a clear next step.

A fixed price.

You'll know the scope, dates and price before any work begins.

Start a project
Co-founder
at Storytellers
Allen Antony James Ask Allen directly