· 4 min read · Oman, Arabic, RTL, Next.js, SEO

Building bilingual Arabic and English websites for businesses in Oman

How to build an Arabic and English website that works properly: right-to-left layout, fonts, numbers, forms, and bilingual SEO with hreflang, for businesses in Muscat and across Oman.

Arabic is Oman's official language, and English is used widely in business. For most Omani businesses, a website in only one of them leaves customers out. But "adding Arabic" is much more than translating the text. Arabic reads right to left, uses different fonts, and has its own conventions for numbers, dates and forms. Get these wrong and the Arabic version feels like an afterthought, which is exactly how visitors will treat it.

I built journeysom.com for Journey with Nawal, a wellness brand in Muscat, with every page in English and Arabic and a language toggle in the header. This guide covers what it takes to do bilingual properly, for business owners and developers alike.

1. Decide how the two languages are structured

For search engines and for users, each language needs its own URL. The common, clean approach is a path prefix:

https://example.om/en/services
https://example.om/ar/services

Avoid switching the language on the same URL with a cookie or script. Google needs a separate address for each version so it can index and show the Arabic page to Arabic searchers and the English page to English searchers.

Don't redirect people automatically based on their location, either. Someone in Muscat may prefer English, and someone abroad may prefer Arabic. Pick a sensible default, and make the language switch obvious and one tap away.

2. Right-to-left layout

Arabic pages need dir="rtl" and lang="ar" on the <html> element. That flips the natural direction of the page, but only if your CSS cooperates.

Use logical CSS properties

Properties like margin-left and padding-right are tied to physical sides, so they don't flip. Logical properties describe start and end instead, and flip automatically:

/* Physical: stays on the left in Arabic too */
.card { margin-left: 1rem; text-align: left; }

/* Logical: follows the reading direction */
.card { margin-inline-start: 1rem; text-align: start; }

In Tailwind CSS the same idea is available as ms-4, me-4, ps-4 and text-start. Building with these from day one saves a painful retrofit later.

Mirror what has direction, not everything

  • Mirror: arrows for next and back, progress indicators, sliders, breadcrumb separators, and the position of navigation and sidebars.
  • Don't mirror: logos, photos, video play buttons, clocks, and phone numbers or codes, which are still read left to right.

3. Fonts that respect Arabic

Many popular Latin fonts either don't include Arabic characters or render them poorly, and the browser then falls back to a system font that doesn't match your design. Choose an Arabic typeface deliberately and pair it with your Latin one. Google Fonts has well-made options such as IBM Plex Sans Arabic, Noto Kufi Arabic, Noto Naskh Arabic, Cairo and Tajawal.

Arabic script generally needs a slightly larger size and more generous line height than Latin text at the same visual weight. Test with real content, not placeholder text, and never apply letter-spacing to Arabic, because it breaks the connected letterforms.

4. Numbers, dates, phone numbers and prices

  • Digits. Decide whether the Arabic version uses Western digits (0123) or Eastern Arabic digits (٠١٢٣), and be consistent. Many Gulf business sites use Western digits for prices and phone numbers because they're familiar to everyone.
  • Dates. Format them with the browser's built-in Intl.DateTimeFormat for the right locale rather than building strings by hand.
  • Phone numbers. Omani numbers are +968 followed by eight digits. Display them left to right even inside Arabic text, and accept them in forms with or without the country code.
  • Currency. Omani rial prices use three decimal places (1 OMR = 1,000 baisa), so a price looks like 12.500 OMR. Intl.NumberFormat handles this correctly.
new Intl.NumberFormat("ar-OM", { style: "currency", currency: "OMR" }).format(12.5);
new Intl.NumberFormat("en-OM", { style: "currency", currency: "OMR" }).format(12.5);

5. Forms that work in both directions

  • Labels, placeholders and error messages all need translating, including the ones that appear only on errors
  • Email and URL fields should stay left to right even on Arabic pages, because their content is Latin
  • Validation shouldn't reject Arabic names; don't limit name fields to A to Z
  • Confirmation emails and messages should arrive in the language the visitor used

6. Bilingual SEO

Search engines need to understand that the two versions are translations of each other. Three things do most of the work:

hreflang tags

<link rel="alternate" hreflang="en" href="https://example.om/en/services" />
<link rel="alternate" hreflang="ar" href="https://example.om/ar/services" />
<link rel="alternate" hreflang="x-default" href="https://example.om/en/services" />

Each page lists every language version, including itself. In Next.js you can generate these with the alternates.languages field in a page's metadata.

Translated metadata

Titles, meta descriptions, image alt text and structured data need translating too, not just the visible text. An Arabic page with an English title in search results looks unfinished.

Arabic keywords are their own research

People don't search in Arabic by translating English phrases word for word. Look at how your customers actually phrase things in Arabic, including common spelling variations, and write the Arabic content around that.

7. Translation is a content job, not a technical one

Machine translation is a useful first draft, but a native speaker should review everything customers will read, especially headlines, calls to action and anything legal like refund policies. Tone matters too: the warmth of a wellness brand or the precision of an engineering firm should come through in both languages.

8. Test like your customers

  • Switch languages on every page and check you land on the equivalent page, not the homepage
  • Test on phones, where most visitors in Oman will arrive
  • Check long Arabic words and short English ones don't break buttons or menus
  • Walk through the whole booking or enquiry flow in Arabic, including emails

Checklist

  • Separate URLs per language, with an obvious language switch
  • dir="rtl" and lang="ar" on Arabic pages
  • Logical CSS properties throughout
  • A proper Arabic font, sized and spaced for Arabic
  • Consistent digits, correct dates, +968 phone formats and three-decimal OMR prices
  • Translated forms, errors and emails
  • hreflang tags and translated metadata
  • Native-speaker review of customer-facing text

Planning a bilingual website or app for your business in Oman? Let's talk. You can see a live example at Journey with Nawal.

Case studyJourney with Nawal: A bilingual wellness retreat site with booking, built in Muscat

Keep reading